/* ============================================================================
   RENOVAÇO — pele das telas de REUNIÕES, CAFÉS E PRESENÇA

   Folha SEPARADA de propósito, e não um acréscimo ao fim de style.css: mais de
   uma frente trabalha neste app ao mesmo tempo, e duas mãos acrescentando no
   final do mesmo arquivo é a receita de uma sobrescrever a outra em silêncio.
   Aqui o módulo é dono do próprio arquivo.

   Carregada DEPOIS de renovaco.css e style.css, então herda todos os tokens.

   🔴 REGRA HERDADA: nenhum hex de marca aqui. Só var(--…). E nenhum var() de
   token que não exista — `var()` inexistente não cai no valor anterior, ele
   INVALIDA a declaração inteira e a regra some sem erro nenhum no console.
   Todo token usado abaixo está em renovaco.css ou no :root de style.css.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. FAIXAS */

/* style.css tem .faixa-ok (verde) e .faixa-aviso (vermelha). Falta o meio-termo:
   "isto merece sua atenção mas não deu errado" — que é exatamente o tom da
   convocação fora do prazo e do aviso de 2 ausências. */
.faixa-atencao {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-4) var(--e-5); margin-bottom: var(--e-5);
  border-radius: var(--raio-lg);
  background: var(--atencao-bg); color: var(--atencao);
  border: 1px solid rgba(178, 107, 0, .22);
  font-size: var(--txt-sm); line-height: 1.55;
}
.faixa-atencao b { color: var(--atencao); }
.faixa-atencao .ic, .faixa-atencao .ic-mini { flex: none; }

.alerta-norma { align-items: center; }
.alerta-norma .ic { width: 28px; height: 28px; }

.aviso-inline {
  margin: calc(var(--e-4) * -1) 0 var(--e-4);
  font-size: var(--txt-sm); color: var(--atencao);
}

/* --------------------------------------------------------------- 2. PÍLULAS */

/* Um estado, uma cor, e a mesma cor em toda tela. Presença é assunto com
   consequência: se "faltou" for vermelho aqui e cinza ali, a leitura muda de
   tela para tela e a confiança no número vai junto. */
.pill.est-rascunho  { background: var(--cinza-100); color: var(--cinza-600); }
.pill.est-convocada { background: var(--info-bg);   color: var(--info); }
.pill.est-realizada { background: var(--navy-100);  color: var(--navy-700); }
.pill.est-cancelada { background: var(--erro-bg);   color: var(--erro); }
.pill.fora          { background: var(--atencao-bg); color: var(--atencao); margin-left: 6px; }
.pill.hoje-selo     { background: var(--turq-500);  color: var(--branco); }

.pill.vou     { background: var(--ok-bg);      color: var(--ok); }
.pill.nvou    { background: var(--cinza-100);  color: var(--cinza-600); }
.pill.talvez  { background: var(--atencao-bg); color: var(--atencao); }
.pill.aguarda { background: var(--cinza-50);   color: var(--cinza-400); }

.pill.pres    { background: var(--ok-bg);      color: var(--ok); }
.pill.just    { background: var(--info-bg);    color: var(--info); }
.pill.falt    { background: var(--erro-bg);    color: var(--erro); }
.pill.alerta3 { background: var(--erro-bg);    color: var(--erro); }
.pill.quase   { background: var(--atencao-bg); color: var(--atencao); }

.numero.alerta b {
  background: none; -webkit-text-fill-color: var(--erro); color: var(--erro);
}

/* ------------------------------------------------------- 3. LISTA DE ENCONTROS */

.enc-lista { display: grid; gap: var(--e-4); margin-bottom: var(--e-8); }

.enc {
  display: grid; grid-template-columns: 78px 1fr auto; gap: var(--e-5);
  align-items: start;
  padding: var(--e-5); border-radius: var(--raio-lg);
  background: var(--superficie); border: 1px solid var(--borda);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--t-suave), transform var(--t-suave);
}
.enc:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }

/* O de hoje ganha o traço turquesa à esquerda: numa lista de seis, o olho
   precisa achar "o de hoje" antes de ler qualquer título. */
.enc.hoje { border-color: var(--turq-300); box-shadow: var(--elev-2); }
.enc.hoje::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--turq-500); border-radius: var(--raio-lg) 0 0 var(--raio-lg);
}
.enc { position: relative; overflow: hidden; }

