/* =============================================================
   Retiro Impacto · Coordenação · Design System
   Toda decisão visual mora aqui em cima, como token (:root).
   Regra: nunca escrever cor/raio/sombra/espaço "solto" no arquivo.
   Leis: (1) absurdamente simples  (2) UX/UI primorosos  (3) mobile de verdade
   ============================================================= */

/* ESCONDIDO É ESCONDIDO. O `hidden` do HTML vale por uma regra fraquíssima do navegador
   (`[hidden]{display:none}`), então QUALQUER classe nossa que declare `display` ganha dela
   e o elemento continua na tela. Foi assim que o aviso "passou da capacidade" apareceu em
   todo dormitório: `.etiqueta{display:inline-flex}` vencia o `hidden` do elemento.
   Esta regra fecha a porta para a família inteira desse defeito · não remover. */
[hidden]{display:none !important}

:root{
  /* ---- Cores: identidade Pastoreio · teal calmo e confiável (docs/pastoreio-design-system.md) ---- */
  --cor-primaria:#0f766e;        /* Teal Pastoral (teal-700) · branco por cima = AA */
  --cor-primaria-escura:#115e59; /* hover / pressionado (teal-800) */
  --cor-primaria-profunda:#134e4a; /* superfícies de marca profundas (teal-900) */
  --cor-primaria-clara:#ccfbf1;  /* tinta de fundo para realces (teal-100) */
  --cor-primaria-tenue:#f0fdfa;  /* fundo bem suave, hover de menu (teal-50) */
  --cor-primaria-borda:#99f6e4;  /* bordas claras teal (teal-200) */

  --cor-acento:#f59e0b;          /* âmbar · SÓ acento: avisos, pendências, destaques */
  --cor-acento-clara:#fef3c7;    /* fundo de badge de atenção (amber-100) */

  --cor-tinta:#111827;           /* texto principal (gray-900) */
  --cor-tinta-suave:#374151;     /* gray-700 */
  --cor-mudo:#6b7280;            /* texto secundário · AA em fundo claro (gray-500) */

  --cor-fundo:#f9fafb;           /* fundo de apoio da aplicação (gray-50) */
  --cor-cartao:#ffffff;
  --cor-borda:#e5e7eb;           /* gray-200 */
  --cor-borda-forte:#d1d5db;     /* gray-300 · linha de corte dos impressos */

  --cor-ok:#15803d;      --cor-ok-fundo:#f0fdf4;    --cor-ok-borda:#bbf7d0;   /* green-700: AA como texto (4.8:1) */
  --cor-aviso:#a16207;   --cor-aviso-fundo:#fffbeb; --cor-aviso-borda:#fde68a;/* texto AA; acento é #f59e0b */
  --cor-erro:#c81e1e;    --cor-erro-fundo:#fef2f2;  --cor-erro-borda:#fecaca; /* red escuro: AA como texto (5.2:1) */
  --cor-foco:#0d9488;    /* anel de foco visível · teal-600 */

  /* ---- Tipos de item da programação (cada um com sua cor, em neutros do sistema) ---- */
  --tipo-palestra:#111827;   --tipo-palestra-fundo:#f3f4f6; --tipo-palestra-borda:#e5e7eb;
  --tipo-refeicao:#c2410c;   --tipo-refeicao-fundo:#fff7ed; --tipo-refeicao-borda:#fed7aa;
  --tipo-marco:#6b7280;      --tipo-marco-fundo:#f9fafb;    --tipo-marco-borda:#e5e7eb;
  --tipo-atividade:#16a34a;  --tipo-atividade-fundo:#f0fdf4;--tipo-atividade-borda:#bbf7d0;

  /* ---- Áreas do quadro de tarefas (mapa fixo; o mesmo na tela e na folha A3) ----
     Harmonizadas na faixa 600 a 700 do Tailwind para conviver com o teal da marca.
     Limpeza saiu do cyan #0e7490 (colidia com o teal) para um azul distinto. */
  --a-cozinha:#c2410c;
  --a-credenciamento:#7c3aed;
  --a-transporte:#2563eb;
  --a-som:#c026d3;
  --a-limpeza:#0369a1;
  --a-fogos:#d97706;
  --a-placas:#4338ca;
  --a-farmacia:#be123c;
  --a-farmacia-fundo:#ffe4e6;   /* régua suave sob o horário no bloco da farmácia */
  --a-malas:#16a34a;
  --a-celulares:#475569;
  --a-boasvindas:#db2777;
  --a-neutra:#6b7280;      /* área digitada fora do mapa · texto livre é permitido */

  /* ---- Tipografia · Plus Jakarta Sans em todos os papéis (a marca vem do peso e tracking) ---- */
  --fonte-titulo:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --fonte-texto:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Nada abaixo de 16px na tela: a coordenação tem leitores mais velhos. */
  --txt-base:1rem;      /* 16px · mínimo absoluto */
  --txt-md:1.125rem;    /* 18px */
  --txt-lg:1.375rem;    /* 22px · h2 */
  --txt-xl:1.75rem;     /* 28px · h1 */
  --txt-2xl:2.5rem;     /* 40px · números de métrica */
  --peso-normal:400; --peso-medio:500; --peso-forte:700; --peso-extra:800;
  --tracking-titulo:-.025em;   /* assinatura tipográfica Pastoreio: títulos apertados */
  --linha-apertada:1.2; --linha-normal:1.55;

  /* ---- Espaçamento ---- */
  --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem; --e-6:2rem; --e-7:3rem;

  /* ---- Formas e profundidade (sombra sutil, neutra) ---- */
  --raio-sm:8px; --raio:12px; --raio-lg:18px; --raio-pill:999px;
  --sombra-sm:0 1px 2px rgb(0 0 0 / .05);
  --sombra:0 1px 2px rgb(0 0 0 / .05), 0 1px 3px rgb(0 0 0 / .06);
  --sombra-md:0 8px 24px rgb(0 0 0 / .08);

  /* ---- Alvos de toque (lei 3) ---- */
  --toque:44px;          /* mínimo de qualquer botão */
  --toque-grande:48px;   /* botao de presenca, usado em pe, com o polegar */
  --nav-mobile-h:66px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* ============ ÍCONES (Lucide vendorizado) ============
   Herdam a cor do texto (stroke:currentColor) e alinham com a linha de base. */
.ic{display:inline-block;vertical-align:-.18em;flex:none;stroke-width:2}
.botao .ic,.et-tipo .ic,.etiqueta .ic{vertical-align:-.16em}
h2 .ic,h3 .ic{vertical-align:-.12em;color:var(--cor-primaria)}
.ic-tit{color:var(--cor-primaria);display:inline-flex;vertical-align:-.12em}

/* ============ REFERÊNCIA DE PARTICIPANTE (SSOT: ref_participante) ============
   numero, bolinha da equipe e nome: listas, relatorios, farmacia e mural. */
.ref-part{display:inline-flex;align-items:center;gap:.4em;min-width:0}
.ref-num{
  font-family:var(--fonte-titulo);font-weight:var(--peso-extra);font-variant-numeric:tabular-nums;
  background:var(--cor-fundo);border:1px solid var(--cor-borda);border-radius:6px;
  padding:0 .35em;min-width:2.4ch;text-align:center;color:var(--cor-tinta);
}
.ref-nome{font-weight:var(--peso-forte);overflow-wrap:anywhere}
.marca-saude{color:var(--a-farmacia);vertical-align:-.15em;margin-left:.25em}
/* Caixa de marcar à caneta nos impressos (embarque) */
.caixa-marcar{display:inline-block;width:5mm;height:5mm;border:1px solid var(--cor-tinta);border-radius:1mm}
body{
  margin:0;font-family:var(--fonte-texto);font-size:var(--txt-base);
  color:var(--cor-tinta);background:var(--cor-fundo);line-height:var(--linha-normal);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cor-primaria);text-decoration:none;font-weight:var(--peso-medio)}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--cor-foco);outline-offset:2px;border-radius:var(--raio-sm)}

h1,h2,h3{font-family:var(--fonte-titulo);line-height:var(--linha-apertada);font-weight:var(--peso-extra);letter-spacing:var(--tracking-titulo);color:var(--cor-tinta)}
h1{font-size:var(--txt-xl)}
h2{font-size:var(--txt-lg)}
.titulo-pagina{font-size:var(--txt-xl);margin:var(--e-2) 0 var(--e-4)}
.mudo{color:var(--cor-mudo)}
code{background:var(--cor-primaria-tenue);border:1px solid var(--cor-primaria-borda);padding:.1em .4em;border-radius:6px;font-size:.95em}

/* ============ TOPO (desktop) ============ */
.topo{
  display:flex;align-items:center;gap:var(--e-4);flex-wrap:wrap;
  background:var(--cor-cartao);border-bottom:1px solid var(--cor-borda);
  padding:var(--e-3) var(--e-4);position:sticky;top:0;z-index:20;
}
.topo-marca{display:flex;align-items:center;font-family:var(--fonte-titulo);font-size:var(--txt-md);font-weight:var(--peso-extra);letter-spacing:var(--tracking-titulo);color:var(--cor-primaria)}
.topo-nav{display:flex;gap:var(--e-1);flex-wrap:wrap;flex:1}
.topo-nav a{padding:var(--e-2) var(--e-3);border-radius:var(--raio-sm);color:var(--cor-tinta-suave);font-weight:var(--peso-medio);min-height:var(--toque);display:inline-flex;align-items:center}
.topo-nav a:hover{background:var(--cor-primaria-tenue);color:var(--cor-primaria-escura);text-decoration:none}
.topo-nav a.ativo{background:var(--cor-primaria);color:#fff}
.topo-direita{display:flex;align-items:center;gap:var(--e-3)}
.pilula-edicao{
  background:var(--cor-primaria-clara);border:1px solid var(--cor-primaria-borda);color:var(--cor-primaria-escura);
  padding:var(--e-2) var(--e-4);border-radius:var(--raio-pill);font-weight:var(--peso-forte);
  min-height:var(--toque);display:inline-flex;align-items:center;
}
.pilula-edicao.vazia{background:var(--cor-aviso-fundo);border-color:var(--cor-aviso-borda);color:var(--cor-aviso)}

.conteudo{max-width:1150px;margin:0 auto;padding:var(--e-4)}
.rodape{text-align:center;color:var(--cor-mudo);padding:var(--e-6) var(--e-4)}

/* ============ NAVEGAÇÃO MOBILE (barra inferior) ============ */
.nav-mobile{display:none}
.nav-mais-painel{display:none}

/* ============ CARTÕES / GRADES / MÉTRICAS ============ */
.cartao{
  background:var(--cor-cartao);border:1px solid var(--cor-borda);border-radius:var(--raio);
  box-shadow:var(--sombra-sm);padding:var(--e-4);margin-bottom:var(--e-4);
}
.cartao h2{margin-top:0}
.grade{display:grid;gap:var(--e-4)}
.grade-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grade-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grade-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* Colunas das equipes: 2 ou 3, conforme a edição. A largura mínima é que decide quantas
   cabem lado a lado, então a mesma regra serve para dois e para três · e empilha no celular. */
.grade-equipes{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.metrica{text-align:center;padding:var(--e-4)}
/* clamp: número grande, mas que encolhe antes de estourar a caixa (ex.: 9.999) */
.metrica .valor{
  font-family:var(--fonte-titulo);font-size:clamp(1.75rem, 6vw, var(--txt-2xl));
  font-weight:var(--peso-extra);line-height:1;letter-spacing:-.02em;
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
}
.metrica .rotulo{color:var(--cor-mudo);margin-top:var(--e-2);font-weight:var(--peso-medio)}

/* ============ PAINEL GUIADO · "O que fazer agora" ============ */
.guia{
  background:linear-gradient(150deg,var(--cor-primaria-tenue),var(--cor-cartao) 65%);
  border:1px solid var(--cor-primaria-borda);border-radius:var(--raio-lg);
  padding:var(--e-5);margin-bottom:var(--e-5);box-shadow:var(--sombra);
}
.guia h2{margin:0 0 var(--e-2)}
.guia-sub{color:var(--cor-mudo);margin:0 0 var(--e-4)}
.guia-passos{display:grid;gap:var(--e-3)}
.passo{
  display:flex;align-items:center;gap:var(--e-4);background:var(--cor-cartao);
  border:1px solid var(--cor-borda);border-radius:var(--raio);padding:var(--e-4);
}
.passo-icone{font-size:1.75rem;line-height:1;flex:none}
.passo-texto{flex:1;min-width:0}
.passo-titulo{font-family:var(--fonte-titulo);font-weight:var(--peso-forte);font-size:var(--txt-md)}
.passo-desc{color:var(--cor-mudo)}
.passo .botao{flex:none}
.passo.urgente{border-color:var(--cor-primaria);border-left:5px solid var(--cor-primaria);background:var(--cor-primaria-tenue)}
.guia-pronto{display:flex;align-items:center;gap:var(--e-3);color:var(--cor-ok);font-weight:var(--peso-forte)}

/* ============ TABELAS ============ */
.tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--raio)}
table.dados{width:100%;border-collapse:collapse;background:var(--cor-cartao);border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra-sm);border:1px solid var(--cor-borda)}
table.dados th{background:var(--cor-fundo);text-align:left;color:var(--cor-mudo);font-weight:var(--peso-forte);white-space:nowrap}
table.dados th,table.dados td{padding:var(--e-3) var(--e-4);border-bottom:1px solid var(--cor-borda);vertical-align:middle}
table.dados tr:last-child td{border-bottom:0}
table.dados tbody tr:hover td{background:var(--cor-primaria-tenue)}