.enc.off { opacity: .62; }
.enc.off .enc-data { filter: grayscale(1); }

/* O tijolo de data. Dia grande porque é o que se procura; mês e dia da semana
   pequenos porque só confirmam. */
.enc-data {
  text-align: center; padding: var(--e-3) 0; border-radius: var(--raio-md);
  background: linear-gradient(180deg, var(--navy-600), var(--navy-800));
  color: var(--branco); box-shadow: var(--elev-1);
}
.enc-data i {
  display: block; font-style: normal; font-size: var(--txt-xs);
  text-transform: uppercase; letter-spacing: .1em; opacity: .72;
}
.enc-data b {
  display: block; font-family: var(--fonte-titulo); font-size: 2rem;
  line-height: 1.05; letter-spacing: -.03em;
}
.enc-data span { display: block; font-size: var(--txt-xs); opacity: .82; text-transform: uppercase; }

.enc-corpo { min-width: 0; }
.enc-titulo { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-bottom: var(--e-2); }
.enc-titulo h3 { margin: 0; font-size: var(--txt-lg); }

.enc-meta {
  display: flex; gap: 8px; align-items: center; margin: 3px 0;
  color: var(--texto-suave); font-size: var(--txt-sm);
}
.enc-meta .ic-mini { flex: none; color: var(--acento-texto); }

.enc-motivo {
  margin: var(--e-3) 0 0; padding: 9px 13px; border-radius: var(--raio-md);
  background: var(--cinza-50); color: var(--texto-suave);
  font-size: var(--txt-sm); line-height: 1.5;
}
.enc-motivo.aviso { background: var(--atencao-bg); color: var(--atencao); }

.enc-pauta { margin-top: var(--e-3); }
.enc-pauta summary {
  cursor: pointer; color: var(--acento-texto); font-size: var(--txt-sm); font-weight: 600;
}
.enc-pauta p {
  margin: var(--e-2) 0 0; white-space: pre-line;
  font-size: var(--txt-sm); color: var(--texto); line-height: 1.6;
}

.enc-pe { display: grid; gap: var(--e-3); justify-items: stretch; min-width: 220px; }

@media (max-width: 760px) {
  .enc { grid-template-columns: 58px 1fr; }
  .enc-pe { grid-column: 1 / -1; min-width: 0; }
  .enc-data b { font-size: 1.55rem; }
}

/* ------------------------------------------------------ 4. INTENÇÃO (RSVP) */

/* Três botões, e a resposta escolhida fica PREENCHIDA — não só com borda.
   Borda mais grossa é diferença que some numa tela de celular ao sol, e aqui
   a pessoa precisa ver de relance o que ela já respondeu. */
.rsvp-rotulo {
  display: block; font-size: var(--txt-xs); color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px;
}
.rsvp-botoes { display: flex; gap: 6px; }

.rsvp-b {
  flex: 1; display: flex; gap: 6px; align-items: center; justify-content: center;
  min-height: var(--alvo-toque); padding: 0 10px;
  border-radius: var(--raio-md); border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--texto-suave);
  font-size: var(--txt-sm); font-weight: 600; cursor: pointer;
  transition: all var(--t-rapido);
}
.rsvp-b span { white-space: nowrap; }
.rsvp-b:hover:not(:disabled) { border-color: var(--navy-300); color: var(--texto-forte); }
.rsvp-b:disabled { opacity: .45; cursor: not-allowed; }

.rsvp-b.vou.escolhido     { background: var(--ok);      border-color: var(--ok);      color: var(--branco); }
.rsvp-b.talvez.escolhido  { background: var(--atencao); border-color: var(--atencao); color: var(--branco); }
.rsvp-b.nao_vou.escolhido { background: var(--cinza-500); border-color: var(--cinza-500); color: var(--branco); }

.rsvp-botoes.grande .rsvp-b { min-height: 52px; font-size: var(--txt-base); }

.ja-presente {
  display: flex; gap: var(--e-3); align-items: center;
  padding: var(--e-3) var(--e-4); border-radius: var(--raio-md);
  background: var(--ok-bg); color: var(--ok);
}
.ja-presente .ic { flex: none; width: 26px; height: 26px; }
.ja-presente b { display: block; font-size: var(--txt-sm); }
.ja-presente span { font-size: var(--txt-xs); opacity: .85; }

/* ------------------------------------------------- 5. CALENDÁRIO DO CELULAR */

.calendario-celular {
  display: flex; gap: var(--e-6); align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.calendario-celular h2 {
  display: flex; gap: 8px; align-items: center; margin: 0 0 6px; font-size: var(--txt-lg);
}
.calendario-celular .sub { margin: 0; max-width: 56ch; }
.calendario-celular .acoes { margin: 0; flex-wrap: wrap; }

/* ------------------------------------------------------ 6. FORMULÁRIO NOVO */

.formulario { display: grid; gap: var(--e-4); }
.linha-campos { display: flex; gap: var(--e-4); flex-wrap: wrap; }
.linha-campos .campo { flex: 1 1 240px; margin: 0; }
.linha-campos .campo.estreito { flex: 0 1 150px; }

/* 🔴 DOIS DEFEITOS QUE SÓ APARECERAM NO CELULAR, e os dois vinham do mesmo
   lugar — o style.css estiliza campo por TIPO de input:

     input[type="text"], [tel], [email], [password], [search], select, textarea

   `date` e `time` não estão nessa lista. Resultado: "Data" e "Início" saíam
   com a aparência nativa do navegador, minúsculos, do lado do rótulo, no meio
   de um formulário inteiro de campos largos e uniformes — a tela parecia
   quebrada justamente nos dois campos que TODO encontro precisa preencher.

   E o rótulo: `.campo > span` é inline por padrão. Nos campos de texto o
   `width:100%` do input empurrava o span para a linha de cima por acidente;
   nos de data, que são estreitos, o acidente não acontecia e o rótulo colava
   no campo.

   Corrigido aqui, escopado no `.formulario` deste módulo: mexer no seletor
   global do style.css consertaria isto e mudaria telas de outras frentes que
   estão sendo escritas agora. */
.formulario .campo > span {
  display: block; margin-bottom: 6px;
  font-weight: 600; color: var(--texto-forte);
}
.formulario input[type="date"],
.formulario input[type="time"] {
  width: 100%; min-height: var(--alvo-toque); padding: 11px 14px;
  border-radius: var(--raio-md); border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--texto);
  font-family: inherit; font-size: var(--txt-base);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.formulario input[type="date"]:focus,
.formulario input[type="time"]:focus {
  outline: none; border-color: var(--turq-500); box-shadow: var(--anel-foco);
}

.campo .dica {
  display: block; margin-top: 5px; font-size: var(--txt-xs);
  color: var(--texto-suave); font-style: normal;
}
.campo span em { color: var(--texto-suave); font-style: normal; font-weight: 400; }

/* ------------------------------------------------------- 7. TELA DO ENCONTRO */

.olho {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 0 0 6px; font-size: var(--txt-xs); color: var(--acento-texto);
  text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
}
.cabeca-encontro .sub { line-height: 1.9; }
.cabeca-encontro .ic-mini { vertical-align: -3px; color: var(--acento-texto); }

.acoes-encontro { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--e-6); }

/* 🔴 FILHO DIRETO (`>`), e a razão é a mesma armadilha de duas linhas abaixo.
   Escrito como `.acoes-encontro form`, isto alcançava também o formulário de
   cancelamento lá dentro do <details> — e `display: flex` de autor GANHA do
   `display: none` que o navegador dá ao conteúdo de um <details> fechado.
   O formulário ficava invisível, fora da tela, 200px além da borda direita.
   Duas regras diferentes, o mesmo erro: cuidado ao estilizar descendentes de
   um elemento que o navegador esconde sozinho. */
.acoes-encontro > form { display: flex; gap: 6px; align-items: center; margin: 0; }

/* Cancelar dobrado: discreto até alguém decidir. O `summary` continua sendo um
   alvo de toque de verdade — discreto não é minúsculo. */