/* ============ FORMULÁRIOS ============ */
label{display:block;margin-bottom:var(--e-4);font-weight:var(--peso-forte)}
input,select,textarea{
  display:block;width:100%;margin-top:var(--e-2);padding:var(--e-2) var(--e-3);
  min-height:var(--toque);border:1px solid var(--cor-borda-forte);border-radius:var(--raio-sm);
  font:inherit;font-size:var(--txt-base);background:#fff;color:var(--cor-tinta);
}
textarea{min-height:auto}
input:focus,select:focus,textarea:focus{outline:3px solid var(--cor-foco);outline-offset:1px;border-color:var(--cor-primaria)}
input::placeholder,textarea::placeholder{color:#9ca3af}
.linha-form{display:flex;gap:var(--e-4);flex-wrap:wrap}
.linha-form>label{flex:1;min-width:170px}
/* Seletor de cor: o padding do input genérico o deixa minúsculo no Chrome/Windows */
input[type=color]{height:var(--toque);padding:3px;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:1px solid var(--cor-borda-forte);border-radius:6px}
input[type=color]::-moz-color-swatch{border:1px solid var(--cor-borda-forte);border-radius:6px}
input[type=file]{padding:var(--e-2);cursor:pointer}
input[type=checkbox]{width:22px;height:22px;min-height:auto;accent-color:var(--cor-primaria);cursor:pointer}

/* ---- Lista de equipes da edição (as 2 do público + a 3ª, opcional) ---- */
.bloco-equipes{
  border:1px solid var(--cor-borda);border-radius:var(--raio);
  padding:var(--e-4);margin:0 0 var(--e-4);
}
.bloco-equipes legend{padding:0 var(--e-2);font-family:var(--fonte-titulo);font-weight:var(--peso-forte)}
.equipe-linha{align-items:flex-start}
/* A cor é um campo estreito: não precisa da mesma largura do nome. */
.equipe-linha>label:has(input[type=color]){flex:0 0 auto;min-width:120px}
/* Alinha o botão de tirar com os campos, e não com os rótulos acima deles. */
.equipe-tirar{display:flex;align-items:center;margin-bottom:var(--e-4);padding-top:1.9rem}
@media screen and (max-width:720px){ .equipe-tirar{padding-top:0} }

/* ============ BOTÕES ============ */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  min-height:var(--toque);padding:var(--e-2) var(--e-5);
  background:var(--cor-primaria);color:#fff;border:1px solid var(--cor-primaria);
  border-radius:10px;font:inherit;font-size:var(--txt-base);font-weight:var(--peso-forte);
  cursor:pointer;text-align:center;box-shadow:var(--sombra-sm);transition:background .15s,transform .05s;
}
.botao:hover{background:var(--cor-primaria-escura);border-color:var(--cor-primaria-escura);color:#fff;text-decoration:none}
.botao:active{transform:translateY(1px)}
.botao.secundario{background:var(--cor-cartao);color:var(--cor-tinta);border-color:var(--cor-borda-forte);box-shadow:none}
.botao.secundario:hover{background:var(--cor-primaria-tenue);border-color:var(--cor-primaria);color:var(--cor-primaria-escura)}
.botao.perigo{background:var(--cor-cartao);color:var(--cor-erro);border-color:var(--cor-erro-borda);box-shadow:none}
.botao.perigo:hover{background:var(--cor-erro-fundo);border-color:var(--cor-erro);color:var(--cor-erro)}
.botao.mini{min-height:var(--toque);min-width:var(--toque);padding:var(--e-1) var(--e-3)}
.acoes{display:flex;gap:var(--e-3);flex-wrap:wrap;align-items:center;margin:var(--e-4) 0}

/* ============ FLASH E ETIQUETAS ============ */
.flash{
  display:flex;align-items:flex-start;gap:var(--e-2);
  padding:var(--e-3) var(--e-4);border-radius:var(--raio-sm);margin-bottom:var(--e-4);font-weight:var(--peso-medio);
}
.flash-ok{background:var(--cor-ok-fundo);color:var(--cor-ok);border:1px solid var(--cor-ok-borda)}
.flash-erro{background:var(--cor-erro-fundo);color:var(--cor-erro);border:1px solid var(--cor-erro-borda)}
.flash-aviso{background:var(--cor-aviso-fundo);color:var(--cor-aviso);border:1px solid var(--cor-aviso-borda)}
.etiqueta{display:inline-flex;align-items:center;gap:.3em;padding:.15rem .7rem;border-radius:var(--raio-pill);font-weight:var(--peso-forte);white-space:nowrap}
.et-ok{background:var(--cor-ok-fundo);color:var(--cor-ok);border:1px solid var(--cor-ok-borda)}
.et-pendente{background:var(--cor-aviso-fundo);color:var(--cor-aviso);border:1px solid var(--cor-aviso-borda)}
.et-neutra{background:var(--cor-fundo);color:var(--cor-mudo);border:1px solid var(--cor-borda)}
.ponto-equipe{display:inline-block;width:.85em;height:.85em;border-radius:50%;vertical-align:-1px;margin-right:.35em;border:1px solid rgba(0,0,0,.15);flex:none}
.num-equipe{display:inline-block;min-width:2.2em;font-weight:var(--peso-extra);font-variant-numeric:tabular-nums;color:var(--cor-primaria-escura)}

/* ============ QUADRO: DUPLA FIXA, LÍDERES E AJUSTE MANUAL ============ */
.et-fixa{
  display:inline-flex;align-items:center;padding:.05rem .5rem;border-radius:var(--raio-pill);
  background:var(--cor-primaria-clara);border:1px solid var(--cor-primaria-borda);
  color:var(--cor-primaria-escura);font-weight:var(--peso-forte);font-size:.8125rem;white-space:nowrap;
}
/* Bloco de líderes no cabeçalho das folhas impressas */
.lideres-impresso{
  border:1px solid var(--cor-borda-forte);border-radius:var(--raio-sm);
  padding:var(--e-2) var(--e-3);margin-bottom:var(--e-3);
  display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4);align-items:center;
}
/* O bloco de líderes quebra linha DENTRO de cada dormitório: com `nowrap` (que servia
   quando era "Azul: Ana e Bia"), cinco líderes num dormitório transbordavam a folha A3,
   medido. O que continua sem quebrar é o NOME do dormitório, para "Chalé 02" não virar
   "Chalé" numa linha e "02" na outra. */
.lid-eq{display:inline-flex;align-items:center;gap:.35em;white-space:normal}
.lid-eq .lid-nome{white-space:nowrap}
/* Menu de ajuste na ficha do responsável: sem arrastar, com alvo grande no celular */
.ficha-menu{display:inline-block;margin-left:.2em}
.ficha-menu summary{
  list-style:none;cursor:pointer;color:var(--cor-mudo);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;min-height:26px;border-radius:var(--raio-sm);
}
.ficha-menu summary::-webkit-details-marker{display:none}
.ficha-menu summary:hover{background:var(--cor-primaria-tenue);color:var(--cor-primaria-escura)}
.ficha-pop{
  position:absolute;z-index:15;margin-top:var(--e-1);min-width:250px;
  background:var(--cor-cartao);border:1px solid var(--cor-borda-forte);border-radius:var(--raio);
  box-shadow:var(--sombra-md);padding:var(--e-3);
}
.ficha-pop p{margin:0 0 var(--e-2)}
.ficha-pop select{margin-top:var(--e-1)}
@media print{ .lideres-impresso{border-color:#999;page-break-inside:avoid} }
@media screen and (max-width:720px){
  .ficha-menu summary{min-width:var(--toque);min-height:var(--toque)}
  .ficha-pop{position:fixed;left:var(--e-3);right:var(--e-3);bottom:calc(var(--nav-mobile-h) + var(--e-3));min-width:0}
}
/* Passar alguém de equipe quando existem três: o menu abre NA LINHA (a tabela tem
   overflow escondido, então um balão flutuante seria cortado) e os destinos vêm
   escritos, porque o nome da equipe é justamente o que a pessoa precisa ler. */
.menu-mover>summary{
  list-style:none;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.35em;
  min-height:var(--toque);padding:var(--e-1) var(--e-3);
  border:1px solid var(--cor-borda-forte);border-radius:var(--raio-pill);
  background:var(--cor-cartao);color:var(--cor-tinta-suave);font-size:.9375rem;font-weight:var(--peso-medio);
}
.menu-mover>summary::-webkit-details-marker{display:none}
.menu-mover>summary:hover{border-color:var(--cor-primaria);background:var(--cor-primaria-tenue);color:var(--cor-primaria-escura)}
.menu-mover[open]>summary{border-color:var(--cor-primaria);color:var(--cor-primaria-escura)}
.destinos-equipe{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:var(--e-2) 0 0}

/* ============ DORMITÓRIOS DOS PARTICIPANTES (equipes.php) ============
   Uma coluna por dormitório, com as fichas dentro. No desktop dá para arrastar a
   ficha de uma coluna para a outra; no celular a mesma ficha traz o menu "Mover
   para…", que é um formulário normal · o arrastar é enfeite por cima disso. */
.bloco-dorm>summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:var(--e-3);flex-wrap:wrap;
  min-height:var(--toque);
}
.bloco-dorm>summary::-webkit-details-marker{display:none}
.bloco-dorm>summary::after{content:"mostrar";color:var(--cor-primaria);font-weight:var(--peso-forte);font-size:.9375rem}
.bloco-dorm[open]>summary::after{content:"esconder"}
.dorm-resumo{font-size:.9375rem}
/* Ar entre um grupo de equipe e o seguinte · sem isso as colunas viram uma parede só. */
.dorm-equipe{margin-top:var(--e-6);padding-top:var(--e-4);border-top:1px solid var(--cor-borda)}
.dorm-equipe:first-of-type{margin-top:var(--e-4);padding-top:0;border-top:0}
.dorm-cabeca{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);flex-wrap:wrap}
.dorm-cabeca h3{margin:0}
.dorm-colunas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--e-3);margin:var(--e-3) 0;
}
.dorm-col{
  border:1px solid var(--cor-borda);border-radius:var(--raio);background:var(--cor-cartao);
  display:flex;flex-direction:column;min-height:120px;
}
/* O cabeçalho é TÍTULO DE GRUPO, não mais um item da lista: o nome do dormitório domina,
   e a faixa de números com a contagem ficam de metadado ao lado. Mesma hierarquia da
   tabela de acomodação da equipe de trabalho (nome forte, contagem apagada), para as duas
   telas de dormida se parecerem. */
.dorm-col-topo{
  border-top:4px solid var(--cor-borda-forte);border-radius:var(--raio) var(--raio) 0 0;
  padding:var(--e-3);display:flex;flex-direction:column;gap:.2rem;
  border-bottom:1px solid var(--cor-borda-forte);
  background:var(--cor-fundo);
}
.dorm-nome{
  font-family:var(--fonte-titulo);font-size:1.0625rem;font-weight:var(--peso-extra);
  letter-spacing:var(--tracking-titulo);line-height:1.2;
}
.dorm-col-topo .dorm-meta{font-size:.8125rem}
/* A ficha recua um tico do título: a coluna vira "grupo com conteúdo dentro". */
.dorm-fichas{padding:var(--e-2) var(--e-2) var(--e-3)}
.dorm-col-sem .dorm-col-topo{border-top-color:var(--cor-acento)}
.dorm-lotado .dorm-col-topo{background:var(--cor-aviso-fundo)}
.dorm-fichas{padding:var(--e-2);display:flex;flex-direction:column;gap:var(--e-2);flex:1}
.dorm-vazio{margin:var(--e-2);font-size:.9375rem}
.dorm-ficha{
  border:1px solid var(--cor-borda);border-radius:var(--raio-sm);background:var(--cor-fundo);
  padding:var(--e-2);cursor:grab;
}
.dorm-ficha:active{cursor:grabbing}
.dorm-ficha.arrastando{opacity:.45}
/* O alvo do arrasto precisa ser inconfundível: quem arrasta está de olho na coluna. */
.dorm-col.alvo{border-color:var(--cor-primaria);box-shadow:0 0 0 3px var(--cor-primaria-borda)}
.dorm-col.alvo .dorm-fichas{background:var(--cor-primaria-tenue)}
.dorm-aviso{margin:var(--e-3) 0}
/* A porta da gestão dos dormitórios era um texto quase invisível. Vira botão secundário
   discreto: continua sem competir com as colunas, mas dá para achar. */
.dorm-gestao>summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4em;
  min-height:var(--toque);padding:var(--e-2) var(--e-4);
  border:1px solid var(--cor-borda-forte);border-radius:var(--raio-sm);
  background:var(--cor-cartao);color:var(--cor-primaria);
  font-weight:var(--peso-forte);font-size:.9375rem;
}
.dorm-gestao>summary::-webkit-details-marker{display:none}
.dorm-gestao>summary:hover{border-color:var(--cor-primaria);background:var(--cor-primaria-tenue)}
.dorm-gestao[open]>summary{border-color:var(--cor-primaria);background:var(--cor-primaria-tenue)}
.dorm-gestao table{margin-top:var(--e-2)}
@media screen and (max-width:720px){
  /* No celular a ficha é alvo de toque, não de arrasto: o menu "Mover para…" é o caminho. */
  .dorm-ficha{cursor:default}
  .dorm-colunas{grid-template-columns:1fr}
}

/* ============ IMPRESSÃO SELETIVA (escolher quem sai no material) ============ */
.sel-barra{border-left:4px solid var(--cor-primaria)}
.sel-lista summary{cursor:pointer;font-weight:var(--peso-forte);min-height:var(--toque);display:flex;align-items:center;gap:.3em;list-style:none}
.sel-lista summary::-webkit-details-marker{display:none}
.sel-lista summary .ic{transition:transform .15s}
.sel-lista[open] summary .ic{transform:rotate(90deg)}
.sel-busca{max-width:320px}
.sel-gente{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--e-1);
  max-height:44vh;overflow-y:auto;padding:var(--e-2);
  border:1px solid var(--cor-borda);border-radius:var(--raio-sm);background:var(--cor-fundo);
}
.sel-item{display:flex;align-items:center;gap:var(--e-2);margin:0;padding:var(--e-1) var(--e-2);
  border-radius:var(--raio-sm);font-weight:var(--peso-normal);cursor:pointer;min-height:var(--toque)}
.sel-item:hover{background:var(--cor-primaria-tenue)}
.sel-item input{width:20px;height:20px;min-height:auto;margin:0;flex:none}
/* Linha que pede atenção na conferência de nomes */
tr.linha-atencao td{background:var(--cor-aviso-fundo)}

/* ============ AÇÕES DE LINHA (padrão único: acoes_linha) ============
   Ícone fantasma: sem borda em repouso, cor só no hover. A coluna de ações não
   deve competir com o conteúdo da linha. */
/* Só para leitor de tela. `clip-path` é a forma atual; o `clip` fica para navegador antigo.
   ATENÇÃO: é `position:absolute`, então dentro de uma caixa larga ele se ancora onde a caixa
   termina · quem cria caixa rolável precisa ser `position:relative` (ver a regra das tabelas
   no bloco do celular), senão este elemento estica a página. */
.oculto-visual{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.acoes-linha{display:flex;gap:var(--e-1);align-items:center;justify-content:flex-end}
.acoes-linha .acao-form{margin:0;display:inline-flex}
.acao-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:0;border-radius:var(--raio-sm);
  background:none;color:var(--cor-mudo);cursor:pointer;box-shadow:none;
  transition:background .12s,color .12s;
}
.acao-ic:hover{background:var(--cor-primaria-tenue);color:var(--cor-primaria-escura);text-decoration:none}
.acao-ic.perigo:hover{background:var(--cor-erro-fundo);color:var(--cor-erro)}
.acao-ic:focus-visible{outline:3px solid var(--cor-foco);outline-offset:1px}
table.dados td:has(.acoes-linha){width:1%;white-space:nowrap}

/* ============ PROGRAMAÇÃO DO EVENTO ============ */
/* Chip de tipo: ícone + rótulo UMA vez. Fundo suave da cor, texto escuro da mesma família. */
.et-tipo{display:inline-flex;align-items:center;gap:.35em;padding:.15rem .65rem;border-radius:var(--raio-pill);
  font-weight:var(--peso-forte);font-size:.9375rem;white-space:nowrap;border:1px solid}
.et-tipo .ic{opacity:.85}
.et-palestra {color:var(--tipo-palestra); background:var(--tipo-palestra-fundo); border-color:var(--tipo-palestra-borda)}
.et-refeicao {color:var(--tipo-refeicao); background:var(--tipo-refeicao-fundo); border-color:var(--tipo-refeicao-borda)}
.et-marco    {color:var(--tipo-marco);    background:var(--tipo-marco-fundo);    border-color:var(--tipo-marco-borda)}
.et-atividade{color:var(--tipo-atividade);background:var(--tipo-atividade-fundo);border-color:var(--tipo-atividade-borda)}

.dia-bloco{margin-bottom:var(--e-5)}
.dia-titulo{display:flex;align-items:baseline;gap:var(--e-3);margin:0 0 var(--e-3)}
.dia-titulo .contagem{color:var(--cor-mudo);font-family:var(--fonte-texto);font-weight:var(--peso-medio);font-size:var(--txt-base)}
.prog-hora{font-variant-numeric:tabular-nums;font-weight:var(--peso-forte);white-space:nowrap}
.prog-titulo{font-weight:var(--peso-forte)}
/* faixa lateral colorida por tipo, para bater o olho e achar a refeição */
tr.linha-palestra  td:first-child{box-shadow:inset 4px 0 0 var(--tipo-palestra)}
tr.linha-refeicao  td:first-child{box-shadow:inset 4px 0 0 var(--tipo-refeicao)}
tr.linha-marco     td:first-child{box-shadow:inset 4px 0 0 var(--tipo-marco)}
tr.linha-atividade td:first-child{box-shadow:inset 4px 0 0 var(--tipo-atividade)}
/* roteiro: abre e fecha sem sair da página (<details>) */
.roteiro{margin-top:var(--e-2)}
.roteiro summary{cursor:pointer;color:var(--cor-primaria);font-weight:var(--peso-medio);list-style:none;min-height:var(--toque);display:inline-flex;align-items:center}
.roteiro summary::-webkit-details-marker{display:none}
/* Chevron do roteiro: o próprio ícone gira ao abrir (sem dingbat de texto). */
.roteiro summary .ic{transition:transform .15s}
.roteiro[open] summary .ic{transform:rotate(90deg)}
.roteiro-texto{white-space:pre-wrap;background:var(--cor-fundo);border:1px solid var(--cor-borda);border-radius:var(--raio-sm);padding:var(--e-3);margin-top:var(--e-2)}

/* =========================================================
   QUADRO DE TAREFAS · a espinha da programação com as tarefas penduradas
   Cartão, faixa e ficha leem a cor de `--area-cor`, que a TELA emite inline com o
   valor vindo do cadastro de áreas (a área virou dado da edição na Fase 21).
   Havia aqui uma classe por área (`.a-cozinha` e companhia) que só definia essa
   variável · com a cor no banco elas viraram CSS morto e saíram. Os TOKENS `--a-*`
   continuam logo acima: são a cor de partida das áreas semeadas e a reserva de
   quem não tem cadastro (`--a-neutra`, `--a-farmacia`).
   ========================================================= */

.quadro-linha{display:grid;grid-template-columns:minmax(150px,32%) 1fr;gap:var(--e-4);align-items:start;
  padding:var(--e-3) 0;border-top:1px solid var(--cor-borda)}
.quadro-linha:first-child{border-top:0}
.espinha{display:flex;flex-direction:column;gap:2px;padding:var(--e-2) var(--e-3);border-radius:var(--raio-sm);border-left:4px solid var(--cor-borda-forte)}
.espinha-hora{font-family:var(--fonte-titulo);font-weight:var(--peso-extra);font-variant-numeric:tabular-nums;line-height:1.1}
.espinha-titulo{font-weight:var(--peso-forte);line-height:1.2}
/* Palestrante sob o título da palestra, na espinha */
.espinha-palestrante{color:var(--cor-mudo);font-size:.9375rem;line-height:1.2;margin-top:.1em}
.espinha.e-refeicao{background:var(--tipo-refeicao-fundo);border-left-color:var(--tipo-refeicao)}
.espinha.e-refeicao .espinha-hora,.espinha.e-refeicao .espinha-titulo{color:var(--tipo-refeicao)}
.espinha.e-palestra{border-left-color:var(--tipo-palestra)}
.espinha.e-marco{border-left-color:var(--tipo-marco)}
.espinha.e-marco .espinha-titulo{color:var(--cor-mudo)}
.espinha.e-atividade{border-left-color:var(--tipo-atividade)}
.espinha.e-solta{border-left-style:dashed}

.tarefas-col{display:flex;flex-direction:column;gap:var(--e-2)}
.tarefa-cartao{background:var(--cor-cartao);border:1px solid var(--cor-borda);border-left:5px solid var(--area-cor,var(--a-neutra));
  border-radius:var(--raio-sm);padding:var(--e-3);box-shadow:var(--sombra-sm)}
.tarefa-topo{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;margin-bottom:var(--e-1)}
.tarefa-titulo{font-weight:var(--peso-forte)}
.tarefa-desc{color:var(--cor-mudo)}
.et-pos{font-size:.8125rem;font-weight:var(--peso-forte);text-transform:uppercase;letter-spacing:.05em;color:var(--cor-mudo)}
.chip-area{display:inline-block;border:1px solid var(--area-cor,var(--a-neutra));color:var(--area-cor,var(--a-neutra));
  background:none;border-radius:6px;padding:0 .5rem;font-weight:var(--peso-forte);font-size:.875rem}
/* Fichas de responsáveis: a pergunta de quem olha o quadro é "eu estou nisso?" */
.fichas{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-2)}
.ficha{display:inline-flex;align-items:center;gap:.3em;background:var(--cor-fundo);border:1px solid var(--cor-borda-forte);
  border-radius:var(--raio-pill);padding:.15rem .7rem;font-weight:var(--peso-forte)}
.ficha-vazia{color:var(--cor-aviso);background:var(--cor-aviso-fundo);border-color:var(--cor-aviso-borda);font-weight:var(--peso-medio)}
/* marca de distribuido automaticamente (discreto: a coordenacao pode trocar a vontade) */
.marca-auto{color:var(--cor-primaria);opacity:.75;cursor:help;vertical-align:-.15em}

.bloco-inteiro{background:var(--cor-primaria-tenue);border:1px dashed var(--cor-primaria-borda);border-radius:var(--raio);padding:var(--e-3);margin-top:var(--e-3)}
.bloco-inteiro h3{margin:0 0 var(--e-2);font-size:var(--txt-base)}

/* Farmácia: gerada em tempo real dos participantes, nunca gravada.
   Hierarquia: o HORÁRIO é o cabeçalho do grupo; as pessoas ficam indentadas sob ele.
   Sem isso, hora e número do participante competem e ninguém acha nada. */
.farmacia{border:1px solid var(--area-cor,var(--a-farmacia));border-radius:var(--raio);padding:var(--e-3);margin-top:var(--e-3)}
.farmacia h3{margin:0 0 var(--e-3);color:var(--area-cor,var(--a-farmacia));font-size:var(--txt-base);display:flex;align-items:center;gap:.4em}
.farm-grupo{margin-top:var(--e-4)}
.farm-grupo:first-of-type{margin-top:0}
.farm-hora{
  display:flex;align-items:center;gap:.45em;
  font-family:var(--fonte-titulo);font-weight:var(--peso-extra);font-size:var(--txt-md);
  color:var(--a-farmacia);font-variant-numeric:tabular-nums;
  padding-bottom:var(--e-1);border-bottom:2px solid var(--a-farmacia-fundo);
}
.farm-gente{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4);padding:var(--e-2) 0 0 var(--e-4)}
.farm-confirmar .farm-hora{color:var(--cor-aviso);border-bottom-color:var(--cor-aviso-borda)}
.farm-duvida{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.farm-texto{color:var(--cor-aviso);font-style:italic}

/* Fichas clicáveis do formulário (checkbox estilizado · nada de multi-select nativo) */
.fichas-escolha{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-2)}
.ficha-op{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--cor-borda-forte);border-radius:var(--raio-pill);
  padding:var(--e-2) var(--e-3);cursor:pointer;min-height:var(--toque);font-weight:var(--peso-medio);background:var(--cor-cartao);margin:0}
.ficha-op input{width:20px;height:20px;min-height:auto;margin:0;accent-color:var(--cor-primaria)}
.ficha-op:hover{border-color:var(--cor-primaria);background:var(--cor-primaria-tenue)}
.ficha-op:has(input:checked){border-color:var(--cor-primaria);background:var(--cor-primaria-clara);color:var(--cor-primaria-escura)}
.ficha-op .fn{font-weight:var(--peso-forte)}
.ficha-op .fm{color:var(--cor-mudo);font-weight:var(--peso-normal);font-size:.875rem}

/* Legenda de áreas (tela e impressão) */
.legenda-areas{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-3)}
.legenda-item{display:inline-flex;align-items:center;gap:.35em;font-size:.9375rem}
.legenda-cor{width:.9em;height:.9em;border-radius:3px;background:var(--area-cor,var(--a-neutra));flex:none}

/* =========================================================
   ACOMODAÇÃO DA EQUIPE · onde cada voluntário dorme
   ========================================================= */