.cancelar-bloco { margin-left: auto; }
.cancelar-bloco > summary {
  display: inline-flex; align-items: center; min-height: var(--alvo-toque);
  padding: 0 var(--e-3); cursor: pointer; list-style: none;
  color: var(--texto-suave); font-size: var(--txt-sm); border-radius: var(--raio-md);
}
.cancelar-bloco > summary::-webkit-details-marker { display: none; }
.cancelar-bloco > summary:hover { color: var(--erro); background: var(--erro-bg); }
.cancelar-bloco[open] > summary { color: var(--erro); font-weight: 600; }
/* 🔴 ESCONDER O FECHADO É NOSSO, NÃO DO NAVEGADOR.

   Como os navegadores escondem o conteúdo de um <details> fechado mudou: uns
   usam `display: none` na folha do próprio UA, os atuais usam
   `content-visibility: hidden` em `::details-content`. A diferença importa —
   com `display: none` qualquer regra de autor que dê `display` GANHA e reexibe
   o conteúdo; com `content-visibility` o conteúdo some da tela mas continua
   ocupando retângulo, o que faz uma auditoria de layout acusar 200px fora da
   tela e não dá para saber, olhando, se é real.

   Declarar `display: none` aqui tira a dúvida e a dependência: fechado é
   fechado, em qualquer navegador, hoje e daqui a três versões. */
.cancelar-bloco:not([open]) .cancelar { display: none; }

.cancelar-bloco[open] .cancelar {
  display: flex; gap: 6px; margin-top: var(--e-2); padding: var(--e-3);
  border-radius: var(--raio-md); background: var(--erro-bg);
}
.acoes-encontro .cancelar input {
  min-height: var(--alvo-toque); padding: 0 12px; min-width: 300px; flex: 1;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-md);
  background: var(--superficie);
  font-family: inherit; font-size: var(--txt-sm);
}

.pauta { white-space: pre-line; line-height: 1.7; margin: 0; }

.convite-texto {
  margin: 0 0 var(--e-4); padding: var(--e-4) var(--e-5);
  background: var(--navy-900); color: #E6EDF5;
  border-radius: var(--raio-md); overflow-x: auto;
  font-family: var(--fonte-mono); font-size: var(--txt-sm); line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}

.meu-rsvp .rsvp { margin-top: var(--e-3); }

/* ------------------------------------------------------------ 8. A CHAMADA */

/* O bloco do próprio parceiro vem primeiro e é o maior da tela: numa sala de
   40 pessoas, 39 abriram esta página para fazer UMA coisa. */
.eu-marco, .eu-presente {
  padding: var(--e-6) var(--e-6) var(--e-7);
  border-radius: var(--raio-xl); margin-bottom: var(--e-6);
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color: var(--branco); box-shadow: var(--elev-navy);
}
.eu-marco h2, .eu-presente h2 {
  display: flex; gap: var(--e-3); align-items: center;
  color: var(--branco); margin: 0 0 var(--e-2); font-size: var(--txt-xl);
}
.eu-marco h2 .ic { width: 30px; height: 30px; color: var(--turq-400); }
.eu-marco p, .eu-presente p { margin: 0; color: rgba(255, 255, 255, .82); max-width: 56ch; line-height: 1.6; }
.eu-marco.esperando { background: var(--navy-50); color: var(--texto); box-shadow: var(--elev-1); border: 1px solid var(--navy-100); }
.eu-marco.esperando h2 { color: var(--texto-forte); }
.eu-marco.esperando h2 .ic { color: var(--acento-texto); }
.eu-marco.esperando p { color: var(--texto-suave); }