.local-cartao{border-top:6px solid var(--local-cor,var(--cor-borda-forte))}
.local-topo{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;margin-bottom:var(--e-3)}
.local-topo h2{margin:0}
.ocupacao{font-variant-numeric:tabular-nums;font-weight:var(--peso-forte)}
.ocupacao.livre{color:var(--cor-mudo)}
.ocupacao.lotado{color:var(--cor-aviso)}
.ocupacao.excedido{color:var(--cor-erro)}
/* Ficha de quem já tem local: nome + × para tirar */
.ficha-aloc{display:inline-flex;align-items:center;gap:var(--e-2);background:var(--cor-fundo);
  border:1px solid var(--cor-borda-forte);border-radius:var(--raio-pill);padding:.15rem .3rem .15rem .8rem;font-weight:var(--peso-forte)}
.ficha-aloc .fx{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;
  border:0;background:none;color:var(--cor-erro);border-radius:50%;cursor:pointer;font-size:1.05rem;line-height:1;font-family:inherit}
.ficha-aloc .fx:hover{background:var(--cor-erro-fundo)}
.ficha-aloc .fm{color:var(--cor-mudo);font-weight:var(--peso-normal);font-size:.875rem}
/* Quem ainda não tem local: o select fica na própria ficha (sem arrastar nada) */
.ficha-sem{display:inline-flex;align-items:center;gap:var(--e-2);background:var(--cor-aviso-fundo);
  border:1px solid var(--cor-aviso-borda);border-radius:var(--raio);padding:var(--e-2) var(--e-3)}
.ficha-sem .fn{font-weight:var(--peso-forte)}
.ficha-sem select{width:auto;min-width:150px;margin:0;min-height:var(--toque)}
/* Paleta de cores sugeridas para os locais */
.paleta{display:flex;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-2)}
.paleta button{width:var(--toque);height:var(--toque);border:2px solid var(--cor-borda-forte);border-radius:var(--raio-sm);cursor:pointer;padding:0}
.paleta button:hover{border-color:var(--cor-tinta);transform:scale(1.05)}

/* Tabela de acomodação impressa · espelho da planilha que a coordenação usa hoje */
/* Tabela de acomodação: agrupada por local, SEM célula pintada.
   A cor do local aparece só no quadradinho da linha-cabeçalho. */
table.acomodacao{width:100%;border-collapse:collapse}
table.acomodacao th,table.acomodacao td{padding:var(--e-2) var(--e-3);border-bottom:1px solid var(--cor-borda)}
table.acomodacao th{
  border-bottom:2px solid var(--cor-tinta);color:var(--cor-mudo);text-align:left;
  letter-spacing:.06em;font-variant-caps:all-small-caps;font-weight:var(--peso-forte);
}
table.acomodacao td.ordem,table.acomodacao th.ordem{text-align:right;font-variant-numeric:tabular-nums;width:1%;color:var(--cor-mudo)}
/* Zebra sutil, só nas linhas de pessoa */
table.acomodacao tbody tr:not(.grupo):nth-child(even) td{background:#f9fafb}
/* Linha-cabeçalho de cada local */
table.acomodacao tr.grupo td{
  padding-top:var(--e-4);border-bottom:1px solid var(--cor-borda-forte);
  background:none;
}
table.acomodacao tr.grupo:first-child td{padding-top:var(--e-2)}
.quadro-cor{
  display:inline-block;width:10px;height:10px;border-radius:3px;
  border:1px solid rgba(0,0,0,.18);vertical-align:0;margin-right:.5em;
}
.grupo-nome{font-weight:var(--peso-forte)}
.grupo-cont{color:var(--cor-mudo);font-weight:var(--peso-normal);margin-left:.6em}
tr.grupo-alerta .grupo-nome{color:var(--cor-aviso)}
tr.grupo-alerta .ic{color:var(--cor-aviso);vertical-align:-.15em;margin-right:.3em}
@media print{
  /* No papel o quadradinho vira 4mm e a zebra sai (economiza tinta e fica mais limpo) */
  .quadro-cor{width:4mm;height:4mm;border-radius:.8mm}
  table.acomodacao tbody tr:not(.grupo):nth-child(even) td{background:none}
  table.acomodacao tr.grupo td{padding-top:4mm}
}
.cabecalho-acomodacao{text-align:center;margin-bottom:var(--e-4)}
.cabecalho-acomodacao h2{margin:0;font-size:var(--txt-xl);letter-spacing:.02em}
.cabecalho-acomodacao .faixa{margin-top:var(--e-2);background:var(--cor-tinta);color:#fff;padding:var(--e-2);
  border-radius:var(--raio-sm);font-family:var(--fonte-titulo);font-weight:var(--peso-forte);letter-spacing:.06em}

/* ============ ESTADO VAZIO ============ */
.vazio{
  text-align:center;padding:var(--e-7) var(--e-4);background:var(--cor-cartao);
  border:1px dashed var(--cor-borda-forte);border-radius:var(--raio-lg);
}
.vazio-icone{font-size:2.75rem;line-height:1;margin-bottom:var(--e-3)}
.vazio h2{margin:0 0 var(--e-2)}
.vazio p{color:var(--cor-mudo);margin:0 auto var(--e-4);max-width:46ch}

/* ============ LOGIN ============ */
.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(160deg,var(--cor-primaria-clara),var(--cor-fundo) 60%);padding:var(--e-4)}
.cartao-login{background:var(--cor-cartao);border:1px solid var(--cor-borda);border-radius:var(--raio-lg);box-shadow:var(--sombra-md);padding:var(--e-6);width:100%;max-width:420px}
.cartao-login .marca{text-align:center;margin-bottom:var(--e-5)}
.cartao-login h1{margin:var(--e-2) 0 0}
.cartao-login .botao{width:100%}

/* ============ MINIATURAS DOS MATERIAIS (menu) ============ */
.mini-mat{
  height:96px;border:1px solid var(--cor-borda);border-radius:var(--raio-sm);
  background:var(--cor-fundo);margin-bottom:var(--e-3);padding:8px;
  display:flex;gap:6px;overflow:hidden;
}
.mini-cartao{background:#fff;border:1px solid var(--cor-borda);border-radius:4px;flex:1;display:flex;flex-direction:column;overflow:hidden}
.mini-faixa{height:12px;flex:none}
.mini-corpo{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:2px}
.mini-num{font-family:var(--fonte-titulo);font-weight:var(--peso-extra);color:var(--cor-primaria);line-height:1}
.mini-linha{height:4px;background:var(--cor-borda);border-radius:2px;flex:1;max-width:60%}
.mini-linhas{display:flex;flex-direction:column;gap:3px;flex:1;align-items:center}
/* variações por tipo */
.mini-mat.m-crachas .mini-num{font-size:13px}
.mini-mat.m-camas{flex-direction:column}
.mini-mat.m-camas .mini-num{font-size:30px}
.mini-mat.m-cadeiras .mini-num{font-size:18px}
.mini-mat.m-cadeiras .mini-corpo{flex-direction:column;gap:2px}
/* Miniatura das etiquetas 60x50: mostra a grade 3 por linha, como sai no papel. */
.mini-mat.m-etq{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:3px}
.mini-mat.m-etq .mini-num{font-size:11px}
.mini-mat.m-etq .mini-linhas{display:none}
.mini-mat.m-filipetas{flex-direction:column;gap:4px}
.mini-mat.m-filipetas .mini-cartao{flex-direction:row;align-items:center;gap:4px;padding:0 4px}
.mini-mat.m-filipetas .mini-faixa{height:auto;width:5px;align-self:stretch}
.mini-mat.m-filipetas .mini-num{font-size:14px}

/* =========================================================
   MENSAGENS DE WHATSAPP · composer, prévia e tela de envio
   ========================================================= */
/* Utilitários que este módulo estreou (servem a qualquer tela daqui em diante) */
.peq{font-size:.875rem}
.link-forte{font-weight:var(--peso-forte);color:var(--cor-tinta);text-decoration:none}
.link-forte:hover{color:var(--cor-primaria);text-decoration:underline}
.rotulo-solto{display:block;margin-bottom:var(--e-2);font-weight:var(--peso-forte)}
.ajuda-campo{display:block;margin-top:var(--e-1);font-weight:var(--peso-normal);font-size:.875rem;color:var(--cor-mudo)}
.cartao-alerta{border-left:4px solid var(--cor-aviso)}
/* Dica de "ligar os fundos" nas telas de material colorido (some na impressão) */
.dica-fundos{
  display:flex;align-items:flex-start;gap:var(--e-2);margin:0 0 var(--e-4);
  color:var(--cor-mudo);font-size:.9375rem;
}
.dica-fundos .ic{color:var(--cor-primaria);flex:none;margin-top:.15em}
.dica-fundos strong{color:var(--cor-tinta)}
.et-participante{background:var(--cor-primaria-tenue);color:var(--cor-primaria-escura);border:1px solid var(--cor-primaria-borda)}
.et-familiar{background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe}

/* ---- Escolha do destinatário: cartões clicáveis, não radio solto ---- */
.escolha-destino{border:0;padding:0;margin:0 0 var(--e-4);display:flex;gap:var(--e-3);flex-wrap:wrap}
.escolha-destino legend{font-weight:var(--peso-forte);margin-bottom:var(--e-2);padding:0}
.opcao-destino{
  flex:1;min-width:240px;margin:0;display:flex;gap:var(--e-3);align-items:flex-start;
  padding:var(--e-3) var(--e-4);border:1px solid var(--cor-borda-forte);border-radius:var(--raio);
  background:var(--cor-cartao);cursor:pointer;font-weight:var(--peso-normal);
}
.opcao-destino:hover{border-color:var(--cor-primaria-borda);background:var(--cor-primaria-tenue)}
.opcao-destino input{width:22px;height:22px;min-height:auto;margin:2px 0 0;flex:none;accent-color:var(--cor-primaria)}
.opcao-destino:has(input:checked){border-color:var(--cor-primaria);background:var(--cor-primaria-tenue);box-shadow:inset 0 0 0 1px var(--cor-primaria)}
.opcao-corpo{display:block}
.opcao-titulo{display:flex;align-items:center;gap:var(--e-2);font-weight:var(--peso-forte);margin-bottom:2px}

/* ---- Barra de ferramentas do composer ---- */
.barra-composer{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);
  padding:var(--e-2);border:1px solid var(--cor-borda-forte);border-bottom:0;
  border-radius:var(--raio-sm) var(--raio-sm) 0 0;background:var(--cor-fundo);
}
/* A fileira das ferramentas é um elemento próprio porque no celular ela vira a faixa
   que rola de lado (.barra-rolavel) · no computador se comporta como se não existisse. */
.ferramentas-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}
.grupo-ferramentas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-1)}
.grupo-ferramentas+.grupo-ferramentas{border-left:1px solid var(--cor-borda);padding-left:var(--e-2)}
.ferramenta{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--toque);height:var(--toque);border:0;border-radius:var(--raio-sm);
  background:none;color:var(--cor-tinta-suave);cursor:pointer;list-style:none;
}
.ferramenta:hover{background:var(--cor-primaria-clara);color:var(--cor-primaria-escura)}
.ferramenta::-webkit-details-marker{display:none}
.rotulo-emoji{display:none}     /* a palavra só aparece no celular (ver o bloco do celular) */
.chip-variavel{
  display:inline-flex;align-items:center;gap:.3em;min-height:var(--toque);
  padding:var(--e-1) var(--e-3);border-radius:var(--raio-pill);cursor:pointer;
  border:1px solid var(--cor-primaria-borda);background:var(--cor-primaria-tenue);
  color:var(--cor-primaria-escura);font:inherit;font-size:.875rem;font-weight:var(--peso-forte);
}
.chip-variavel:hover{background:var(--cor-primaria-clara)}
.chip-variavel[hidden]{display:none}

/* Painel de emoji: inline, sem biblioteca, curto o bastante para não rolar */
.painel-emoji{position:relative}
.grade-emoji{
  position:absolute;z-index:20;top:calc(var(--toque) + 4px);left:0;
  display:grid;grid-template-columns:repeat(6,var(--toque));gap:2px;padding:var(--e-2);
  background:var(--cor-cartao);border:1px solid var(--cor-borda-forte);
  border-radius:var(--raio);box-shadow:var(--sombra-md);
}
.btn-emoji{
  width:var(--toque);height:var(--toque);border:0;border-radius:var(--raio-sm);
  background:none;cursor:pointer;font-size:1.375rem;line-height:1;
}
.btn-emoji:hover{background:var(--cor-primaria-clara)}
.composer textarea{border-radius:0 0 var(--raio-sm) var(--raio-sm);margin-top:0;line-height:1.5}

/* ---- Prévia: balão de conversa, para a coordenação reconhecer o que vai chegar ----
   É um <details open>: abre por padrão (a prévia é o que dá segurança) e fecha quando a
   pessoa quer o texto e o teclado ocupando a tela do celular. */
.previa-caixa{margin:var(--e-5) 0}
.previa-caixa>summary{
  display:flex;align-items:center;gap:var(--e-2);cursor:pointer;list-style:none;
  min-height:var(--toque);margin-bottom:var(--e-2);
}
.previa-caixa>summary::-webkit-details-marker{display:none}
/* O próprio chevron gira ao abrir (sem dingbat de texto), como no roteiro da programação. */
.previa-caixa .chevron-previa{display:inline-flex;color:var(--cor-mudo);transition:transform .15s}
.previa-caixa[open] .chevron-previa{transform:rotate(90deg)}
.previa-caixa h3{display:flex;align-items:center;gap:var(--e-2);margin:0;font-size:var(--txt-base);color:var(--cor-mudo)}
.balao{
  background:#e7f7d4;border:1px solid #cdeab0;border-radius:var(--raio) var(--raio) var(--raio) 4px;
  padding:var(--e-3) var(--e-4);max-width:46ch;line-height:1.5;
  overflow-wrap:break-word;white-space:normal;
}
.balao code{background:rgba(0,0,0,.06);border-radius:4px;padding:0 .3em;font-size:.9375em}

/* ---- Tela de envio ---- */
.msg-cabecalho{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e-3);flex-wrap:wrap;margin-bottom:var(--e-3)}
.msg-cabecalho .etiqueta{margin-top:var(--e-2)}
.msg-previa-curta{
  background:var(--cor-fundo);border-left:3px solid var(--cor-borda-forte);
  padding:var(--e-3) var(--e-4);border-radius:0 var(--raio-sm) var(--raio-sm) 0;
  color:var(--cor-tinta-suave);line-height:1.5;max-height:7.5em;overflow:hidden;
}
.progresso{margin:var(--e-4) 0 0}
.progresso-barra,.progresso-mini{background:var(--cor-borda);border-radius:var(--raio-pill);overflow:hidden}
.progresso-barra{height:12px}
.progresso-mini{height:8px;margin-bottom:4px}
.progresso-barra span,.progresso-mini span{display:block;height:100%;background:var(--cor-ok);border-radius:var(--raio-pill);transition:width .25s ease}
.progresso-texto{margin:var(--e-2) 0 0;color:var(--cor-mudo)}