.eu-presente { display: flex; gap: var(--e-5); align-items: center; background: linear-gradient(135deg, var(--ok), #14603B); }
.eu-presente .simbolo.grande .ic { width: 44px; height: 44px; color: var(--branco); }

/* O campo do código é a coisa mais importante da tela: dígito grande, espaçado,
   e teclado numérico no celular. Um input pequeno aqui faz gente de 60 anos
   errar o código e concluir que "o sistema não funciona". */
.form-codigo { display: flex; gap: var(--e-3); margin-top: var(--e-5); flex-wrap: wrap; }
.form-codigo input {
  flex: 0 1 190px; min-height: 62px; padding: 0 var(--e-4);
  border: 2px solid var(--turq-400); border-radius: var(--raio-md);
  background: rgba(255, 255, 255, .96); color: var(--navy-800);
  font-family: var(--fonte-mono); font-size: 2rem; font-weight: 700;
  letter-spacing: .34em; text-align: center;
}
.form-codigo input:focus { outline: none; box-shadow: var(--anel-foco); }
.form-codigo .btn { min-height: 62px; flex: 1 1 220px; }

/* O código que o coordenador projeta. Ele é lido do outro lado de uma sala —
   por isso a fonte é do tamanho que é, e não do tamanho que "fica elegante". */
.sala {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-6);
  align-items: center; margin-bottom: var(--e-6);
  padding: var(--e-6); border-radius: var(--raio-xl);
  background: var(--superficie); border: 1px solid var(--turq-200);
  box-shadow: var(--elev-2);
}
.sala-codigo { text-align: center; }
.sala-codigo .rotulo {
  display: block; font-size: var(--txt-xs); color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .12em;
}
.sala-codigo b {
  display: block; font-family: var(--fonte-mono); font-weight: 700;
  font-size: clamp(3rem, 9vw, 5rem); line-height: 1.05; letter-spacing: .1em;
  color: var(--navy-700);
}
.sala-codigo .troca { display: block; font-size: var(--txt-xs); color: var(--texto-suave); }
.sala-codigo .troca i { font-style: normal; font-family: var(--fonte-mono); color: var(--acento-texto); }
.sala-como h2 { margin: 0 0 var(--e-2); font-size: var(--txt-lg); }
.sala-como p { margin: 0 0 var(--e-3); color: var(--texto-suave); font-size: var(--txt-sm); line-height: 1.6; max-width: 52ch; }

@media (max-width: 720px) {
  .sala { grid-template-columns: 1fr; text-align: center; }
  .sala-como p { margin-inline: auto; }
}

/* O placar acima da lista. Enquanto a chamada roda, é o único número que o
   coordenador olha — e ele muda sozinho a cada 12 segundos. */
.placar { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-4); }
.placar .p {
  display: flex; gap: 7px; align-items: baseline;
  padding: 9px 16px; border-radius: var(--raio-full);
  font-size: var(--txt-sm); font-weight: 600;
}
.placar .p b { font-family: var(--fonte-titulo); font-size: var(--txt-lg); }
.placar .pres    { background: var(--ok-bg);      color: var(--ok); }
.placar .just    { background: var(--info-bg);    color: var(--info); }
.placar .falt    { background: var(--erro-bg);    color: var(--erro); }
.placar .aguarda { background: var(--cinza-50);   color: var(--cinza-500); }

/* Uma linha por pessoa, e os três botões grandes o bastante para um dedo
   apressado no meio de um café. */
.tabela.chamada td { vertical-align: middle; }
.tabela.chamada .quem b { display: block; }
.tabela.chamada .sub { display: block; font-size: var(--txt-xs); font-style: normal; }
.disse-vem { color: var(--ok); }
.disse-nao { color: var(--cinza-400); }
.via { color: var(--acento-texto); margin-top: 4px; }

.marcar { display: flex; gap: 5px; justify-content: flex-end; margin: 0; }
.marcar-b {
  display: flex; gap: 6px; align-items: center;
  min-height: var(--alvo-toque); padding: 0 13px;
  border-radius: var(--raio-md); border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--texto-suave);
  font-size: var(--txt-sm); font-weight: 600; cursor: pointer;
  transition: all var(--t-rapido); white-space: nowrap;
}
.marcar-b:hover { border-color: var(--navy-300); color: var(--texto-forte); }
.marcar-b.presente.escolhido    { background: var(--ok);        border-color: var(--ok);        color: var(--branco); }
.marcar-b.justificado.escolhido { background: var(--info);      border-color: var(--info);      color: var(--branco); }
.marcar-b.ausente.escolhido     { background: var(--erro);      border-color: var(--erro);      color: var(--branco); }

@media (max-width: 620px) {
  .marcar-b span { display: none; }
  .marcar-b { padding: 0 14px; }
}

.encerrar {
  display: flex; gap: var(--e-5); align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-top: var(--e-6);
  padding: var(--e-5); border-radius: var(--raio-lg);
  background: var(--navy-50); border: 1px solid var(--navy-100);
}
.encerrar .sub { margin: 4px 0 0; max-width: 62ch; font-size: var(--txt-sm); }
.encerrar button { flex: none; }

/* --------------------------------------------------------- 9. FREQUÊNCIA */

.filtros-linha {
  display: flex; gap: var(--e-4); align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: var(--e-5);
}
.filtro-nucleo select {
  min-height: var(--alvo-toque); padding: 0 12px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-md);
  font-family: inherit; font-size: var(--txt-sm); background: var(--superficie);
}
.filtros-rapidos a.fr { text-decoration: none; }

/* Barra + número: a barra dá a leitura de relance na coluna inteira, o número
   dá a precisão. Só o número obriga a comparar mentalmente 40 porcentagens. */