.filtros-envio{display:flex;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-4)}
.filtro-btn{
  min-height:var(--toque);padding:var(--e-2) var(--e-4);border-radius:var(--raio-pill);
  border:1px solid var(--cor-borda-forte);background:var(--cor-cartao);
  color:var(--cor-tinta-suave);font:inherit;font-weight:var(--peso-medio);cursor:pointer;
}
.filtro-btn:hover{border-color:var(--cor-primaria-borda);background:var(--cor-primaria-tenue)}
.filtro-btn.ativo{background:var(--cor-primaria);border-color:var(--cor-primaria);color:#fff;font-weight:var(--peso-forte)}

.lista-envio .tel{font-variant-numeric:tabular-nums;color:var(--cor-mudo);white-space:nowrap}
.linha-envio.feita td{background:var(--cor-ok-fundo)}
.linha-envio.feita:hover td{background:#e6f8ec}
.envio-acoes{display:flex;align-items:center;gap:var(--e-3);justify-content:flex-end;flex-wrap:wrap}
.envio-acoes .botao{white-space:nowrap}
.marca-enviada{display:inline-flex;align-items:center;gap:var(--e-1);color:var(--cor-ok);font-size:.875rem;font-weight:var(--peso-forte);white-space:nowrap}
.marca-enviada[hidden]{display:none}
.marca-enviada .acao-ic{color:var(--cor-mudo)}
/* No computador o desfazer é o ícone fantasma da lei 10; a palavra só aparece no celular. */
.rotulo-desfazer{display:none}

/* =========================================================
   MENSAGENS NO CELULAR · esta é a tela que se usa EM PÉ, com o telefone na mão,
   uma pessoa por vez. Tudo aqui é @media screen: nada do impresso muda.
   ========================================================= */
@media screen and (max-width:720px){
  /* ---- Composer ---- */
  /* A barra vira duas fileiras: a de ferramentas rola de lado (.barra-rolavel, no HTML)
     e o painel de emoji fica FORA dela · caixa que rola de lado recorta o que é absoluto,
     e a grade abria cortada. Aqui ela deixa de ser flutuante e empurra o texto para baixo. */
  .barra-composer{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0}
  .ferramentas-strip{flex-wrap:nowrap}
  .grupo-ferramentas{flex-wrap:nowrap}
  .painel-emoji{border-top:1px solid var(--cor-borda);margin-top:var(--e-2);padding-top:var(--e-2)}
  .painel-emoji>summary{width:auto;justify-content:flex-start;gap:var(--e-2);padding:0 var(--e-2)}
  .rotulo-emoji{display:inline}
  .grade-emoji{
    position:static;background:none;border:0;box-shadow:none;padding:var(--e-2) 0 0;
    grid-template-columns:repeat(auto-fill,minmax(var(--toque),1fr));
  }
  /* Escrever no celular pede área de texto de verdade (o polegar rola pouco de cada vez). */
  .composer textarea{min-height:16em}
  .escolha-destino{flex-direction:column}
  /* Lei 3: nada abaixo de 16px na tela do celular. Vale para os chips de variável (são
     botão, não legenda) e para os textos de apoio DESTE formulário · as mesmas classes de
     uso geral (.peq, .ajuda-campo) ficam para uma decisão de fase, fora desta fatia. */
  .chip-variavel{font-size:var(--txt-base)}
  .composer .ajuda-campo,.composer .peq{font-size:var(--txt-base)}

  /* ---- Lista de envio: um cartão por pessoa ----
     Cada célula vira um bloco (o rótulo à esquerda do padrão base competiria com o nome),
     e o gesto principal ocupa a largura toda, com a altura de quem age em pé. */
  table.lista-envio.cartoes-mobile td[data-rotulo='']{display:block;text-align:left;padding:0}
  .lista-envio .cel-quem{font-size:var(--txt-md)}
  .lista-envio .cel-quem .peq{font-size:var(--txt-base)}   /* nada abaixo de 16px na tela */
  .lista-envio .cel-tel{color:var(--cor-mudo);font-variant-numeric:tabular-nums;margin-top:2px}
  .lista-envio .cel-acao{margin-top:var(--e-3)}
  .lista-envio .envio-acoes{flex-direction:column;align-items:stretch;gap:var(--e-2)}
  .lista-envio .envio-acoes .botao,
  .lista-envio noscript .botao{width:100%;min-height:var(--toque-grande)}
  /* A marca de enviada sobe para cima do botão: primeiro "já foi", depois o que fazer. */
  .lista-envio .marca-enviada{order:-1;justify-content:space-between;font-size:var(--txt-base)}
  .lista-envio .desfazer{
    width:auto;min-height:var(--toque);padding:0 var(--e-3);gap:.35em;
    color:var(--cor-primaria);font-weight:var(--peso-medio);
  }
  .lista-envio .rotulo-desfazer{display:inline}
  /* O cartão inteiro fica verde quando já foi (no computador quem pinta é a célula). */
  .lista-envio .linha-envio.feita{background:var(--cor-ok-fundo);border-color:var(--cor-ok-borda)}
  .lista-envio .linha-envio.feita td{background:none}

  /* Progresso e filtros grudados no topo da lista (.topo-grudado): o lote é longo e a
     pergunta "quanto falta?" não pode exigir rolar de volta. O progresso vira uma linha
     só para a faixa grudada não comer a tela. */
  .topo-grudado .progresso{display:flex;align-items:center;gap:var(--e-3);margin:0}
  .topo-grudado .progresso-barra{flex:1}
  .topo-grudado .progresso-texto{margin:0;white-space:nowrap}
  .filtros-envio{margin-top:var(--e-3)}
  .filtro-btn{flex:1 1 auto}          /* preenchem a fileira em vez de sobrar canto solto */

  /* ---- Lista de mensagens: cartão com manchete, chip, progresso e ações ---- */
  table.lista-mensagens.cartoes-mobile td[data-rotulo='']{display:block;text-align:left}
  .lista-mensagens .titulo-msg{
    display:flex;align-items:center;min-height:var(--toque);
    font-size:var(--txt-md);line-height:var(--linha-apertada);
  }
  .lista-mensagens .cel-envios .peq{font-size:var(--txt-base)}
}

/* =========================================================
   IMPRESSÃO · a vitrine do sistema (é o que a igreja inteira vê)
   Dimensões e quantidades por folha são FIXAS (já validadas em campo).
   ========================================================= */
@media print{
  /* Faz o navegador imprimir os fundos e cores exatos (faixas de crachá, células
     coloridas, blocos de área). Sem isto o Chrome "economiza tinta" e some com a cor.
     Vale para toda folha, inclusive as @page nomeadas (paisagem, A3). */
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  .no-print{display:none !important}
  body{background:#fff}
  .conteudo{max-width:none;padding:0}
  .titulo-pagina{display:none}
  @page{margin:8mm}
  /* Página nomeada: só a folha resumida vira paisagem, o resto segue retrato */
  @page paisagem{size:A4 landscape;margin:8mm}
  .folha-paisagem{page:paisagem}
  /* A programação completa quebra por dia, nunca no meio de um item */
  .dia-bloco{page-break-inside:auto}
  .dia-bloco tr{page-break-inside:avoid}
  .roteiro[open] .roteiro-texto,.roteiro-impresso{background:none;border:0;padding:0}
}

/* ---- Cabeçalho comum das folhas impressas ---- */
.cabecalho-impresso{text-align:center;margin-bottom:var(--e-4)}
.cabecalho-impresso h2{font-size:var(--txt-lg);margin:0}
.cabecalho-impresso .sub{color:var(--cor-mudo)}
.titulo-folha{text-align:center}

/* =========================================================
   RELATÓRIOS DE TABELA NO PAPEL · `.tabela-compacta`
   (cozinha, enfermaria, emergência, embarque)

   Estas folhas são LISTA: a coordenação percorre 54 linhas procurando uma pessoa.
   Com o tamanho de tela (16px, entrelinha 1,55 e 12/16px de respiro em cada célula)
   a de emergência ocupava QUATRO folhas A4 · virar página no meio de uma emergência
   é o oposto do que ela existe para resolver.
   A lei dos 16px é de TELA (ali o inimigo é o zoom do iOS e a vista cansada a 40cm).
   No papel, lido a 30cm e com tinta de verdade, 3,4mm (~9,6pt) é confortável · e é o
   piso: abaixo de 9pt não se desce, mesmo que caiba mais gente na folha.
   O que encolhe é a FONTE e o ESPAÇO, nunca o dado: telefone e nome do contato saem
   inteiros, sem reticências e sem abreviação. Por isso as células não quebram linha
   (`nowrap`) e só o texto livre (`.livre`: restrição alimentar, medicamentos) quebra.

   A classe é obrigatória e existe justamente para NÃO valer para todo mundo:
   `table.dados` também é a tabela da programação impressa, que é outra coisa.
   ========================================================= */
@media print{
  table.dados.tabela-compacta{
    box-shadow:none;border-radius:0;border:0;
    font-size:3.4mm;line-height:1.25;width:100%;
  }
  /* O cabeçalho se repete em toda folha · sem ele, da 2ª página em diante a pessoa
     não sabe mais qual coluna é o telefone. É para isto que as tabelas ganharam
     <thead> na Fase 21 (antes as linhas de <th> caíam no <tbody> implícito). */
  table.dados.tabela-compacta thead{display:table-header-group}
  table.dados.tabela-compacta tr{page-break-inside:avoid;break-inside:avoid}
  table.dados.tabela-compacta th,
  table.dados.tabela-compacta td{
    padding:.8mm 1.8mm;border-bottom:.2mm solid var(--cor-borda);
    white-space:nowrap;vertical-align:baseline;
  }
  table.dados.tabela-compacta th{border-bottom:.35mm solid var(--cor-borda-forte)}
  /* Texto livre (restrição, medicamentos): aqui quebrar linha é o certo · a frase é
     da pessoa e pode ter qualquer tamanho. */
  table.dados.tabela-compacta td.livre{white-space:normal}
  /* A referência do participante fica compacta no papel: o número perde a moldura de
     pastilha (que só serve na tela, para virar alvo de toque) e vira só o algarismo,
     que é o que economiza altura de linha. Número, bolinha e nome continuam os três. */
  table.dados.tabela-compacta .ref-num{
    background:none;border:0;padding:0;border-radius:0;min-width:2.2ch;
  }
  table.dados.tabela-compacta .ref-part{gap:.25em}
  table.dados.tabela-compacta .ponto-equipe{margin-right:.15em}
  table.dados.tabela-compacta .tel{font-variant-numeric:tabular-nums}
  table.dados.tabela-compacta td.ordem{text-align:right;color:var(--cor-mudo);font-variant-numeric:tabular-nums}
  /* Quadradinho de caneta do embarque: 4mm ainda aceita um "X" e para de mandar na
     altura da linha (a 5mm era ele, e não o texto, que definia a altura). */
  table.dados.tabela-compacta .caixa-marcar{width:4mm;height:4mm}
  /* O nome da edição vira uma tarja curta no alto: era um parágrafo com a entrelinha
     do corpo e comia quase um centímetro de papel útil. */
  .titulo-folha{margin:0 0 2mm;font-size:3.6mm;line-height:1.2}
}

/* ---- Vista resumida: 3 colunas (Sexta | Sábado | Domingo) em A4 paisagem ---- */
.resumo-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;align-items:start}
.resumo-col{border:1px solid var(--cor-borda-forte);border-radius:2mm;overflow:hidden}
.resumo-col h3{
  margin:0;padding:2mm;text-align:center;background:var(--cor-tinta);color:#fff;
  font-size:4mm;letter-spacing:.06em;font-variant-caps:all-small-caps;
}
.resumo-item{display:flex;gap:2mm;padding:1.4mm 2mm;border-bottom:1px solid #eee;font-size:3.4mm;line-height:1.25;break-inside:avoid}
.resumo-item:last-child{border-bottom:0}
.resumo-item .h{font-variant-numeric:tabular-nums;font-weight:800;flex:none;width:17mm}
.resumo-item .t{min-width:0;overflow-wrap:break-word}
/* Refeições saltam aos olhos · esta folha vive na parede da cozinha */
.resumo-item.r-refeicao{background:var(--tipo-refeicao-fundo);color:var(--tipo-refeicao);font-weight:800}
.resumo-item.r-palestra .t{font-weight:700}
.resumo-item.r-marco{color:var(--tipo-marco)}
.resumo-legenda{display:flex;gap:var(--e-4);justify-content:center;margin-top:3mm;font-size:3.2mm;color:var(--cor-mudo)}

/* =========================================================
   O MURAL A3 (retrato) · vai para a parede e é lido a 2 metros.
   Regra de ouro da hierarquia: NOMES > horário > título da tarefa > resto.
   Quem olha o mural está perguntando "eu estou nisso?".
   ========================================================= */
.folha-a3{
  width:277mm;               /* A3 retrato (297mm) menos as margens de 10mm */
  margin:0 auto var(--e-6);
  background:#fff;border:1px solid var(--cor-borda);border-radius:var(--raio);padding:6mm;
  /* ESCALA DA FOLHA · um número só governa o mural inteiro, e quem o calcula é o PHP,
     folha a folha (ver `escala_a3()`): a folha se estica até ocupar a página, ou encolhe
     até caber nela. Todo tamanho daqui para baixo é `calc(medida * var(--escala-a3))` ·
     fontes, paddings e vãos juntos, senão a folha ficaria apertada por fora e frouxa por
     dentro. Foram três degraus fixos até a Fase 22.1; o degrau de cima virava teto, e a
     folha leve parava nele deixando o terço de baixo em branco.

     Este `1` é só a rede de segurança: o valor de verdade chega inline, na folha. Sem ele
     o mural ainda sai · no tamanho de referência, que é onde as medidas foram tiradas. */
  --escala-a3:1;
}

.a3-cabecalho{
  display:flex;align-items:baseline;gap:4mm;
  border-bottom:1mm solid var(--cor-tinta);
  padding-bottom:calc(2mm * var(--escala-a3));margin-bottom:calc(3mm * var(--escala-a3));
}
.a3-periodo{font-family:var(--fonte-titulo);font-size:calc(10mm * var(--escala-a3));font-weight:800;line-height:1;letter-spacing:-.02em}
.a3-sub{color:var(--cor-mudo);font-size:calc(4.2mm * var(--escala-a3))}
.a3-folha-n{font-size:calc(4.2mm * var(--escala-a3));color:var(--cor-mudo);white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto}

/* CORPO EM DUAS COLUNAS · a linha do tempo à esquerda, e à direita o trilho com o que não
   pertence a um horário. Antes o trilho vinha empilhado no fim e empurrava a folha para a
   segunda página, deixando metade da largura em branco em quase toda linha. */
.a3-corpo{display:grid;grid-template-columns:65fr 35fr;gap:calc(5mm * var(--escala-a3));align-items:start}
.a3-trilho{display:flex;flex-direction:column;gap:calc(3mm * var(--escala-a3));min-width:0}
.a3-tempo{min-width:0}

.a3-linha{display:grid;grid-template-columns:38% 1fr;gap:4mm;align-items:start;padding:calc(2.2mm * var(--escala-a3)) 0;border-top:.4mm solid #e5e7eb}
.a3-linha:first-of-type{border-top:0}
/* Item sem tarefa nenhuma: hora e título na MESMA linha, sem cartão e sem a coluna vazia
   à direita. É o que mais se repete na folha, e era o que mais desperdiçava altura. */
.a3-linha-so{grid-template-columns:1fr;padding:calc(1.6mm * var(--escala-a3)) 0}
.a3-linha-so .a3-espinha{display:flex;align-items:baseline;gap:3mm;flex-wrap:wrap;padding:calc(1mm * var(--escala-a3)) 2.5mm}
.a3-linha-so .a3-hora{font-size:calc(6mm * var(--escala-a3))}
.a3-linha-so .a3-titulo{font-size:calc(5mm * var(--escala-a3));font-weight:600}
.a3-linha-so .a3-palestrante{margin-top:0}
.a3-espinha{padding:calc(1.8mm * var(--escala-a3)) 2.5mm;border-left:1.5mm solid var(--cor-borda-forte);border-radius:1mm}
.a3-hora{font-family:var(--fonte-titulo);font-size:calc(7.5mm * var(--escala-a3));font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.a3-titulo{font-size:calc(5.6mm * var(--escala-a3));font-weight:700;line-height:1.15}
/* Palestrante no mural: quem ministra é a informação que a igreja procura na parede, e
   ela vinha em cinza miúdo, do tamanho de uma legenda. Agora vem no teal da identidade,
   em negrito e um degrau acima · bate o olho e sabe quem prega. */
.a3-palestrante{font-size:calc(4.8mm * var(--escala-a3));color:var(--cor-primaria-profunda);font-weight:700;line-height:1.15;margin-top:.5mm}
.a3-espinha.e-refeicao{background:var(--tipo-refeicao-fundo);border-left-color:var(--tipo-refeicao)}
.a3-espinha.e-refeicao .a3-hora,.a3-espinha.e-refeicao .a3-titulo{color:var(--tipo-refeicao)}
.a3-espinha.e-palestra{border-left-color:var(--tipo-palestra)}
.a3-espinha.e-marco{border-left-color:var(--tipo-marco)}
.a3-espinha.e-atividade{border-left-color:var(--tipo-atividade)}
.a3-espinha.e-solta{border-left-style:dashed}

.a3-tarefas{display:flex;flex-direction:column;gap:calc(2.8mm * var(--escala-a3))}
.a3-tarefa{border:.3mm solid var(--cor-borda);border-left:2mm solid var(--area-cor,var(--a-neutra));border-radius:1.5mm;padding:calc(3mm * var(--escala-a3)) calc(3.5mm * var(--escala-a3));break-inside:avoid}
.a3-tarefa-topo{display:flex;align-items:baseline;gap:calc(2.5mm * var(--escala-a3));flex-wrap:wrap}
.a3-tarefa-titulo{font-size:calc(5.6mm * var(--escala-a3));font-weight:700;line-height:1.15}
.a3-pos{font-size:calc(3.4mm * var(--escala-a3));font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--area-cor,var(--a-neutra))}
.a3-tarefa-desc{font-size:calc(4mm * var(--escala-a3));color:var(--cor-mudo);line-height:1.2;margin-top:.8mm}
/* Os nomes são o elemento mais forte do cartão */
.a3-nomes{display:flex;flex-wrap:wrap;gap:1.5mm 3mm;margin-top:calc(1.8mm * var(--escala-a3))}
.a3-nome{font-size:calc(7mm * var(--escala-a3));font-weight:800;line-height:1.1}
.a3-sem-nome{font-size:calc(4.6mm * var(--escala-a3));color:var(--cor-aviso);font-weight:700}

.a3-farmacia{border:.5mm solid var(--a-farmacia);border-radius:1.5mm;padding:calc(3mm * var(--escala-a3));margin-top:4mm;break-inside:avoid}
.a3-farmacia h3{margin:0 0 1.5mm;color:var(--a-farmacia);font-size:calc(5mm * var(--escala-a3))}
/* Mesma hierarquia da tela, em escala de mural: horário manda, pessoas indentadas. */
.a3-farm-grupo{padding:calc(2mm * var(--escala-a3)) 0 0;break-inside:avoid}
.a3-farm-hora{
  font-family:var(--fonte-titulo);font-size:calc(5.4mm * var(--escala-a3));font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--a-farmacia);padding-bottom:.8mm;border-bottom:.5mm solid var(--a-farmacia-fundo);
}
.a3-farm-pessoas{display:flex;flex-wrap:wrap;gap:calc(1.5mm * var(--escala-a3)) 5mm;padding:calc(1.5mm * var(--escala-a3)) 0 0 4mm}
.a3-farm-confirmar .a3-farm-hora{color:var(--cor-aviso);border-bottom-color:var(--cor-aviso-borda);font-size:5mm}
.a3-farm-duvida{display:inline-flex;align-items:center;gap:1.5mm}
.a3-farm-texto{font-style:italic;color:var(--cor-aviso);font-size:4mm}
.ponto-eq{width:3mm;height:3mm;border-radius:50%;display:inline-block;border:.2mm solid rgba(0,0,0,.2);flex:none}

.a3-rodape{margin-top:calc(5mm * var(--escala-a3));padding-top:calc(3mm * var(--escala-a3));border-top:.4mm solid var(--cor-borda-forte)}
.a3-inteiro{background:var(--cor-primaria-tenue);border:.3mm dashed var(--cor-primaria-borda);border-radius:1.5mm;padding:calc(2.8mm * var(--escala-a3)) 3mm;margin-bottom:3mm}
.a3-inteiro h3{margin:0 0 1.2mm;font-size:calc(4.6mm * var(--escala-a3))}
/* "Placas de tempo: Marcos, Fábio" é UMA frase · o gap do flex separava título e nomes
   como se fossem duas coisas, e o dois-pontos ficava boiando longe do que apresenta. */
.a3-inteiro-item{gap:1.5mm;margin-bottom:calc(1.2mm * var(--escala-a3))}
.a3-inteiro-item:last-child{margin-bottom:0}
.a3-inteiro-item .a3-nome{font-size:calc(5.6mm * var(--escala-a3))}
.a3-legenda{display:flex;flex-wrap:wrap;gap:calc(2mm * var(--escala-a3)) 5mm}
.a3-legenda .legenda-item{font-size:calc(3.6mm * var(--escala-a3))}
/* O trilho é estreito (35% da folha): o que dentro dele era horizontal passa a empilhar. */
.a3-trilho .a3-farmacia,.a3-trilho .a3-rodape{margin-top:0}
.a3-trilho .a3-rodape{padding-top:calc(2mm * var(--escala-a3));border-top:.4mm solid var(--cor-borda-forte)}
.a3-trilho .lideres-impresso{margin:0;font-size:calc(4mm * var(--escala-a3));display:block}
.a3-trilho .lid-eq{display:block;margin-bottom:calc(1mm * var(--escala-a3))}
.a3-farm-pessoas{padding-left:2mm}
/* Legenda no pé do trilho, em duas colunas de chips. */
.a3-legenda{display:grid;grid-template-columns:1fr 1fr;gap:calc(1mm * var(--escala-a3)) 2mm}

@media print{
  /* Página nomeada: o mural é A3 retrato; o resto do sistema segue A4 */
  @page a3retrato{size:A3 portrait;margin:10mm}
  .folha-a3{page:a3retrato;width:auto;border:0;border-radius:0;padding:0;margin:0;page-break-after:always}
  .folha-a3:last-of-type{page-break-after:auto}
  .a3-linha{break-inside:avoid}
  /* O QUE SOBRA DA PÁGINA VIRA VÃO, NÃO PAPEL BRANCO.
     A letra cresce até o teto de `escala_a3()`, e aí para · daí para cima ela viraria
     letreiro. Só que a estimativa de altura erra de propósito para mais, e num período
     leve o teto chega antes do fim da folha. Sem isto, o que sobrava era um terço de
     página em branco embaixo, que foi exatamente o defeito relatado.

     É `min-height`, JAMAIS `height`: um mínimo nunca inventa altura que o conteúdo já não
     tivesse, então ele não empurra sozinho a folha para a página 2 · desde que o valor
     caiba na página, que é o que a conta abaixo garante.

     O desconto ACOMPANHA A ESCALA porque o cabeçalho acompanha: ele é o único pedaço da
     folha que fica FORA desta caixa, e na folha mais esticada ele é 45% mais alto do que
     na de referência. Medindo (clonando o valor até a folha virar duas páginas), na
     escala 1,45 o teto está entre 360 e 364mm · 32mm de desconto deixa 8mm de sobra ali,
     que é o pior caso. Um valor fixo de 366mm passava desse teto e mandava para a segunda
     página justamente as folhas leves, que são as que esta fase veio consertar. */
  .a3-tempo{
    display:flex;flex-direction:column;justify-content:space-between;
    min-height:calc(400mm - 32mm * var(--escala-a3));
  }
}

/* Tokens de impressão (só as três peças que existem hoje: crachá, etiqueta, filipeta) */
/* Sem gap e sem padding: os crachás saem CONTÍGUOS, para a refiladora fazer um passe
   reto por linha e por coluna. Quem separa um do outro é uma única linha de corte
   compartilhada (ver o bloco dos crachás, abaixo), não um espaço branco. */
.folha-crachas{display:grid;justify-content:center;gap:0;padding:0}
.cracha,.etq,.filipeta{
  background:#fff;page-break-inside:avoid;break-inside:avoid;
  border:1px dashed var(--cor-borda-forte);
}
.cracha-nome,.etq-nome,.fil-nome{font-family:var(--fonte-titulo);letter-spacing:-.01em}
.cracha-numero,.etq-num,.fil-numero{
  font-family:var(--fonte-titulo);font-weight:var(--peso-extra);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em;
}
/* Nome da edição em versalete, discreto, nos rodapés */
.marca-impresso{font-variant-caps:all-small-caps;letter-spacing:.08em;color:#828a97}

/* Crachás: grade 2 x 4 em A4 (8 por folha, 90 x 62mm)
   HIERARQUIA: o NOME é o protagonista (tem de ser lido a dois metros), o número é
   coadjuvante forte no canto superior esquerdo, na cor da equipe. O número vive numa
   LINHA PRÓPRIA do corpo (não é mais absoluto): o nome ocupa o espaço que sobra e
   centra nele, então as duas coisas nunca se sobrepõem, por mais longo que seja o nome.
   Conta da altura, refeita na Fase 21 (o nome ganhou padding para não ter letra cortada):
   62 - 0,2 da linha de corte - 13 da faixa - 7,25 do rodapé = 41,55mm de corpo; menos 4mm
   de padding e 6,8mm do número (8mm com line-height 0,85) sobram 30,75mm de centro.
   A igreja leva 4,84mm (3,2mm com entrelinha 1,2, mais 1mm de respiro), deixando 25,91mm
   para o nome. O pior caso, 2 linhas de 11mm, pede 2 x 1,02 x 11 + 0,24em = 24,64mm ·
   cabe com 1,27mm de folga. Mexeu em qualquer uma dessas medidas? Refaça esta conta E
   confira na página renderizada, porque o estouro aqui é MUDO: o flex espreme o bloco
   do nome e o corte volta sem avisar. */
.folha-crachas{grid-template-columns:repeat(2,90mm)}
/* Cantos QUADRADOS: canto arredondado não sobrevive a um corte reto de refiladora ·
   a lâmina passa em linha, então o desenho tem de terminar em linha. */
.cracha{width:90mm;height:62mm;border-radius:0;overflow:hidden;display:flex;flex-direction:column}
/* ---- Linha de corte COMPARTILHADA ----
   Cada crachá desenha só a borda da DIREITA e a de BAIXO; a borda esquerda vem da coluna
   da esquerda e a de cima, da linha de cima. Se cada um desenhasse os quatro lados, no meio
   da folha sairiam DUAS linhas coladas e a lâmina não teria onde passar entre elas.
   As bordas externas do bloco entram à parte: a da esquerda na 1ª coluna (ímpares) e a de
   cima na 1ª linha DE CADA FOLHA · são 8 por folha (grade 2 x 4, invariante do projeto),
   por isso `8n+1` e `8n+2`. Assim toda folha, e não só a primeira, tem onde alinhar o corte. */
.cracha{border:0;border-right:.2mm solid var(--cor-borda-forte);border-bottom:.2mm solid var(--cor-borda-forte)}
.cracha:nth-child(odd){border-left:.2mm solid var(--cor-borda-forte)}
.cracha:nth-child(8n+1),.cracha:nth-child(8n+2){border-top:.2mm solid var(--cor-borda-forte)}
.cracha-faixa{height:13mm;border-radius:0;display:flex;align-items:center;justify-content:space-between;padding:0 5mm;color:#fff;font-weight:800;font-size:3.6mm;letter-spacing:.08em;font-variant-caps:all-small-caps}
.cracha-corpo{flex:1;min-height:0;display:flex;flex-direction:column;padding:2mm 5mm;text-align:center}
/* line-height abaixo de 1 encolhe a CAIXA do número sem encolher o dígito (a folga do
   em quadrado é pura entrelinha) · é 1,2mm a mais de respiro para o nome, e o desenho
   do número continua com 8mm. */
.cracha-numero{flex:none;align-self:flex-start;font-size:8mm;line-height:.85}
.cracha-centro{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
/* O nome nunca é cortado com reticências: as classes abaixo reduzem a fonte por
   comprimento (calculado no PHP, sem JS) até caber em 2 linhas nos 76mm úteis. */
/* O padding VERTICAL aqui não é respiro: é o que impede a letra de ser cortada.
   Métrica MEDIDA da Plus Jakarta Sans ExtraBold: a caixa do font vale 1,33em
   (ascent 1,08 + descent 0,25), o "g" desce 0,24em abaixo da base e o "Ã" sobe 0,94em.
   Com line-height 1,02 a meia-entrelinha fica NEGATIVA (-0,155em), então o glifo
   transborda a caixa de linha: faltam 0,145em embaixo e 0,015em em cima · e o
   `overflow:hidden` que o line-clamp exige recorta exatamente aí. Era isso que decepava
   o "g" de Wellington e transformava o "Â" de Ângelo num "Ā".
   O clipe acontece na borda do PADDING, não na do conteúdo: 0,18em embaixo e 0,06em em
   cima devolvem a folga sem mexer na caixa de linha · a contagem de linhas (e portanto a
   escada calculada no PHP) continua exatamente a mesma. Em `em` de propósito: todo degrau
   da escada herda a correção na proporção certa, e o degrau de 7/6/5mm, que já usa
   line-height maior, fica com folga de sobra. */
.cracha-nome{
  font-size:11mm;font-weight:800;line-height:1.02;padding:.06em 2mm .18em;
  overflow-wrap:break-word;hyphens:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cracha-nome.c-95{font-size:9.5mm}
.cracha-nome.c-8{font-size:8mm}
.cracha-nome.c-7{font-size:7mm;line-height:1.06}
.cracha-nome.c-6{font-size:6mm;line-height:1.08}
/* Último degrau: aceita até 4 linhas. `nome_cracha` vai a 60 caracteres, e nome assim
   pode não caber em 2 linhas em tamanho nenhum · aqui 4 linhas de 5mm (22mm) ainda cabem
   no centro (29,9mm) com a igreja embaixo. Sair em 4 linhas é feio; sair cortado é erro. */
.cracha-nome.c-5{font-size:5mm;line-height:1.1;-webkit-line-clamp:4}
/* A igreja é UMA linha curta: a entrelinha de 1,55 do corpo do site é desperdício de
   papel aqui, e o milímetro que ela come sai do nome, que é o protagonista. Com 1,2 e
   1mm de respiro, o nome de 11mm em 2 linhas volta a caber com folga (ver a conta da
   altura no cabeçalho deste bloco). */
/* UMA linha, sempre. O nome da igreja vem da planilha e é texto livre: se ele quebrasse
   em duas linhas, comeria a altura do NOME, e o flex espremeria o bloco do nome até o
   clipe voltar a cortar letra · em silêncio, que é o pior jeito de falhar (o ensaio da
   Fase 21 reproduziu isso com uma igreja de 63 caracteres). A igreja é contexto, o nome
   é o protagonista: quando não cabe, quem cede é a igreja, com reticências. */
.cracha-sub{
  font-size:3.2mm;line-height:1.2;color:#6b7280;margin-top:1mm;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cracha-rodape{border-top:1px solid #eee;padding:1.5mm 5mm;font-size:3mm;display:flex;justify-content:space-between;align-items:center}

/* As placas antigas de cama (190x130) e de cadeira (92x88) saíram na 9B:
   as duas viraram a etiqueta unificada 60x50 abaixo. O CSS delas foi removido
   porque .etq-* colidia por nome e sobrescrevia as regras novas. */

/* =========================================================
   ETIQUETA UNIFICADA 60 x 50 mm · um desenho, cinco finalidades
   (cama, cadeira, lixo, celular, bagagem). Só o rótulo da faixa muda.
   Grade 3 x 5 = 15 por folha A4 retrato. Medidas em mm: o que sai da
   impressora tem de bater com a régua.
   Conta: 3*60 + 2*4 = 188mm de 194 úteis · 5*50 + 4*4 = 266mm de 281 úteis.
   ========================================================= */
.folha-etq{display:grid;grid-template-columns:repeat(3,60mm);gap:4mm;justify-content:center;padding:0}
.etq{
  width:60mm;height:50mm;position:relative;overflow:hidden;
  border:1px dashed var(--cor-borda-forte);   /* linha de corte */
  display:flex;flex-direction:column;background:#fff;
  page-break-inside:avoid;break-inside:avoid;
}
/* Faixa: marca à esquerda, finalidade à direita, em extremos opostos.
   O padding esquerdo de 11mm é o espaço do guia de furo (4mm + 5mm de círculo + folga). */
.etq-faixa{
  height:10mm;flex:none;display:flex;align-items:center;justify-content:space-between;gap:2mm;
  padding:0 3mm 0 11mm;
  color:#fff;font-weight:800;font-size:3mm;letter-spacing:.06em;font-variant-caps:all-small-caps;
}
.etq-marca{opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.etq-fim{font-size:3.4mm;letter-spacing:.12em;white-space:nowrap;flex:none}
/* Guia de furo: o furador acerta aqui e nunca atravessa texto.
   5mm de diâmetro, centrado na faixa, 4mm da borda esquerda. */
.etq-furo{
  position:absolute;left:4mm;top:2.5mm;width:5mm;height:5mm;
  border:.4mm dotted rgba(255,255,255,.8);border-radius:50%;
}
/* Corpo: grade de DUAS COLUNAS DE LARGURA FIXA com um trilho entre elas.
   Cada texto vive dentro da sua célula · nada de margem negativa, position absolute
   ou transbordo atravessando o trilho. É o que impede o nome de encostar no número.
   Conta (60mm de largura): 2.5 de padding + 19 do número + 3 do trilho + 33 do nome
   + 2.5 de padding = 60mm exatos.
   Fonte do número: a Plus Jakarta Sans tem tabular-nums, então TODO dígito avança
   0,600em · qualquer par ("11", "44", "90") mede o mesmo. 2 x 0,600 x 14mm = 16,80mm,
   com 2,20mm de folga nos 19mm. Três dígitos usam .num-3 (9mm = 16,20mm, folga 2,80). */
.etq-corpo{
  flex:1;min-height:0;display:grid;grid-template-columns:19mm 3mm 33mm;
  align-items:center;padding:0 2.5mm;
}
.etq-num{
  font-family:var(--fonte-titulo);font-size:14mm;font-weight:800;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  grid-column:1;text-align:center;min-width:0;overflow:hidden;
}
.etq-num.num-3{font-size:9mm}
/* Trilho: fio hairline como âncora visual entre as duas colunas. Não encosta nas
   bordas do corpo (60% da altura), para separar sem virar borda de tabela. */
.etq-trilho{grid-column:2;justify-self:center;width:.2mm;height:60%;background:#d1d5db}
/* O nome nunca é cortado com reticências: as classes abaixo reduzem a fonte por
   comprimento (calculado no PHP, sem JS) até caber em 2 linhas nos 33mm da coluna. */
.etq-nome{
  font-family:var(--fonte-titulo);font-size:6mm;font-weight:800;line-height:1.08;
  grid-column:3;min-width:0;overflow-wrap:break-word;hyphens:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.etq-nome.n-s{font-size:5mm;line-height:1.1}
.etq-nome.n-xs{font-size:4.5mm;line-height:1.12}
.etq-nome.n-xxs{font-size:4mm;line-height:1.15}
.etq-rodape{
  flex:none;padding:0 3mm 2mm;font-size:2.6mm;color:#828a97;
  font-variant-caps:all-small-caps;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Filipetas de sacola (correio): tiras 190 x 60mm, 4 por folha A4 retrato */
.folha-filipetas{padding:4mm 0}
.filipeta{width:190mm;height:60mm;margin:0 auto;display:flex;align-items:center;gap:8mm;padding:0 10mm;position:relative;overflow:hidden}
.fil-faixa{position:absolute;left:0;top:0;bottom:0;width:6mm}
.fil-numero{font-size:30mm;flex:none;margin-left:6mm}
.fil-nome{font-size:12mm;font-weight:800;line-height:1.05;min-width:0;overflow-wrap:break-word;flex:1}
.fil-equipe{font-size:5mm;font-weight:700;font-variant-caps:all-small-caps;letter-spacing:.06em;margin-top:1mm}
.fil-marca{font-size:3.2mm;text-align:right;flex:none;align-self:flex-end;padding-bottom:6mm}

/* =========================================================
   MODO PRETO E BRANCO · papel sulfite colorido em impressora mono.
   A cor vem do PAPEL, então some do desenho: zero fundo colorido,
   número e nome em preto puro, faixa vira contorno preto. As dimensões
   (mm, grade, guia de furo) são idênticas às do modo colorido.
   Regra: !important vence o style inline de cor que o modo colorido emite. */
.cracha.pb,.cracha.pb *,.etq.pb,.etq.pb *,.filipeta.pb,.filipeta.pb *{color:#000 !important}
.cracha.pb .cracha-faixa,.etq.pb .etq-faixa{background:#fff !important;border-bottom:.4mm solid #000}
.etq.pb .etq-furo{border-color:#000}
.filipeta.pb .fil-faixa{background:#fff !important;width:6mm;border-right:.4mm solid #000}
.cracha.pb{border-color:#000}

/* Seletor Colorida / Preto e branco (barra de impressão, no-print) */
.modo-impressao{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;margin:0 0 var(--e-3)}
.modo-rotulo{font-weight:var(--peso-forte)}
.modo-opcao{
  display:inline-flex;align-items:baseline;gap:.4em;min-height:var(--toque);padding:var(--e-2) var(--e-4);
  border:1px solid var(--cor-borda-forte);border-radius:var(--raio-sm);color:var(--cor-tinta);
  background:var(--cor-cartao);font-weight:var(--peso-forte);
}
.modo-opcao:hover{border-color:var(--cor-primaria);text-decoration:none}
.modo-opcao.ativo{background:var(--cor-primaria);border-color:var(--cor-primaria);color:#fff}
.modo-nota{font-size:.8125rem;font-weight:var(--peso-normal);opacity:.85}

/* Escala impressa */
.bloco-dia{page-break-inside:avoid}
.bloco-dia h2{background:var(--cor-tinta);color:#fff;padding:var(--e-2) var(--e-3);border-radius:var(--raio-sm)}
table.escala{width:100%;border-collapse:collapse;margin-bottom:var(--e-5)}
table.escala th,table.escala td{border:1px solid var(--cor-borda-forte);padding:var(--e-2) var(--e-3);vertical-align:top}
table.escala th{background:var(--cor-fundo);letter-spacing:.04em;font-variant-caps:all-small-caps}
table.escala td.hora{white-space:nowrap;font-weight:var(--peso-extra);width:1%}
.chip-vol{display:inline-block;background:var(--cor-primaria-tenue);border:1px solid var(--cor-primaria-borda);border-radius:var(--raio-pill);padding:.05rem .6rem;margin:.1rem .15rem .1rem 0}
/* Havia aqui uma SEGUNDA regra `.chip-area`, verde fixo, escrita para a escala impressa
   antiga (a `table.escala`, que não existe mais). Como ela vinha depois e estava fora de
   qualquer @media, vencia a de cima e o chip saía verde em TODA tela · com a área tendo
   cor escolhida pela coordenação (Fase 21), a cor simplesmente não aparecia. Removida:
   a cor do chip vem de `--area-cor`, como nos outros portadores de cor da área. */

/* =========================================================
   MOBILE · a operação acontece no celular, em pé, no evento
   ========================================================= */
@media screen and (max-width:720px){
  .conteudo{padding:var(--e-3);padding-bottom:calc(var(--nav-mobile-h) + var(--e-6))}
  .topo{padding:var(--e-2) var(--e-3);gap:var(--e-2)}
  .topo-nav{display:none}            /* vira barra inferior */
  .topo-direita{margin-left:auto}
  .rodape{padding-bottom:calc(var(--nav-mobile-h) + var(--e-4))}
  .titulo-pagina{font-size:var(--txt-lg)}

  /* Barra fixa inferior: 4 alvos grandes, alcançáveis com o polegar */
  .nav-mobile{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:var(--cor-cartao);border-top:1px solid var(--cor-borda);
    box-shadow:0 -2px 12px rgba(28,25,23,.08);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .nav-mobile a,.nav-mobile button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:var(--nav-mobile-h);padding:var(--e-1);
    background:none;border:0;font:inherit;font-size:.875rem;font-weight:var(--peso-medio);
    color:var(--cor-mudo);cursor:pointer;text-decoration:none;
  }
  .nav-mobile a.ativo{color:var(--cor-primaria);font-weight:var(--peso-forte)}
  .nav-mobile a.ativo .ni{transform:translateY(-1px)}
  .nav-mobile .ni{font-size:1.35rem;line-height:1}

  /* Painel "Mais" */
  .nav-mais-painel[hidden]{display:none}
  .nav-mais-painel{
    display:block;position:fixed;left:0;right:0;bottom:var(--nav-mobile-h);z-index:29;
    background:var(--cor-cartao);border-top:1px solid var(--cor-borda);
    box-shadow:0 -8px 24px rgba(28,25,23,.14);
    border-radius:var(--raio-lg) var(--raio-lg) 0 0;padding:var(--e-3);
    max-height:60vh;overflow-y:auto;
  }
  .nav-mais-painel a{
    display:flex;align-items:center;gap:var(--e-3);min-height:var(--toque-grande);
    padding:var(--e-2) var(--e-3);border-radius:var(--raio-sm);color:var(--cor-tinta);font-weight:var(--peso-medio);
  }
  .nav-mais-painel a:hover,.nav-mais-painel a.ativo{background:var(--cor-primaria-tenue);color:var(--cor-primaria-escura);text-decoration:none}
  .nav-mais-fundo{position:fixed;inset:0;background:rgba(28,25,23,.35);z-index:28}
  .nav-mais-fundo[hidden]{display:none}

  /* Tabelas que viram cartões empilhados (ex.: participantes) */
  table.cartoes-mobile,table.cartoes-mobile tbody,table.cartoes-mobile tr,table.cartoes-mobile td{display:block;width:100%}
  table.cartoes-mobile{border:0;box-shadow:none;background:none}
  table.cartoes-mobile thead{display:none}
  table.cartoes-mobile tr{
    background:var(--cor-cartao);border:1px solid var(--cor-borda);border-radius:var(--raio);
    margin-bottom:var(--e-3);padding:var(--e-3);box-shadow:var(--sombra-sm);
  }
  table.cartoes-mobile tr:hover td{background:none}
  table.cartoes-mobile td{
    border:0;padding:var(--e-1) 0;display:flex;justify-content:space-between;
    align-items:center;gap:var(--e-3);text-align:right;
  }
  table.cartoes-mobile td::before{
    content:attr(data-rotulo);font-weight:var(--peso-forte);color:var(--cor-mudo);
    text-align:left;flex:none;
  }
  table.cartoes-mobile td[data-rotulo='']::before{content:none}
  table.cartoes-mobile td[data-rotulo='']{justify-content:flex-start}
  /* A coluna de ações é ESTREITA no computador (`table.dados td:has(.acoes-linha){width:1%}`),
     e essa largura seguia valendo dentro do cartão: os ícones espremiam em três pixels e
     sumiam da tela. No cartão a fileira de ações é uma linha inteira. */
  table.cartoes-mobile td:has(.acoes-linha){width:100%;white-space:normal}

  .passo{flex-wrap:wrap}
  .passo .botao{width:100%}
  .acoes .botao{flex:1 1 auto}
  .linha-form>label{min-width:100%}

  /* =========================================================
     PADRÕES BASE DO CELULAR (Fase 20) · resolvem CLASSES de problema.
     Tudo aqui dentro é `@media screen`: nada do que é @media print muda.
     ========================================================= */

  /* NÍVEL 1 · a PÁGINA nunca rola de lado. Tabela larga que não virou cartão rola
     DENTRO da própria caixa, com sombra na borda avisando que continua. É o padrão
     certo para as tabelas de leitura (camisetas, relatórios), onde cartão não ajuda. */
  table.dados:not(.cartoes-mobile){
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    /* `position:relative` NÃO é enfeite: o cabeçalho invisível da coluna de ações
       (`.oculto-visual`) é absoluto, e sem um ancestral posicionado ele se ancora na
       janela, lá na direita da tabela larga · isso esticava a PÁGINA inteira e fazia
       o celular rolar de lado. Com a tabela posicionada, ele fica preso ao rolamento
       dela. Foi o que sozinho apagou a rolagem de programação, equipes e mensagens. */
    position:relative;
    background:
      linear-gradient(to right, var(--cor-cartao) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0) 12px) 100% 0,
      linear-gradient(to left,  var(--cor-cartao) 30%, rgba(255,255,255,0)) 100% 0,
      linear-gradient(to left,  rgba(0,0,0,.10), rgba(0,0,0,0) 12px) 100% 0;
    background-repeat:no-repeat;
    background-size:28px 100%, 12px 100%, 28px 100%, 12px 100%;
    background-attachment:local, scroll, local, scroll;
  }
  table.dados:not(.cartoes-mobile) th,
  table.dados:not(.cartoes-mobile) td{white-space:nowrap}

  /* NÍVEL 2 · cartões empilhados, escolha deliberada de cada tela (classe
     `cartoes-mobile` + `data-rotulo` em cada célula). Fica logo acima. */

  /* ALVOS DE TOQUE · a lei 3 pede 44px, e as ações de linha nasceram com 36.
     Aqui é o único lugar que decide isso · nenhuma tela repete a conta. */
  .acao-ic,
  .acoes-linha button,
  .acoes-linha a.botao,
  .ficha-menu>summary,
  .menu-mover>summary{min-height:var(--toque);min-width:var(--toque)}
  .topo .sair{min-height:var(--toque);display:inline-flex;align-items:center;gap:.3em}
  /* Chips de escolha (áreas, filtros de envio): confortáveis para o polegar. */
  .ficha-op,.chip-variavel,.filtro-btn{min-height:var(--toque);display:inline-flex;align-items:center}

  /* CAMPOS · 16px é o limiar abaixo do qual o iOS dá zoom sozinho ao focar,
     e o zoom desalinha a tela inteira. Altura de toque no mesmo lugar. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{
    font-size:16px;min-height:var(--toque);
  }

  /* BARRA DE FERRAMENTAS ROLÁVEL · esta rolagem lateral é legítima (é um toolbar,
     não a página). Usada pelo composer de mensagens. */
  .barra-rolavel{
    display:flex;gap:var(--e-2);overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:var(--e-1);scrollbar-width:none;
  }
  .barra-rolavel::-webkit-scrollbar{display:none}
  .barra-rolavel>*{flex:0 0 auto;min-height:var(--toque)}

  /* QUADRO DE TAREFAS · a linha do quadro é "hora | tarefas" lado a lado no computador.
     No celular vira uma pilha: a hora vira cabeçalho da vez e as tarefas vêm embaixo,
     com largura inteira. O `min-width:0` é o que deixa o cartão encolher · sem ele, item
     de grade tem largura mínima do conteúdo e estoura a tela. */
  .quadro-linha{grid-template-columns:1fr;gap:var(--e-2)}
  .quadro-linha>*{min-width:0}
  .tarefas-col{min-width:0}
  .tarefa-cartao{min-width:0;overflow-wrap:break-word}
  /* A ficha de quem faz a tarefa ocupa a linha inteira: no celular, duas fichas lado a
     lado partem o nome no meio, e a pergunta que se faz olhando o quadro é "eu estou nisso?" */
  .fichas .ficha,.fichas .ficha-aloc{width:100%;justify-content:space-between}

  /* O × de tirar alguém nasceu com 32px · no toque precisa dos 44. A regra precisa desta
     especificidade (`.ficha-aloc .fx`) para vencer a que definiu os 32. */
  .ficha-aloc .fx{min-width:var(--toque);min-height:var(--toque)}

  /* Caixa de marcar dentro de rótulo comprido encolhia para 14px de largura · em flex,
     o item cede espaço antes de quebrar a linha. `flex:none` proíbe ceder. */
  .ficha-op input,input[type=checkbox],input[type=radio]{flex:none}

  /* Célula-título do cartão (a que não tem rótulo) alinha à ESQUERDA · quando o texto
     quebra em duas linhas, alinhado à direita fica ilegível. */
  table.cartoes-mobile td[data-rotulo='']{text-align:left}

  /* AVISOS · `.flash` e `.dica-fundos` são flex para alinhar o ícone. Numa frase com
     negrito ou link no meio, cada pedaço vira uma COLUNA espremida. No celular o aviso
     é bloco e o ícone volta a ser parte do texto · assim frase nova não cai na armadilha. */
  .flash,.dica-fundos{display:block}
  .flash>.ic,.dica-fundos>.ic{vertical-align:-.18em;margin-right:.4em}

  /* Painel: cinco métricas de tela inteira empurram o conteúdo para longe. Duas por linha. */
  .grade-4{grid-template-columns:repeat(2,1fr)}

  /* Texto de apoio a 14px fere a lei 3 no celular · 16px é o piso de leitura.
     O seletor do cabeçalho do dormitório precisa repetir o pai (`.dorm-col-topo`): a regra
     que define 13px lá em cima tem duas classes, e sem isso esta aqui vira letra morta. */
  .peq,.ajuda-campo,.mudo.peq,.dorm-col-topo .dorm-meta{font-size:1rem}

  /* Célula sem conteúdo no cartão (palestrante em branco, por exemplo) não vira faixa
     vazia: com 44 itens na programação isso somava uma tela inteira de rolagem à toa. */
  table.cartoes-mobile td:empty{display:none}

  /* Três ações numa linha só estouram quando a edição tem 3 equipes: deixa quebrar. */
  .acoes-linha{flex-wrap:wrap}

  /* TOPO GRUDADO · o que a pessoa precisa ver enquanto rola um lote longo
     (progresso e filtros da lista de envio). */
  .topo-grudado{
    position:sticky;top:0;z-index:20;
    background:var(--cor-cartao);
    padding:var(--e-3) 0;margin:0 0 var(--e-2);
    box-shadow:0 6px 10px -8px rgba(28,25,23,.35);
  }
}