.taxa { display: flex; gap: 9px; align-items: center; justify-content: flex-end; }
.freq-barra {
  display: block; width: 76px; height: 7px; flex: none;
  background: var(--navy-100); border-radius: var(--raio-full); overflow: hidden;
}
.freq-barra i {
  display: block; height: 100%; border-radius: var(--raio-full);
  background: linear-gradient(90deg, var(--turq-600), var(--turq-400));
}
.tabela .num { text-align: right; }
.tabela .ano { color: var(--texto-suave); font-size: var(--txt-xs); }

/* A célula do parceiro tem três linhas (nome, matrícula, núcleo) e as outras
   têm uma. Com alinhamento ao topo, o número e a barra da frequência flutuavam
   acima do nome a que se referem — e numa tabela de 40 linhas o olho perde a
   correspondência. Ao meio, cada número fica na altura do seu nome. */
#freq .tabela td { vertical-align: middle; }

/* Busca dentro do título da seção: sem isto ela vira uma barra solta com
   largura de tela inteira, e o título perde o peso. */
.barra-busca.embutida { display: inline-flex; margin: 0 0 0 auto; gap: var(--e-3); align-items: center; }
.barra-busca.embutida .campo-busca { min-width: 240px; }
@media (max-width: 700px) {
  .barra-busca.embutida { width: 100%; margin: var(--e-3) 0 0; }
  .barra-busca.embutida .campo-busca { min-width: 0; flex: 1; }
}

/* --------------------------------------------------- 10. ÍCONE EM BOTÃO */

/* `.ic-mini` tem 13px, e é o tamanho certo para um ícone ao lado de texto
   pequeno. Dentro de um botão, um desenho de 13px vira borrão cinza — a mão
   do "Marcar minha presença" ficava irreconhecível. Aqui o ícone acompanha o
   texto do botão. */
.btn .ic-mini, button .ic-mini, .rsvp-b .ic-mini, .marcar-b .ic-mini {
  width: 17px; height: 17px; flex: none;
}
.calendario-celular h2 .ic-mini, .convite h2 .ic-mini, .painel-topo h2 .ic-mini {
  width: 19px; height: 19px; color: var(--acento-texto);
}

/* 🔴 CONTRASTE: `.btn.primario` é NAVY, e o bloco "Estou aqui" também é navy.
   O botão mais importante da tela — o que a pessoa aperta de pé, numa sala
   cheia, muitas vezes com o celular no sol — sumia no próprio fundo.
   Turquesa com texto navy escuro dá 7,4:1 e resolve os dois problemas de uma
   vez: aparece, e continua sendo cor da marca. */
.eu-marco .btn.primario,
.eu-marco button.primario {
  background: var(--turq-400); color: var(--navy-900); border-color: transparent;
  font-weight: 700;
}
.eu-marco .btn.primario:hover,
.eu-marco button.primario:hover { background: var(--turq-300); }

/* ------------------------------------------------------ 11. TOQUE, NO CELULAR */

/* Numa lista de encontros o alvo real é o TÍTULO, não um botão ao lado — e ele
   tinha 17px de altura. Não é questão de norma de acessibilidade: é o dedo de
   quem tem 55 anos tentando abrir um café num ônibus. O link vira bloco com
   altura de toque, sem virar botão. */
@media (max-width: 900px) {
  .tabela td a, .trilha a, .voltar {
    display: inline-flex; align-items: center; min-height: var(--alvo-toque);
  }
  .tabela .btn.pequeno { min-height: var(--alvo-toque); padding: 0 16px; }
  .encerrar button, .encerrar .btn { width: 100%; }
  .acoes-encontro { flex-direction: column; align-items: stretch; }
  .acoes-encontro form, .acoes-encontro .btn { width: 100%; }
  .cancelar-bloco { margin-left: 0; }
  .cancelar-bloco > summary { justify-content: center; }
  .acoes-encontro .cancelar { flex-direction: column; align-items: stretch; }
  .acoes-encontro .cancelar input { min-width: 0; width: 100%; }
  .calendario-celular .acoes .btn { flex: 1 1 100%; justify-content: center; }
}

/* Respeita quem pediu menos movimento: nada aqui depende de animação para ser
   compreendido. */
@media (prefers-reduced-motion: reduce) {
  .enc, .enc:hover { transition: none; transform: none; }
}