/* ============================================================
   TexClinicas: folha de estilo do sistema (entrada + area autenticada).

   IDENTIDADE DA FAMILIA TEX com a primaria propria do produto.
   Base #0c1322, apoio #94a3b8, fundo #f8fafc, cartao #ffffff, Inter.

   Regras de contraste (formula WCAG; remedidas em 04/11/2026 pela
   ferramentas/medir-contraste.php e pelo conferir-logomarca.py da casa):
     1. A primaria #c026d3 e PREENCHIMENTO (chip, filete, selo, marcador de
        ativo, simbolo da marca): contra branco da 4,71:1, contra #f8fafc
        4,50:1 e contra a base #0c1322 3,94:1. Texto e link sobre claro usam a
        TINTA #a21caf (6,32:1 sobre branco, 6,04:1 sobre #f8fafc). Sobre a base
        escura, o link e #f0abfc (10,55:1 sobre #0c1322, 9,52:1 sobre #141d33).
     2. Botao primario: texto BRANCO sobre #a21caf (6,32:1), token --tcl-botao,
        igual nos dois modos. Hover #86198f (8,24:1). Nunca texto branco sobre
        #c026d3 puro em corpo pequeno.
     3. Fronteira de campo de formulario pede 3:1 (--tcl-borda-campo #7b879b,
        3,63:1 sobre branco); filete decorativo e isento.
     4. Semanticas iguais nos produtos Tex: ok #15803d, atencao #b45309,
        erro #b91c1c, info #0369a1.

   ORGANIZACAO: barra SUPERIOR (molde do Denvo, dv-topbar.css) com menu
   suspenso em colunas; entrada de grupo em HUB DE CAIXAS (molde do GinecoLab,
   gn-hub.css); kit de tela do TexRH com prefixo tcl-. Tabela vira CARTAO
   abaixo de 900px da largura REAL do conteudo (@container conteudo).
   ============================================================ */

@font-face{
  font-family:"Inter";
  src:url("/assets/fontes/inter-var.woff2?v=20261010a") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* ---- primaria do TexClinicas (pergunta 1.3, resposta A) ---- */
  --tcl-primaria:#c026d3;
  --tcl-primaria-tinta:#a21caf;         /* texto, link e fundo de botao */
  --tcl-primaria-hover:#86198f;         /* hover do botao primario */
  --tcl-primaria-clara:#f0abfc;         /* link sobre fundo escuro */
  --tcl-primaria-veu:rgba(192,38,211,.12);   /* véu do fúcsia, não do azul irmão */
  /* ---- base comum da familia Tex ---- */
  --tcl-base:#0c1322;
  --tcl-base-2:#141d33;
  --tcl-base-3:#1e2a45;
  --tcl-apoio:#94a3b8;                  /* texto secundario SOBRE ESCURO */
  --tcl-sobre-escuro:#f8fafc;
  --tcl-fundo:#f8fafc;
  --tcl-fundo-2:#f1f5f9;
  --tcl-cartao:#ffffff;
  --tcl-tinta:#0c1322;
  --tcl-tinta-fraca:#475569;            /* 7,24:1 sobre #f8fafc */
  --tcl-placeholder:#64748b;
  --tcl-borda-campo:#7b879b;            /* 3,63:1 sobre branco */
  --tcl-linha:#e2e8f0;
  --tcl-linha-escura:rgba(148,163,184,.22);
  --tcl-ok:#15803d;
  --tcl-ok-veu:#eff6f1;
  --tcl-atencao:#b45309;
  --tcl-atencao-veu:#faf3ee;
  --tcl-atencao-borda:rgba(180,83,9,.30);
  --tcl-atencao-texto:#78350f;
  --tcl-erro:#b91c1c;
  --tcl-erro-veu:#faefef;
  --tcl-erro-borda:rgba(185,28,28,.30);
  --tcl-erro-texto:#7f1d1d;
  --tcl-info-veu:#f1f5f9;
  --tcl-info-texto:#334155;
  --tcl-veu-escuro:rgba(12,19,34,.62);

  --tb-h:64px;                          /* altura da barra superior */
  --alvo:44px;                          /* alvo de toque da casa */
  --raio:10px;
  --raio-p:7px;
  --sombra:0 1px 2px rgba(12,19,34,.06),0 4px 14px rgba(12,19,34,.05);
  --sombra-forte:0 12px 40px rgba(12,19,34,.28);
  --fonte:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ---- tokens de papel (frente A, 04/11/2026) ----
     O botao tem token PROPRIO porque a tinta muda de valor no modo escuro
     (#a21caf vira #f0abfc, que e link) e o fundo do botao nao pode mudar:
     texto branco sobre #f0abfc daria 1,8:1. */
  --tcl-botao:#a21caf;
  --tcl-botao-hover:#86198f;
  --tcl-botao-texto:#ffffff;
  --tcl-campo-fundo:#ffffff;
  --tcl-sombra-cartao:0 24px 60px rgba(12,19,34,.34),0 2px 6px rgba(12,19,34,.12);
  color-scheme:light;
}

/* ---- MODO ESCURO pelos tokens (frente A, 04/11/2026) ----
   Ligado de dois jeitos, com os MESMOS valores:
     - automatico, pela preferencia do aparelho, onde o <html> traz
       data-tema="auto" (as telas de entrada);
     - explicito, por data-tema="escuro" no <html>.
   A area logada ainda nao declara data-tema: as telas das frentes B a E
   estao sendo escritas nesta rodada, e o escuro so liga nelas depois que o
   eixo de layout do portao medir cada uma no escuro (decisao registrada em
   docs/MARCA.md). Contraste medido sobre #141d33 (cartao escuro): tinta
   #f8fafc 16,76:1; fraca #94a3b8 6,57:1; borda de campo #64748b 3,55:1;
   link #f0abfc 9,52:1; botao com texto branco sobre #a21caf 6,32:1. */
:root[data-tema="escuro"]{
  --tcl-fundo:#0c1322;--tcl-fundo-2:#141d33;--tcl-cartao:#141d33;--tcl-campo-fundo:#0c1322;
  --tcl-tinta:#f8fafc;--tcl-tinta-fraca:#94a3b8;--tcl-placeholder:#94a3b8;--tcl-borda-campo:#64748b;
  --tcl-linha:rgba(148,163,184,.24);--tcl-primaria-tinta:#f0abfc;--tcl-primaria-veu:rgba(192,38,211,.22);
  --tcl-ok-veu:rgba(21,128,61,.20);--tcl-atencao-veu:rgba(180,83,9,.22);--tcl-atencao-texto:#faf3ee;
  --tcl-erro-veu:rgba(185,28,28,.22);--tcl-erro-texto:#faefef;--tcl-info-veu:#1e2a45;--tcl-info-texto:#e2e8f0;
  --tcl-sombra-cartao:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(148,163,184,.16);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-tema="auto"]{
    --tcl-fundo:#0c1322;--tcl-fundo-2:#141d33;--tcl-cartao:#141d33;--tcl-campo-fundo:#0c1322;
    --tcl-tinta:#f8fafc;--tcl-tinta-fraca:#94a3b8;--tcl-placeholder:#94a3b8;--tcl-borda-campo:#64748b;
    --tcl-linha:rgba(148,163,184,.24);--tcl-primaria-tinta:#f0abfc;--tcl-primaria-veu:rgba(192,38,211,.22);
    --tcl-ok-veu:rgba(21,128,61,.20);--tcl-atencao-veu:rgba(180,83,9,.22);--tcl-atencao-texto:#faf3ee;
    --tcl-erro-veu:rgba(185,28,28,.22);--tcl-erro-texto:#faefef;--tcl-info-veu:#1e2a45;--tcl-info-texto:#e2e8f0;
    --tcl-sombra-cartao:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(148,163,184,.16);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
/* O Firefox recusa esta propriedade em toda grafia e escreve erro de analise no
   console a cada carga; dentro de @supports ele nao a analisa e o motor que a
   implementa segue igual. Ela existe para o Safari do iPhone nao inflar o texto
   ao girar a tela. */
@supports (-webkit-text-size-adjust:100%){html{-webkit-text-size-adjust:100%}}
/* O `padding-top: var(--tb-h)` saiu daqui em 18/10/2026.
   Ele reservava 64 px para a BARRA SUPERIOR do TexEducacao, que e de onde
   este CSS foi clonado. Este sistema navega por SIDEBAR de dois paineis: a
   barra superior nao existe, e os 64 px viravam rolagem propria em TODA
   rota, em TODO tamanho de tela (234 falhas no eixo de layout do portao).
   O `scroll-padding-top` continua, menor: ele so afasta a ancora do topo. */
html{scroll-padding-top:16px}
body{
  margin:0;min-height:100vh;
  font-family:var(--fonte);font-size:15px;line-height:1.5;
  color:var(--tcl-tinta);background:var(--tcl-fundo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:var(--tcl-primaria-tinta)}
a:hover{color:var(--tcl-base)}
h1,h2,h3,h4{font-family:var(--fonte);letter-spacing:-.015em;line-height:1.2;margin:0}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--tcl-primaria);outline-offset:2px;border-radius:3px}
[hidden]{display:none !important}
small{font-size:13px;color:var(--tcl-tinta-fraca)}
.oculto{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}

/* ---------- conteudo ----------
   O conteudo e o CONTEINER das telas: indicador, grade e a tabela que vira
   cartao respondem a largura REAL do conteudo, nao a da janela. */
.app-conteudo{
  flex:1 1 auto;padding:18px 24px 28px;max-width:1440px;width:100%;margin:0 auto;
  display:flex;flex-direction:column;gap:16px;container:conteudo / inline-size;
}

/* ============================================================
   BARRA SUPERIOR (molde: denvo/css/base/dv-topbar.css)
   ============================================================ */
.tb{
  position:fixed;top:0;left:0;right:0;height:var(--tb-h);
  background:var(--tcl-base);border-bottom:1px solid var(--tcl-linha-escura);
  z-index:1000;font-family:var(--fonte);
}
.tb__inner{display:flex;align-items:center;height:100%;padding:0 20px;gap:6px}
.tb__brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 8px;border-radius:var(--raio-p);text-decoration:none;transition:background .18s ease;flex-shrink:0}
.tb__brand:hover{background:rgba(248,250,252,.08)}
.tb__logo{display:block;height:30px;width:auto}
.tb__burger{
  display:none;width:44px;height:44px;border-radius:var(--raio-p);border:1px solid var(--tcl-linha-escura);
  background:transparent;color:var(--tcl-sobre-escuro);cursor:pointer;align-items:center;justify-content:center;
  margin-left:auto;flex:0 0 44px;
}
.tb__burger:hover{background:rgba(248,250,252,.10);border-color:var(--tcl-primaria)}
.tb__nav{display:flex;align-items:center;gap:2px;margin-left:10px;flex:1;min-width:0;flex-wrap:nowrap}
.tb__link{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;
  border-radius:var(--raio-p);border:0;background:transparent;color:var(--tcl-apoio);
  text-decoration:none;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;
  transition:background .18s ease,color .18s ease;white-space:nowrap;
}
.tb__link-icon{display:inline-grid;place-items:center;color:var(--tcl-apoio);transition:color .18s ease}
.tb__link:hover{background:rgba(248,250,252,.08);color:var(--tcl-sobre-escuro)}
.tb__link:hover .tb__link-icon{color:var(--tcl-primaria-clara)}
/* Estado ativo: texto claro cheio e o filete da primaria rente a base da barra.
   Sem fundo preenchido: numa barra escura o retangulo claro compete com o
   proprio conteudo da pagina. */
.tb__link--active,.tb__item--active>.tb__link{background:transparent;color:#fff;font-weight:600;position:relative}
.tb__link--active::after,.tb__item--active>.tb__link::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-12px;height:3px;background:var(--tcl-primaria);
}
.tb__link--active .tb__link-icon,.tb__item--active>.tb__link .tb__link-icon{color:#fff}
.tb__item{position:relative}
.tb__caret{display:inline-grid;place-items:center;margin-left:1px;color:var(--tcl-apoio);transition:transform .18s ease}
.tb__item--open .tb__caret{transform:rotate(180deg)}

/* O menu suspenso e CAMADA FLUTUANTE sobre a pagina clara, nao parte da barra:
   herdar as cores da barra escura deixaria texto branco sobre branco. */
.tb__menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:236px;background:var(--tcl-cartao);
  border:1px solid var(--tcl-linha);border-radius:10px;box-shadow:0 16px 40px -12px rgba(12,19,34,.28);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-4px);z-index:1001;
  max-height:calc(100dvh - var(--tb-h) - 12px);overflow-y:auto;overscroll-behavior:contain;
}
/* A transicao vale so na ABERTURA. Fechar e instantaneo: ao voltar de <=1024px
   para o desktop, o fade-out deixava o menu semitransparente sobre a pagina e
   toda captura de pagina inteira saia com o fantasma. */
.tb__item--open>.tb__menu{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .18s ease}
.tb__menu--right{left:auto;right:0}
.tb__menu-link{
  display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 10px;border-radius:6px;
  color:var(--tcl-tinta-fraca);text-decoration:none;font-size:14px;font-weight:500;line-height:1.35;
  background:transparent;border:0;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  transition:background .18s ease,color .18s ease;
}
.tb__menu-icon{display:inline-grid;place-items:center;width:18px;color:var(--tcl-placeholder);transition:color .18s ease}
.tb__menu-rotulo{flex:1 1 auto;min-width:0}
.tb__menu-link:hover{background:var(--tcl-fundo-2);color:var(--tcl-tinta)}
.tb__menu-link:hover .tb__menu-icon{color:var(--tcl-tinta)}
.tb__menu-link--active{background:var(--tcl-primaria-veu);color:var(--tcl-tinta);font-weight:600}
.tb__menu-link--active .tb__menu-icon{color:var(--tcl-primaria-tinta)}
.tb__menu-link--danger{color:var(--tcl-erro)}
.tb__menu-link--danger:hover{background:var(--tcl-erro-veu);color:var(--tcl-erro-texto)}
.tb__menu-divider{height:1px;background:var(--tcl-linha);margin:6px 0}
.tb__menu-userblock{padding:8px 10px 10px}
.tb__menu-username{display:block;font-size:15px;font-weight:600;color:var(--tcl-tinta);line-height:1.2}
.tb__menu-userrole{display:block;font-size:12px;color:var(--tcl-placeholder);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
/* Aviso de inquilino de ENSAIO dentro do menu da conta: e aqui que a frase cabe
   em toda largura. Texto de verdade, nao `title`. */
.tb__menu-demo{display:block;margin-top:6px;padding:6px 8px;border-radius:var(--raio-p);background:var(--tcl-aviso-veu,rgba(201,169,110,.14));color:var(--tcl-tinta);font-size:12px;line-height:1.35;font-weight:600;white-space:normal;max-width:260px}
.tb__form-sair{margin:0;display:flex}
/* Ponte sobre os 6px entre o botao e o painel, para atravessar com o mouse. */
@media (min-width:1025px){.tb__item--open::before{content:"";position:absolute;top:100%;left:0;width:100%;height:8px}}

/* Painel do grupo: todas as secoes em colunas (ate tres), cada uma com o
   titulo fixo e os links embaixo. Um clique ate qualquer destino. */
.tb__menu--um-nivel{display:grid;grid-template-columns:repeat(var(--tb-cols,1),minmax(200px,236px));gap:6px 18px;width:auto;padding:12px;overflow-y:auto}
.tb__menu--c1{--tb-cols:1}
.tb__menu--c2{--tb-cols:2}
.tb__menu--c3{--tb-cols:3}
.tb__menu--um-nivel .tb__secao{min-width:0}
.tb__secao-titulo{display:flex;align-items:center;gap:8px;min-height:28px;margin:0 0 2px;padding:0 8px;color:var(--tcl-placeholder);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tb__secao-titulo::after{content:"";flex:1;height:1px;background:var(--tcl-linha)}
.tb__secao-links{display:flex;flex-direction:column;gap:1px}
@media (pointer:coarse){.tb__menu--um-nivel .tb__menu-link{min-height:44px}}

.tb__right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.tb__data{font-size:12px;font-weight:500;line-height:1.2;color:rgba(255,255,255,.78);white-space:nowrap;margin-right:2px}
@media (max-width:1279px){.tb__data{display:none}}
.tb__tenant-chip{
  display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--tcl-apoio);
  padding:5px 10px;border-radius:4px;border:1px solid var(--tcl-linha-escura);
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.tb__sino{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--raio-p);color:var(--tcl-apoio);text-decoration:none;transition:background .18s ease,color .18s ease;flex-shrink:0}
.tb__sino:hover{background:rgba(248,250,252,.10);color:var(--tcl-sobre-escuro)}
.tb__sino--tem{color:#fff}
.tb__sino-selo{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--tcl-primaria);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}
/* REGRA DA MARCA: nunca avatar de inicial, em lugar nenhum do sistema. Nome de
   gente e TEXTO; marca e logomarca. */
.tb__avatar-wrap{position:relative}
.tb__avatar{
  display:inline-flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;
  height:44px;padding:0 10px;cursor:pointer;background:transparent;border:1px solid transparent;
  border-radius:var(--raio-p);color:#fff;text-align:right;font-family:inherit;
  transition:background .18s ease,border-color .18s ease;
}
.tb__avatar:hover,.tb__avatar-wrap.tb__item--open .tb__avatar{background:rgba(248,250,252,.10);border-color:var(--tcl-linha-escura)}
.tb__avatar-nome{display:block;font-size:14px;font-weight:600;line-height:1.15;color:#fff;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb__avatar-cargo{display:block;font-size:11px;line-height:1.15;letter-spacing:.05em;text-transform:uppercase;color:var(--tcl-apoio);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb__avatar-icon{display:none;color:#fff}
.tb__backdrop{display:none;position:fixed;top:var(--tb-h);left:0;right:0;bottom:0;background:rgba(12,19,34,.45);z-index:999}

@media (min-width:1025px) and (max-width:1599px){
  .tb__inner{padding:0 16px}
  .tb__nav{margin-left:6px}
  .tb__nav .tb__link{padding:0 8px;font-size:13px;gap:5px}
  .tb__link--active::after,.tb__item--active>.tb__link::after{left:6px;right:6px}
  .tb__avatar-nome,.tb__avatar-cargo{max-width:120px}
}
@media (min-width:1025px) and (max-width:1199px){
  .tb__avatar{width:44px;min-width:44px;padding:0;align-items:center}
  .tb__avatar-nome,.tb__avatar-cargo{display:none}
  .tb__avatar-icon{display:block}
}
@media (max-width:1024px){
  .tb__burger{display:inline-flex;order:2}
  .tb__brand{order:1}
  .tb__right{order:3;gap:4px}
  /* O chip de inquilino de ENSAIO encolhe, e so desaparece quando a barra
     deixa de caber (abaixo de 561px, regra mais abaixo). Ele estava escondido
     em TODA largura abaixo de 1025px, e era justamente no celular que alguem
     registrava dado de verdade na escola de demonstracao sem perceber.
     Onde ele nao cabe, a frase aparece dentro do menu da conta, que e visivel
     e alcancavel por teclado: a informacao nao se perde, muda de lugar. */
  .tb__tenant-chip{padding:4px 7px;font-size:10px;letter-spacing:.02em}
  .tb__nav{
    position:fixed;top:var(--tb-h);left:0;width:300px;max-width:88vw;
    height:calc(100dvh - var(--tb-h));background:var(--tcl-cartao);border-right:1px solid var(--tcl-linha);
    box-shadow:8px 0 28px -10px rgba(12,19,34,.25);
    flex-direction:column;align-items:stretch;padding:12px;gap:2px;margin-left:0;
    overflow-y:auto;overscroll-behavior:contain;transform:translateX(-100%);
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:1000;
  }
  .tb--open .tb__nav{transform:translateX(0)}
  /* Fechado, a sombra de 8px vazava para dentro da tela: faixa cinza na borda
     esquerda de toda pagina ate 1024px. */
  .tb:not(.tb--open) .tb__nav{box-shadow:none}
  .tb--open .tb__backdrop,.tb--open~.tb__backdrop{display:block}
  .tb__nav .tb__link{width:100%;justify-content:flex-start;height:auto;min-height:44px;padding:10px 12px;font-size:15px}
  .tb__nav>.tb__link,.tb__nav .tb__item>.tb__link{color:var(--tcl-tinta-fraca)}
  .tb__nav .tb__link-icon,.tb__nav .tb__caret{color:var(--tcl-placeholder)}
  .tb__nav .tb__link:hover{background:var(--tcl-fundo-2);color:var(--tcl-tinta)}
  .tb__nav>.tb__link--active,.tb__nav .tb__item--active>.tb__link{
    background:var(--tcl-primaria-veu);color:var(--tcl-tinta);
    border-left:3px solid var(--tcl-primaria);padding-left:calc(12px - 3px);
  }
  .tb__nav>.tb__link--active .tb__link-icon,.tb__nav .tb__item--active>.tb__link .tb__link-icon{color:var(--tcl-primaria-tinta)}
  .tb__nav .tb__link--active::after,.tb__nav .tb__item--active>.tb__link::after{display:none}
  .tb__nav .tb__caret{margin-left:auto}
  .tb__item--dropdown{width:100%}
  .tb__menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;
    padding:0;min-width:0;max-height:0;overflow:hidden;transition:max-height .22s ease;
  }
  /* Fechado fica escondido; so o grupo aberto ganha espaco e overflow. Punha
     overflow visivel no menu FECHADO e os links dos cinco grupos apareciam
     sobrepostos em 390, 768 e 1024 (regressao critica paga no Denvo). */
  .tb__menu.tb__menu--um-nivel{display:block;width:auto;max-width:none;padding:0;overflow:hidden}
  .tb__item--open>.tb__menu,.tb__item--open>.tb__menu.tb__menu--um-nivel{max-height:none;padding:4px 0 8px 12px;overflow:visible}
  .tb__menu--um-nivel .tb__secao+.tb__secao{margin-top:8px}
  .tb__nav .tb__menu-link{min-height:44px;padding:10px 12px}
  .tb__avatar-wrap>.tb__menu--right{position:absolute;background:var(--tcl-cartao);border:1px solid var(--tcl-linha);max-height:none;display:none;right:0;left:auto;padding:8px}
  .tb__avatar-wrap.tb__item--open>.tb__menu--right{display:block}
  .tb__brand{min-height:44px}
}
@media (max-width:560px){
  .tb__inner{padding:0 12px}
  .tb__logo{height:26px}
  /* ABAIXO DE 561px A BARRA NAO CABE COM O CHIP.
     Medido em 10/10/2026: com o chip, a logomarca, o botao do menu, o sino e o
     avatar somavam 415px numa tela de 390, e o avatar ficava FORA da area
     visivel. Alvo fora da tela nao recebe clique, e o portao de qualidade pegou
     exatamente isso ("alvo COBERTO por nada no ponto do clique"). A frase do
     ensaio continua no menu da conta. */
  .tb__tenant-chip{display:none}
}
@media (max-width:480px){
  .tb__inner{padding:0 8px;gap:4px}
  .tb__brand{padding:4px}
  .tb__logo{height:24px}
  .tb__avatar{width:44px;min-width:44px;padding:0;align-items:center}
  .tb__avatar-nome,.tb__avatar-cargo{display:none}
  .tb__avatar-icon{display:block}
}
@media (max-width:360px){.tb__logo{height:22px}}
@media (prefers-reduced-motion:reduce){.tb__nav,.tb__menu,.tb__caret{transition:none}}

/* ============================================================
   KIT DE TELA
   ============================================================ */

/* ---------- cabecalho de pagina ---------- */
.pg-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;min-height:56px}
.pg-cabecalho__principal{display:flex;align-items:flex-start;gap:12px;min-width:0;flex:1 1 320px}
.pg-cabecalho__texto{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;min-width:0;min-height:40px}
.titulo-linha{display:flex;align-items:center;min-width:0}
/* O "?" tem 44 px de alvo com margem direita de -21 px (o círculo fica perto do título). Com o título
   enchendo a linha (320 px), esses 21 px saíam da linha e a página rolava: a linha os guarda por dentro. */
.titulo-linha:has(>.tcl-ajuda){padding-right:21px}
.pg-titulo{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--tcl-base);min-width:0;overflow-wrap:anywhere}
.pg-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pg-acoes{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-left:auto}
.pg-voltar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--raio-p);border:1px solid var(--tcl-borda-campo);background:var(--tcl-cartao);color:var(--tcl-base);text-decoration:none}
.pg-voltar:hover{background:var(--tcl-fundo-2);color:var(--tcl-base)}

/* ---------- "?" ----------
   Alvo de 44x44 (a caixa inteira do botao), circulo visivel de 18px. A margem
   negativa colapsa para 20x18, que e a altura exata do rotulo simples: o campo
   COM ajuda nao desce em relacao ao vizinho SEM ajuda. A margem esquerda e -3px
   e nao -13px, para sobrar 10px de respiro entre o titulo e o circulo (pedido
   do dono, 01/10/2026: "o ? esta muito proximo do titulo"). */
/* 05/11/2026 (pedido do dono, "?" mais perto do título): o círculo fica na ESQUERDA do alvo de 44 px, a 5 px do
   texto, e o resto do alvo sobra para a direita (margem negativa), nunca por cima das letras. */
.tcl-ajuda{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--alvo);height:var(--alvo);margin:-12px -21px -12px 0;padding:0 0 0 5px;border:0;border-radius:50%;background:transparent;color:var(--tcl-tinta-fraca);cursor:pointer;vertical-align:middle;font:inherit}
.tcl-ajuda__circulo{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--tcl-borda-campo);background:var(--tcl-cartao);font-size:11px;font-weight:700;line-height:1;box-shadow:0 1px 2px rgba(12,19,34,.08)}
.tcl-ajuda:hover .tcl-ajuda__circulo{background:var(--tcl-primaria-veu);border-color:var(--tcl-primaria-tinta);color:var(--tcl-base)}
.tcl-ajuda[aria-expanded="true"] .tcl-ajuda__circulo{background:var(--tcl-primaria);border-color:var(--tcl-primaria-hover);color:#fff}
.tcl-ajuda:focus-visible{outline:none}
.tcl-ajuda:focus-visible .tcl-ajuda__circulo{outline:3px solid var(--tcl-primaria-hover);outline-offset:2px}
/* O balao e FIXO dentro da janela (o app.js o posiciona): nao empurra a pagina
   e nunca cria rolagem lateral. */
.tcl-ajuda-texto{position:fixed;left:8px;top:8px;z-index:3000;display:block;width:max-content;max-width:min(420px,calc(100vw - 24px));padding:12px 14px;background:var(--tcl-cartao);color:var(--tcl-tinta);border:1px solid var(--tcl-linha);border-left:3px solid var(--tcl-primaria);border-radius:4px 10px 10px 4px;box-shadow:0 12px 32px rgba(12,19,34,.16);font-size:14px;font-weight:400;line-height:1.55;text-align:left;white-space:normal}
.campo-rotulo{display:flex;align-items:center;gap:6px;min-height:20px}
.campo-rotulo>label{flex:0 1 auto;min-width:0;margin:0}
.campo-rotulo>.tcl-ajuda{margin-left:-6px}
.tcl-kpi__fim{white-space:nowrap}
.tcl-kpi__fim>.tcl-ajuda{margin-top:-14px;margin-bottom:-14px}
.pf-secao__topo>.tcl-ajuda{margin-left:-8px}

/* ---------- chip ---------- */
.tcl-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;max-width:100%;padding:3px 10px;border-radius:999px;border:1px solid var(--tcl-linha);background:var(--tcl-cartao);color:var(--tcl-tinta-fraca);font-size:13px;font-weight:600;line-height:1.25;overflow-wrap:anywhere;text-decoration:none}
.tcl-chip--ok{background:var(--tcl-ok-veu);border-color:transparent;color:var(--tcl-ok)}
.tcl-chip--aviso{background:var(--tcl-atencao-veu);border-color:var(--tcl-atencao-borda);color:var(--tcl-atencao-texto)}
.tcl-chip--erro{background:var(--tcl-erro-veu);border-color:var(--tcl-erro-borda);color:var(--tcl-erro-texto)}
.tcl-chip--marca{background:var(--tcl-primaria-veu);border-color:transparent;color:var(--tcl-primaria-tinta)}
a.tcl-chip{position:relative;color:var(--tcl-primaria-tinta)}
a.tcl-chip:hover{border-color:var(--tcl-borda-campo);color:var(--tcl-base)}
@media (pointer:coarse){a.tcl-chip::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--alvo);transform:translateY(-50%)}}

/* ---------- "Mais acoes" ---------- */
.tcl-mais{position:relative;display:inline-flex}
.tcl-mais>summary{list-style:none;width:40px;padding:0}
.tcl-mais>summary::-webkit-details-marker{display:none}
.tcl-mais[open]>summary{background:var(--tcl-fundo-2)}
.tcl-mais__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:90;min-width:220px;padding:6px;display:flex;flex-direction:column;gap:2px;background:var(--tcl-cartao);border:1px solid var(--tcl-linha);border-radius:var(--raio);box-shadow:var(--sombra-forte)}
.tcl-mais__menu form{margin:0;display:flex}
.tcl-mais__item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--raio-p);background:transparent;color:var(--tcl-base);font-size:14.5px;font-weight:600;text-decoration:none;text-align:left;cursor:pointer;white-space:nowrap}
.tcl-mais__item:hover{background:var(--tcl-fundo)}
.tcl-mais__item--perigo,.tcl-mais__item--perigo:hover{color:var(--tcl-erro)}

/* ---------- indicador ----------
   Em cima o icone com o rotulo ao lado, embaixo o numero. */
.tcl-kpis{display:grid;grid-template-columns:repeat(var(--tcl-kpis-cols,4),minmax(0,1fr));gap:12px}
/* .grade: a grade de cartões do painel, da agenda, da ficha, do perfil, da visão do dia, do
   financeiro e do repasse. Veio do clone sem regra (05/11/2026): tudo empilhava e o
   grid-template-columns inline das telas não fazia efeito. A tela que precisa de outra largura
   mínima troca só o grid-template-columns. */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;margin:0 0 16px;min-width:0}
.grade>*{min-width:0}
/* número e dinheiro de tabela: "R$ 220,00" não parte em duas linhas; a nota embaixo quebra normal */
.tcl-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tcl-num span{white-space:normal}
.tcl-kpis--5{--tcl-kpis-cols:5}
.tcl-kpis--3{--tcl-kpis-cols:3}
/* Painel (05/11/2026): os seis números do dia numa linha; três por linha quando o conteúdo estreita. */
.tcl-kpis--6{--tcl-kpis-cols:6}
@container conteudo (max-width:1180px){.tcl-kpis--6{--tcl-kpis-cols:3}}
.painel-hoje{margin:0 0 16px}
.tcl-kpi{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:92px;padding:12px 14px;background:var(--tcl-cartao);border:1px solid var(--tcl-linha);border-radius:12px;box-shadow:0 1px 2px rgba(12,19,34,.04);color:var(--tcl-tinta);text-decoration:none}
a.tcl-kpi:hover{border-color:var(--tcl-borda-campo);box-shadow:var(--sombra);color:var(--tcl-tinta)}
.tcl-kpi--pede{box-shadow:inset 3px 0 0 var(--tcl-atencao),0 1px 2px rgba(12,19,34,.04)}
.tcl-kpi__topo{display:flex;align-items:center;gap:10px;min-width:0}
.tcl-kpi__icone{flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--tcl-primaria-veu);color:var(--tcl-primaria-tinta)}
.tcl-kpi--pede .tcl-kpi__icone{background:var(--tcl-atencao-veu);color:var(--tcl-atencao)}
.tcl-kpi__rotulo{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--tcl-tinta-fraca);min-width:0;overflow-wrap:break-word;hyphens:auto}
.tcl-kpi__valor{margin-top:auto;font-size:26px;font-weight:800;line-height:1.05;color:var(--tcl-base);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:break-word;hyphens:auto}
.tcl-kpi__apoio{margin-top:-4px;font-size:12px;line-height:1.3;color:var(--tcl-tinta-fraca)}
/* Dinheiro no indicador (05/11/2026): "R$" menor e o número inteiro numa linha. Abaixo de 900 px (dois por linha)
   o tamanho segue a largura do conteúdo: 6cqi cabe "R$ 106.945,00" de 320 a 899; valor maior ainda pode descer
   o "R$" para a linha de cima, mas o número nunca se parte. */
.tcl-kpi__valor--moeda{overflow-wrap:normal;hyphens:manual}
.tcl-kpi__moeda{font-size:.62em;font-weight:700}
@container conteudo (max-width:899px){.tcl-kpi .tcl-kpi__valor--moeda{font-size:clamp(16px,6cqi,26px)}}
@container conteudo (max-width:899px){
  .tcl-kpis,.tcl-kpis--5,.tcl-kpis--3{--tcl-kpis-cols:2;gap:10px}
  .tcl-kpis>.tcl-kpi:last-child:nth-child(odd){grid-column:1 / -1}
  /* grade só de indicadores: dois por linha, como a .tcl-kpis */
  .grade:has(>.tcl-kpi){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grade:has(>.tcl-kpi)>.tcl-kpi:last-child:nth-child(odd){grid-column:1 / -1}
}
@container conteudo (max-width:360px){.tcl-kpi{padding:10px 12px;min-height:84px}.tcl-kpi__icone{flex-basis:28px;width:28px;height:28px}.tcl-kpi__topo{gap:8px}.tcl-kpi__valor{font-size:21px}}

/* ---------- estado vazio ---------- */
.tcl-vazio{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 12px 24px;text-align:center}
.tcl-vazio .vazio{padding:0;font-size:15px;font-weight:600;color:var(--tcl-tinta)}
.tcl-vazio__apoio{font-size:14px;color:var(--tcl-tinta-fraca);max-width:52ch}
.tcl-vazio__acao{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* ============================================================
   HUB EM CAIXAS (molde: ginecolab/css/base/gn-hub.css)
   Colunas FIXAS pela variavel --tcl-hub-cols, nunca auto-fit: auto-fit e o que
   fazia 3, 4 e 2 caixas terem larguras diferentes na mesma tela.
   ============================================================ */
.tcl-hub{--tcl-hub-gap:12px;margin:0 0 4px;min-width:0}
.tcl-hub__grupo{margin:14px 0 8px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tcl-tinta-fraca);display:flex;align-items:center;min-height:28px}
.tcl-hub__grupo:first-child{margin-top:0}
.tcl-hub__grade{display:flex;flex-wrap:wrap;gap:var(--tcl-hub-gap)}
.tcl-hub__caixa{
  flex:0 0 calc((100% - (var(--tcl-hub-cols,5) - 1) * var(--tcl-hub-gap)) / var(--tcl-hub-cols,5));
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;
  min-width:0;min-height:112px;padding:16px 12px 14px;
  border:1px solid var(--tcl-borda-campo);border-radius:12px;background:var(--tcl-cartao);
  color:var(--tcl-tinta);font:inherit;text-align:center;text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.tcl-hub__caixa:hover,.tcl-hub__caixa.is-ativo{background:var(--tcl-primaria-veu);border-color:var(--tcl-primaria-tinta);color:var(--tcl-primaria-tinta);box-shadow:var(--sombra)}
.tcl-hub__caixa:focus-visible{outline:3px solid var(--tcl-primaria);outline-offset:2px}
.tcl-hub__ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border-radius:10px;background:var(--tcl-primaria-veu);color:var(--tcl-primaria-tinta)}
.tcl-hub__caixa:hover .tcl-hub__ic,.tcl-hub__caixa.is-ativo .tcl-hub__ic{background:var(--tcl-cartao)}
/* Nome e apoio INTEIROS: sem reticencias, palavra nunca partida. O titulo e
   quem nomeia o alvo; o apoio e texto secundario. */
.tcl-hub__nome,.tcl-hub__apoio{max-width:100%;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:manual}
.tcl-hub__nome{font-size:14px;font-weight:600;line-height:1.25}
.tcl-hub__apoio{font-size:12px;line-height:1.35;color:var(--tcl-tinta-fraca)}
.tcl-hub__caixa:hover .tcl-hub__apoio,.tcl-hub__caixa.is-ativo .tcl-hub__apoio{color:inherit}
.tcl-hub__num{padding:1px 8px;border-radius:999px;background:var(--tcl-primaria-veu);color:var(--tcl-primaria-tinta);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
@container conteudo (max-width:900px){
  .tcl-hub__caixa{min-height:104px;gap:7px}
  .tcl-hub__ic{width:40px;height:40px}
}
@container conteudo (max-width:600px){
  .tcl-hub{--tcl-hub-gap:10px}
  .tcl-hub__caixa{flex-basis:calc((100% - var(--tcl-hub-gap)) / 2);min-height:98px;padding:12px 8px}
  /* Numero impar de caixas: a ultima ocupa a fileira inteira, sem buraco. */
  .tcl-hub__caixa:last-child:nth-child(odd){flex-basis:100%}
}

/* ---------- cartoes ---------- */
.card{background:var(--tcl-cartao);border:1px solid var(--tcl-linha);border-radius:var(--raio);box-shadow:var(--sombra);min-width:0}
.card-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:52px;padding:10px 16px;border-bottom:1px solid var(--tcl-linha)}
.card-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-body{padding:16px}
.card-header+.card-body{padding-top:14px}
.card-titulo{font-size:17px;font-weight:700;color:var(--tcl-base)}
.card-subtitulo{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tcl-tinta-fraca);margin:0 0 10px}

/* ---------- grade de horario (pages/turma_ficha.php) ----------
   Matriz de faixa de hora por dia da semana. A tabela vira cartao abaixo de
   900px como as outras, e por isso cada celula leva `data-rotulo` com o dia:
   sem ele, no celular, a pessoa ve a disciplina e nao sabe de que dia e. */
.grade-horario{table-layout:fixed}
.grade-horario th[scope=col]{text-align:center;font-size:11px}
.grade-horario__dia-curto{display:none}
.grade-horario__faixa{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12.5px;
  background:var(--tcl-fundo);text-align:left;vertical-align:top}
.grade-horario__ate{display:block;font-size:10.5px;color:var(--tcl-tinta-fraca);font-weight:500}
.grade-horario td{vertical-align:top;padding:6px}
.grade-horario__aula{display:block;padding:6px 8px;border-radius:var(--raio-p);
  background:var(--tcl-primaria-veu);border-left:3px solid var(--tcl-primaria);
  font-size:12.5px;line-height:1.35}
.grade-horario__aula + .grade-horario__aula{margin-top:4px}
.grade-horario__disc{display:block;font-weight:700;color:var(--tcl-base);overflow-wrap:anywhere}
.grade-horario__sala{display:block;font-size:11px;color:var(--tcl-tinta-fraca)}
@media (max-width:1279px){
  .grade-horario__dia-largo{display:none}
  .grade-horario__dia-curto{display:inline}
}
.card-header .card-titulo{font-size:15.5px}
.card-sub{color:var(--tcl-tinta-fraca);font-size:14px;margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.card-sub a{color:var(--tcl-primaria-tinta);font-weight:600}
.card-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--tcl-linha);background:var(--tcl-fundo);border-radius:0 0 var(--raio) var(--raio)}
.vazio{color:var(--tcl-tinta-fraca);padding:22px 0;text-align:center;font-size:14.5px}
.card-body>.vazio{padding:12px 0}
.card-link{font-size:13.5px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.card-link:hover{text-decoration:underline}

/* grades */
.grade-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* `.grade-4` saiu em 10/10/2026 e `.grade-3` em 12/10/2026 (tarde), pela mesma
   regra: zero uso medido pela varredura de CSS morto. CSS que nunca entrou em
   tela nenhuma e peso que todo navegador baixa. */
@container conteudo (max-width:899px){.grade-2{grid-template-columns:1fr}}

/* ---------- painel: listas curtas lado a lado ---------- */
.tcl-painel-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@container conteudo (max-width:899px){.tcl-painel-grade{grid-template-columns:1fr}}
.tcl-lista{list-style:none;margin:0;padding:0}
.tcl-lista>li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:5px 16px;border-top:1px solid var(--tcl-linha)}
.tcl-lista>li:first-child{border-top:0}
.tcl-lista__principal{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.tcl-lista__nome{font-weight:600;color:var(--tcl-base);overflow-wrap:anywhere;text-decoration:none}
a.tcl-lista__nome{color:var(--tcl-primaria-tinta)}
a.tcl-lista__nome:hover{color:var(--tcl-base);text-decoration:underline}
.tcl-lista__sub{font-size:12.5px;color:var(--tcl-tinta-fraca);overflow-wrap:anywhere}
.tcl-lista__meta{flex:none;font-size:13px;color:var(--tcl-tinta-fraca);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tcl-lista-mais{padding:8px 16px 12px;font-size:13px;color:var(--tcl-tinta-fraca);border-top:1px solid var(--tcl-linha)}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 16px;border-radius:var(--raio-p);border:1px solid transparent;
  font-weight:700;font-size:14.5px;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.btn svg{flex:none}
/* Texto branco sobre a TINTA #a21caf (7,00:1). Branco sobre a primaria pura
   daria 5,17:1, que passa, mas nao com folga em peso pequeno. */
.btn-primario{background:var(--tcl-botao);color:var(--tcl-botao-texto);border-color:var(--tcl-botao)}
.btn-primario:hover{background:var(--tcl-botao-hover);border-color:var(--tcl-botao-hover);color:var(--tcl-botao-texto)}
.btn-secundario{background:var(--tcl-cartao);color:var(--tcl-base);border-color:var(--tcl-borda-campo)}
.btn-secundario:hover{background:var(--tcl-fundo);color:var(--tcl-base)}
.btn-perigo{background:var(--tcl-cartao);color:var(--tcl-erro);border-color:var(--tcl-erro-borda)}
.btn-perigo:hover{background:var(--tcl-erro-veu);color:var(--tcl-erro)}
.btn-link{background:transparent;color:var(--tcl-primaria-tinta);border-color:transparent;padding:0 8px;font-weight:600}
.btn-link:hover{color:var(--tcl-base);background:var(--tcl-fundo)}
.btn-pequeno{min-height:44px;min-width:44px;padding:0 12px;font-size:13.5px;gap:6px}
.btn-bloco{width:100%}
.btn[disabled],.btn[aria-disabled="true"],.btn.ocupado{opacity:.55;cursor:not-allowed}
.link-forte{color:var(--tcl-base);font-weight:700;text-decoration:none}
.link-forte:hover{color:var(--tcl-primaria-tinta);text-decoration:underline}
/* Link de titulo na tabela: caixa inteira. Inline, o nome que quebra em duas
   linhas deixava o centro da caixa no vao entre as linhas e o clique acertava a
   celula, nao o link. */
.tabela td .link-forte{display:inline-block;max-width:100%}
.rot-curto{display:none}
.acao-rotulo{display:none}

/* ---------- barra de filtros ---------- */
.tcl-filtros{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.tcl-filtros .tcl-busca{flex:1 1 240px;max-width:380px;min-height:42px;padding:8px 12px;border:1px solid var(--tcl-borda-campo);border-radius:var(--raio-p);background:var(--tcl-cartao);color:var(--tcl-tinta);font-size:16px}
.tcl-filtros .tcl-sel{width:auto;flex:0 1 auto;min-width:160px}
.tcl-filtros .btn{flex:none}
.tcl-filtros__limpar{margin-left:2px}

/* ---------- seletor da casa ----------
   O <select> ORIGINAL continua no formulario com tamanho ZERO: e ele que guarda
   o valor e e ele que o GET envia. O botao mostra "Rotulo: valor"; a lista
   nasce no clique, pendurada no <body>, e rola por dentro. */
.tcl-sel{position:relative;display:flex;width:100%;min-width:0}
.tcl-sel__nativo,.tcl-sel select.tcl-sel__nativo{
  position:absolute !important;width:0 !important;height:0 !important;min-width:0 !important;min-height:0 !important;
  margin:0 !important;padding:0 !important;border:0 !important;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  pointer-events:none;white-space:nowrap;
}
.tcl-sel__btn{position:relative;display:flex;align-items:center;flex-wrap:wrap;column-gap:6px;row-gap:2px;width:100%;min-width:0;min-height:42px;padding:6px 32px 6px 12px;border:1px solid var(--tcl-borda-campo);border-radius:var(--raio-p);background:var(--tcl-cartao);color:var(--tcl-tinta);font:inherit;font-size:14px;line-height:1.3;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.tcl-sel__btn:hover{background:var(--tcl-fundo-2)}
.tcl-sel.is-aberto>.tcl-sel__btn{border-color:var(--tcl-base)}
.tcl-sel.is-filtrado>.tcl-sel__btn{background:var(--tcl-primaria-veu);border-color:var(--tcl-primaria-tinta)}
.tcl-sel__rotulo{flex:0 0 auto;color:var(--tcl-tinta-fraca);font-weight:500;white-space:nowrap}
.tcl-sel__valor{flex:0 1 auto;min-width:0;color:var(--tcl-tinta);font-weight:600;white-space:normal;overflow-wrap:break-word}
.tcl-sel__seta{position:absolute;top:50%;right:14px;width:7px;height:7px;border-right:1.5px solid var(--tcl-tinta-fraca);border-bottom:1.5px solid var(--tcl-tinta-fraca);transform:translateY(-70%) rotate(45deg);transition:transform .15s ease}
.tcl-sel.is-aberto .tcl-sel__seta{transform:translateY(-20%) rotate(225deg);border-color:var(--tcl-base)}
.tcl-sel__painel{position:fixed;z-index:10050;display:flex;flex-direction:column;min-width:200px;max-width:min(360px,calc(100vw - 16px));overflow:hidden;border:1px solid var(--tcl-linha);border-radius:var(--raio);background:var(--tcl-cartao);color:var(--tcl-tinta);box-shadow:0 0 0 1px rgba(12,19,34,.06),0 10px 24px -8px rgba(12,19,34,.28)}
.tcl-sel__lista{display:block;max-height:var(--tcl-sel-max-h,320px);margin:0;padding:4px 0;overflow-y:auto;overscroll-behavior:contain;outline:none}
.tcl-sel__opt{display:flex;align-items:center;min-height:44px;padding:6px 14px;color:var(--tcl-tinta);font-size:14px;font-weight:500;line-height:1.3;cursor:pointer}
.tcl-sel__opt:not([hidden])+.tcl-sel__opt:not([hidden]){border-top:1px solid var(--tcl-fundo-2)}
.tcl-sel__opt:hover{background:var(--tcl-fundo-2)}
.tcl-sel__opt:focus{outline:none;background:var(--tcl-fundo-2);box-shadow:inset 0 0 0 2px var(--tcl-base)}
.tcl-sel__opt[aria-selected="true"]{background:var(--tcl-primaria-veu);font-weight:600;box-shadow:inset 3px 0 0 var(--tcl-primaria)}
@media (pointer:fine){.tcl-sel__opt{min-height:36px}}

/* ---------- formularios ---------- */
.campos{display:flex;flex-direction:column;gap:16px}
.grade-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px 16px}
.campo{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.campo-largura-total{grid-column:1 / -1}
/* O rotulo do campo e o do RODAPE do campo (.campo-rotulo), nao qualquer label
   que caia dentro de .campo: o seletor largo (0-1-1) ganhava de .checkbox
   (0-1-0) e obrigava um `!important` no peso da fonte da caixa de marcar. */
.campo>.campo-rotulo label{font-size:13.5px;font-weight:700;color:var(--tcl-base)}
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="date"],input[type="month"],input[type="time"],input[type="search"],input[type="file"],select,textarea{
  width:100%;min-height:42px;padding:8px 12px;border:1px solid var(--tcl-borda-campo);border-radius:var(--raio-p);
  background:var(--tcl-campo-fundo);color:var(--tcl-tinta);font-size:16px;
}
/* O seletor de mes da barra de filtros (mensalidades, fechamento) e um campo
   do tamanho do conteudo, nao da linha inteira. */
.tcl-filtros input[type="month"]{width:auto;flex:0 1 auto;min-width:150px}
select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
textarea{min-height:88px;resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--tcl-base);box-shadow:0 0 0 3px var(--tcl-primaria-veu)}
input::placeholder,textarea::placeholder{color:var(--tcl-placeholder)}
.checkbox{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;cursor:pointer}
/* Campo recusado pela validacao: a frase no alto diz O QUE falta, a moldura diz
   ONDE. Marcado pelo crud.js ao reabrir a janela com o que foi digitado. */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--tcl-erro);box-shadow:0 0 0 3px rgba(190,48,48,.12);
}
.checkbox input{width:20px;height:20px;min-height:0;accent-color:var(--tcl-primaria-tinta)}
/* .campo__dica é a grafia das frentes de 04/11 (11 telas): mesma regra. */
.campo-dica,.campo__dica{font-size:12.5px;line-height:1.45;color:var(--tcl-tinta-fraca)}
.campo__dica{margin:4px 0 0}
/* Grupo de campos com legenda (janela do cadastro declarativo): o fieldset e o
   agrupamento que o leitor de tela anuncia sozinho, e a legenda curta deixa a
   janela de muitos campos legivel por blocos. */
.campo-grupo{border:1px solid var(--tcl-linha);border-radius:var(--raio);padding:12px 14px 14px;margin:0;min-width:0}
.campo-grupo>legend{padding:0 6px;margin-left:-6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tcl-tinta-fraca)}
.campo input[readonly]{background:var(--tcl-fundo);color:var(--tcl-tinta-fraca);cursor:default}
.inline-form{display:inline-flex;margin:0}
.barra-form{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}

/* ---------- alertas e selos ---------- */
.alert{padding:12px 16px;border-radius:var(--raio);border:1px solid var(--tcl-linha);background:var(--tcl-cartao);font-size:14.5px}
.alert-erro{background:var(--tcl-erro-veu);border-color:var(--tcl-erro-borda);color:var(--tcl-erro-texto)}
.alert-aviso{background:var(--tcl-atencao-veu);border-color:var(--tcl-atencao-borda);color:var(--tcl-atencao-texto)}
.alert-ok{background:var(--tcl-ok-veu);border-color:rgba(21,128,61,.28);color:var(--tcl-ok)}
.alert-info{background:var(--tcl-info-veu);border-color:var(--tcl-linha);color:var(--tcl-info-texto)}
.alert a{font-weight:700}
/* .aviso: o mesmo bloco de recado com o nome das frentes D e E (aviso--erro, --atencao, --info) */
.aviso{display:block;margin:0 0 14px;padding:12px 16px;border-radius:var(--raio);border:1px solid var(--tcl-linha);background:var(--tcl-cartao);font-size:14.5px;overflow-wrap:anywhere}
.aviso--erro{background:var(--tcl-erro-veu);border-color:var(--tcl-erro-borda);color:var(--tcl-erro-texto)}
.aviso--atencao{background:var(--tcl-atencao-veu);border-color:var(--tcl-atencao-borda);color:var(--tcl-atencao-texto)}
.aviso--info{background:var(--tcl-info-veu);border-color:var(--tcl-linha);color:var(--tcl-info-texto)}
.aviso a{font-weight:700}
/* A familia .badge* (5 regras) saiu em 12/10/2026 (tarde): o selo da casa e o
   eduChip (.tcl-chip) desde o nascimento, e nenhuma tela jamais usou .badge.
   Medido pela varredura de CSS morto antes de remover. */

/* ---------- tabelas ---------- */
.tabela-scroll,.tabela-caixa{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.card-body.tabela-scroll{padding:0}
/* Tabela de muitas colunas (relatório clínico, 8): o cabeçalho quebra em duas linhas em vez de empurrar a página. */
.tabela--cabecalho-quebra th{white-space:normal;min-width:7em}
.tabela{width:100%;border-collapse:collapse;font-size:14.5px}
.tabela th,.tabela td{padding:10px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--tcl-linha)}
.tabela th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--tcl-tinta-fraca);font-weight:700;background:var(--tcl-fundo);white-space:nowrap}
/* Dois-pontos no cabecalho pelo ::after, nao copiados em cada <th>: assim
   valem tambem na tabela que nascer depois, e o texto do cabecalho segue sendo
   so o nome da coluna (que e o que a exportacao usa). */
.tabela thead th::after{content:":"}
.tabela thead th:empty::after{content:none}
.tabela thead th:has(.oculto)::after{content:none}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:hover td{background:var(--tcl-fundo)}
.tabela td.acoes{text-align:right;white-space:nowrap}
.tabela td.acoes .btn,.tabela td.acoes .inline-form{vertical-align:middle;margin-left:6px}
.tabela .celula-sub{display:block;margin-top:2px;font-size:12.5px;font-weight:400;line-height:1.35;color:var(--tcl-tinta-fraca);overflow-wrap:anywhere}
.tabela td.celula-data{white-space:nowrap}
.tabela tfoot td{font-weight:700;background:var(--tcl-fundo);border-top:2px solid var(--tcl-linha)}

/* Tabela vira CARTAO abaixo de 900px da largura do CONTEUDO. UM mecanismo no
   sistema: data-rotulo em cada td, escrito pelo componente eduTabela a partir
   do cabecalho. A primeira celula e o titulo na largura toda, os dados vao em
   PARES e as acoes numa faixa no pe. */
@container conteudo (max-width:899px){
  .tabela-scroll,.tabela-caixa{overflow:visible}
  .card-body.tabela-scroll{padding:0 12px 12px}
  .tabela,.tabela tbody{display:block;width:100%}
  .tabela thead{display:none}
  .tabela tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-top:12px;padding:12px 14px;border:1px solid var(--tcl-linha);border-radius:var(--raio);background:var(--tcl-cartao);box-shadow:var(--sombra)}
  .tabela td{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;min-width:0;padding:0;border:0;text-align:left;overflow-wrap:anywhere;font-size:14px}
  .tabela td[data-rotulo]::before{content:attr(data-rotulo) ":";font-size:11.5px;font-weight:600;line-height:1.4;letter-spacing:.02em;color:var(--tcl-tinta-fraca)}
  .tabela td:first-child{grid-column:1 / -1;padding-bottom:10px;border-bottom:1px solid var(--tcl-linha);font-weight:700;font-size:15px}
  .tabela td:first-child::before{content:none}
  .tabela td.acoes{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--tcl-linha);white-space:normal}
  .tabela td.acoes::before{content:none}
  .tabela td.acoes .btn,.tabela td.acoes .inline-form{flex:1 1 auto;margin-left:0}
  .tabela td.acoes .acao-rotulo{display:inline}
  .tabela td.celula-larga{grid-column:1 / -1}
  .tabela td:empty{display:none}
  .tabela tbody tr:hover td{background:transparent}
  .tabela tfoot{display:block}
  .tabela tfoot tr{grid-template-columns:1fr}
}
/* Entre 600 e 899px de conteudo (tablet em pe) os cartoes vao em DUAS colunas:
   um por linha na largura toda dobrava a altura da lista. */
@container conteudo (min-width:600px) and (max-width:899px){
  .tabela tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;align-items:start}
}

/* ---------- pular para o conteudo ----------
   Fica fora da tela ate receber o foco. E o primeiro elemento focavel da
   pagina: sem ele, quem usa teclado percorre os 27 itens do menu em TODA tela
   antes de chegar ao conteudo. */
.pular-conteudo{
  position:absolute;left:8px;top:-60px;z-index:2000;
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  background:var(--tcl-botao);color:var(--tcl-botao-texto);border-radius:0 0 var(--raio-p) var(--raio-p);
  font-weight:700;text-decoration:none;transition:top .15s ease;
}
.pular-conteudo:focus{top:0;color:#fff}

/* ---------- busca da barra superior ---------- */
.tb__busca{position:relative;display:flex;align-items:center;margin-right:4px}
.tb__busca-ic{position:absolute;left:10px;display:inline-grid;place-items:center;color:var(--tcl-apoio);pointer-events:none}
.tb__busca input{
  width:180px;min-height:38px;padding:6px 10px 6px 32px;border-radius:var(--raio-p);
  border:1px solid var(--tcl-linha-escura);background:rgba(248,250,252,.08);color:#fff;font-size:14px;
}
.tb__busca input::placeholder{color:var(--tcl-apoio)}
.tb__busca input:focus{outline:none;border-color:var(--tcl-primaria);background:rgba(248,250,252,.14)}
@media (max-width:1279px){.tb__busca input{width:140px}}
@media (max-width:1024px){.tb__busca{display:none}}

/* ---------- olho da senha ----------
   O botao ocupa a altura do campo e 48px de largura. Mostrar a senha e o que
   evita a terceira tentativa errada em teclado de celular. */
.campo-senha{position:relative;display:block;width:100%}
.campo-senha>input{width:100%;padding-right:52px}
.campo-senha__olho{
  position:absolute;top:0;right:0;bottom:0;width:48px;min-height:0;display:flex;align-items:center;
  justify-content:center;padding:0;margin:0;border:0;background:transparent;color:var(--tcl-tinta-fraca);cursor:pointer;
  border-radius:0 var(--raio-p) var(--raio-p) 0;
}
.campo-senha__olho:hover,.campo-senha__olho[aria-pressed="true"]{color:var(--tcl-base)}
.campo-senha__olho:focus-visible{outline:3px solid var(--tcl-primaria);outline-offset:-3px}

/* ---------- chamada (diario de classe) ----------
   Meta do dono: 30 estudantes em menos de 30 s no celular. Por isso a linha
   inteira e area de toque e as tres situacoes ficam lado a lado, sem menu
   suspenso: menu custa dois toques por estudante. */
.tabela-chamada th:not(:first-child){width:112px;text-align:center}
.tabela-chamada td.celula-radio{text-align:center}
.radio-alvo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;min-width:44px;cursor:pointer;border-radius:var(--raio-p)}
.radio-alvo:hover{background:var(--tcl-fundo-2)}
.radio-alvo input{width:22px;height:22px;min-height:0;accent-color:var(--tcl-primaria-tinta);cursor:pointer}
.radio-alvo__texto{display:none}
.radio-alvo:has(input:checked){background:var(--tcl-primaria-veu)}
@container conteudo (max-width:899px){
  /* No cartao o nome ocupa a fileira inteira e as tres opcoes ficam numa so,
     com o rotulo visivel (sem o cabecalho da tabela para explicar). */
  .tabela-chamada tr{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px}
  .tabela-chamada td:first-child{grid-column:1 / -1}
  .tabela-chamada td.celula-radio{align-items:center}
  .tabela-chamada td.celula-radio::before{content:none}
  .radio-alvo{flex-direction:column;gap:2px;padding:4px 0;border:1px solid var(--tcl-linha)}
  .radio-alvo__texto{display:block;font-size:11.5px;font-weight:600;color:var(--tcl-tinta-fraca);text-align:center}
  .radio-alvo:has(input:checked) .radio-alvo__texto{color:var(--tcl-primaria-tinta)}
}

/* ---------- paginador ---------- */
.tcl-paginador{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:12px 0 2px}
.tcl-paginador__pos{font-size:13.5px;color:var(--tcl-tinta-fraca);font-variant-numeric:tabular-nums}

/* ---------- listas de detalhe ---------- */
.lista-detalhes{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:12px 22px}
.lista-detalhes>div{min-width:0}
.lista-detalhes dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--tcl-tinta-fraca);font-weight:700}
.lista-detalhes dd{margin:3px 0 0;font-size:15px;color:var(--tcl-base);overflow-wrap:anywhere}

/* ---------- janela da casa ---------- */
.tcl-jan,.tcl-cfg-jan{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.tcl-jan__fundo,.tcl-cfg-jan__fundo{position:absolute;inset:0;background:var(--tcl-veu-escuro)}
.tcl-jan__caixa,.tcl-cfg-jan__caixa{position:relative;display:flex;flex-direction:column;width:100%;max-width:620px;max-height:calc(100vh - 32px);background:var(--tcl-cartao);border-radius:14px;box-shadow:var(--sombra-forte);overflow:hidden}
/* `--larga` nao tem uso hoje e NAO e codigo morto: e a implementacao da opcao
   `largura => 'larga'` que o eduJanela() aceita por contrato. Tirar faria o
   parametro declarado virar atributo sem efeito, que e pior que regra parada. */
.tcl-jan__caixa--larga,.tcl-cfg-jan__caixa{max-width:880px}
.tcl-jan__topo,.tcl-cfg-jan__topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--tcl-linha);flex:none}
.tcl-jan__titulo,.tcl-cfg-jan__titulo{font-size:17px;font-weight:700;color:var(--tcl-base);min-width:0;overflow-wrap:anywhere;display:flex;align-items:center}
.tcl-jan__fechar,.tcl-cfg-jan__fechar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--raio-p);background:transparent;color:var(--tcl-tinta-fraca);cursor:pointer}
.tcl-jan__fechar:hover,.tcl-cfg-jan__fechar:hover{background:var(--tcl-fundo-2);color:var(--tcl-base)}
.tcl-jan__corpo,.tcl-cfg-jan__corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px}
.tcl-jan__rodape,.tcl-cfg-jan__rodape{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--tcl-linha);background:var(--tcl-fundo)}
.tcl-jan__rodape:empty,.tcl-cfg-jan__rodape:empty{display:none}
body.tcl-jan-aberta{overflow:hidden}
@media (max-width:700px){
  .tcl-jan,.tcl-cfg-jan{padding:0;align-items:stretch}
  .tcl-jan__caixa,.tcl-cfg-jan__caixa{max-width:none;max-height:100vh;height:100vh;border-radius:0}
  .tcl-jan__rodape .btn,.tcl-cfg-jan__rodape .btn{flex:1 1 auto}
}

/* ---------- configuracoes: secao dentro da janela ---------- */
.config-secao{display:none}
.config-secao--na-janela{display:block}
.config-secao--na-janela .section-header{display:none}

/* ---------- funil (kanban) ----------
   MEDIDO EM 10/10/2026, e e uma armadilha que custou meia hora: o quadro rola
   na horizontal DE PROPOSITO, dentro da propria caixa, e `overflow-x: auto`
   deveria bastar. Nao basta. Com o quadro dentro de um ancestral que e
   container de consulta (`container-type: inline-size` no .app-conteudo), o
   Chromium continua somando a largura das colunas na AREA ROLAVEL DA RAIZ: a
   pagina inteira passava a rolar 925 px em 390 px de tela, com a barra do topo
   deslizando junto. Medido: scrollWidth do documento 1315 contra 390 de janela,
   e window.scrollTo(3000,0) parava em 925.
   O que NAO resolve (testado um a um): overflow-x hidden, overflow clip,
   overflow-x hidden no body, no main, e tirar o scroll-snap.
   O que resolve: `contain: paint`, que tira os descendentes da area rolavel do
   ancestral. A caixa ja cortava no mesmo lugar, entao nada muda na tela. */
.kanban{display:flex;gap:12px;overflow-x:auto;contain:paint;padding-bottom:10px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.kanban-coluna{flex:0 0 260px;width:260px;background:var(--tcl-fundo-2);border:1px solid var(--tcl-linha);border-radius:var(--raio);display:flex;flex-direction:column;max-height:70vh;scroll-snap-align:start}
.kanban-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;font-weight:700;font-size:14px;color:var(--tcl-base);border-bottom:1px solid var(--tcl-linha)}
.kanban-contagem{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--tcl-cartao);border:1px solid var(--tcl-linha);font-size:12px;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.kanban-lista{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:80px;flex:1 1 auto}
.kanban-card{background:var(--tcl-cartao);border:1px solid var(--tcl-linha);border-radius:var(--raio-p);padding:10px 12px;box-shadow:var(--sombra)}
.kanban-card-nome{font-weight:700;color:var(--tcl-base);overflow-wrap:anywhere}
.kanban-card-nome a{position:relative;display:inline-block;color:var(--tcl-base);text-decoration:none}
/* Alvo de toque de 44px pela AREA sensivel, nao pela altura do texto: o
   nome no cartao mede 19px de altura e a WCAG 2.5.5 cobra os dois lados.
   Engordar a linha empurraria o cartao inteiro; o ::after centrado da a
   area sem mexer no desenho. */
.kanban-card-nome a::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--alvo);transform:translateY(-50%)}
.kanban-card-nome a:hover{color:var(--tcl-primaria-tinta);text-decoration:underline}
.kanban-card-info{font-size:12.5px;color:var(--tcl-tinta-fraca);margin-top:2px;overflow-wrap:anywhere}
.kanban-card-acoes{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.kanban-mover{min-height:44px;font-size:16px;padding:4px 28px 4px 8px;background-position:right 8px center;width:100%;margin-top:6px}
.kanban-vazio{color:var(--tcl-tinta-fraca);font-size:13px;text-align:center;padding:16px 8px;border:1px dashed var(--tcl-borda-campo);border-radius:var(--raio-p)}

/* ---------- aviso flutuante ---------- */
.toast-area{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:4000;display:flex;flex-direction:column;gap:8px;width:min(480px,calc(100% - 32px))}
.toast{padding:12px 16px;border-radius:var(--raio);background:var(--tcl-base);color:var(--tcl-sobre-escuro);box-shadow:var(--sombra-forte);font-size:14.5px;display:flex;align-items:center;gap:10px}
.toast.erro{background:var(--tcl-erro-texto)}
.toast.ok{border-left:4px solid var(--tcl-primaria)}

/* ---------- tela de entrada ---------- */
.login-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:var(--tcl-base);
  background-image:radial-gradient(ellipse at 20% 0%,rgba(192,38,211,.20),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(192,38,211,.10),transparent 50%);
}
.login-body{padding-top:24px}
/* O embrulho da entrada: no celular e so o cartao; do desktop para cima entra o
   painel da marca ao lado (12/10/2026, tarde). O painel e decorativo
   (aria-hidden): leitor de tela vai direto ao formulario. */
.login-wrap{display:flex;align-items:center;justify-content:center;gap:56px;width:100%;max-width:1000px;min-width:0}
.login-painel{display:none}
@media (min-width:980px){
  .login-painel{display:flex;flex-direction:column;gap:22px;flex:1 1 440px;max-width:470px;min-width:0}
  .login-painel__logo{height:40px;width:auto;align-self:flex-start}
  .login-painel h2{margin:0;font-size:26px;line-height:1.35;font-weight:800;color:var(--tcl-sobre-escuro)}
  .login-painel ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
  .login-painel li{display:flex;gap:10px;align-items:flex-start;color:var(--tcl-apoio);font-size:15px;line-height:1.55}
  .login-painel li svg{flex:none;margin-top:3px;color:var(--tcl-primaria-clara)}
  .login-painel__site{color:var(--tcl-primaria-clara);font-weight:700;font-size:14px;text-decoration:none}
  .login-painel__site:hover{text-decoration:underline}
  /* Com o painel na tela, a marca dentro do cartao duplicaria logomarca e
     frase: o cartao fica so com o formulario. O h1 (que no celular e so de
     leitor de tela) VOLTA a aparecer aqui, senao o cartao comeca abrupto no
     rotulo "E-mail:". */
  .login-wrap .login-card .login-logo,
  .login-wrap .login-card .login-brand p{display:none}
  .login-wrap .login-card .login-brand{gap:0;align-items:flex-start;text-align:left}
  .login-wrap .login-card .login-brand h1{position:static;width:auto;height:auto;overflow:visible;
    clip:auto;margin:0;font-size:20px;font-weight:800;color:var(--tcl-tinta)}
}
.login-card{width:100%;max-width:420px;background:var(--tcl-cartao);border-radius:16px;padding:32px 30px 30px;box-shadow:var(--sombra-forte);display:flex;flex-direction:column;gap:18px}
.login-card--largo{max-width:640px}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.login-logo{height:44px;width:auto}
.login-brand h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.login-brand p{color:var(--tcl-tinta-fraca);font-size:14.5px}
.login-brand--titulo h1{position:static;width:auto;height:auto;overflow:visible;clip:auto;margin-top:6px;font-size:21px;font-weight:700;color:var(--tcl-tinta)}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-card .btn-bloco{min-height:46px;margin-top:4px}
.login-rodape{text-align:center;font-size:12.5px;color:var(--tcl-tinta-fraca)}
.login-acoes{text-align:center;font-size:13.5px;margin:0}
.login-acoes a{color:var(--tcl-primaria-tinta);font-weight:700}
.texto-legal{max-height:min(46vh,380px);overflow-y:auto;border:1px solid var(--tcl-linha);border-radius:var(--raio);padding:16px 18px;background:var(--tcl-fundo);font-size:14px;line-height:1.6;color:var(--tcl-tinta)}
.texto-legal h2{font-size:14.5px;margin:14px 0 4px;color:var(--tcl-base)}
.texto-legal h2:first-child{margin-top:0}
.texto-legal p{margin:0 0 8px}
.aceite{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:12px 14px;border:1px solid var(--tcl-borda-campo);border-radius:10px;background:var(--tcl-cartao);font-weight:600;line-height:1.45;color:var(--tcl-tinta);cursor:pointer}
.aceite input{flex:none;width:22px;height:22px;min-height:0;margin:1px 0 0;accent-color:var(--tcl-primaria-tinta)}
/* Aviso de privacidade (05/11/2026): zero rolagem da página, como toda entrada (rolava 256 px em 320x568, com o
   botão de aceite fora da tela). O cartão cabe na altura da janela e o texto legal fica com o espaço que sobra,
   rolando por dentro. Em tela baixa a frase de apoio sai; no telefone o respiro e a logomarca encolhem. */
.login-body:has(.login-card--aviso){height:100vh;height:100dvh;min-height:0;padding:16px}
.login-card--aviso{max-height:100%;min-height:0;padding:24px 28px;gap:14px}
.login-card--aviso .login-brand{gap:4px}
.login-card--aviso .texto-legal{flex:1 1 auto;min-height:120px;max-height:none}
@media (max-width:560px){
  .login-body:has(.login-card--aviso){padding:10px}
  .login-card--aviso{padding:18px 16px;gap:10px;border-radius:14px}
  .login-card--aviso .login-logo{height:34px}
  .login-card--aviso .login-brand h1{font-size:19px;margin-top:2px}
  .login-card--aviso .texto-legal{padding:12px 14px;font-size:13.5px}
  .login-card--aviso .aceite{padding:10px 12px;font-size:14px}
}
@media (max-height:720px){.login-card--aviso .login-brand p{display:none}}
.aceite:has(input:checked){border-color:var(--tcl-primaria-tinta);background:var(--tcl-primaria-veu)}

/* ============================================================
   TELAS DE ENTRADA (frente A, 04/11/2026): /entrar, /recuperar-senha,
   /convite (convite e senha nova) e /escolher-clinica. Moldura em
   includes/entrada_tela.php.

   Modelo da casa: a entrada do Denvo (_modelo-de-login.md). Acima de 860 px,
   painel da marca e cartao; abaixo, so o cartao com a logomarca em cima.
   ZERO ROLAGEM de 320x568 a 1920x1080, por media query de ALTURA: quando a
   janela encurta, cede o secundario nesta ordem: respiro, selos, link
   "Conheca", subtitulo. Campo, botao, "Esqueceu a senha?" e ajuda ficam.
   Cartao centralizado com `align-items: safe center`: centro puro corta o
   topo sem volta quando o cartao passa da janela.

   As classes login-* acima continuam: o aviso de privacidade
   (includes/consentimento.php) ainda usa elas.
   ============================================================ */
.ent{
  margin:0;min-height:100vh;min-height:100dvh;color:var(--tcl-tinta);background-color:var(--tcl-base);
  background-image:radial-gradient(ellipse at 12% 0%,rgba(192,38,211,.28),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(192,38,211,.13),transparent 50%);
  background-attachment:fixed;
}
.ent__tela{
  box-sizing:border-box;min-height:100vh;min-height:100dvh;max-width:1180px;margin:0 auto;
  display:flex;align-items:safe center;justify-content:center;gap:clamp(40px,6vw,96px);
  padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));
}
.ent__painel{display:none}
.ent__lado{display:flex;justify-content:center;width:100%;max-width:430px;min-width:0}
.ent__lado--largo{max-width:560px}
.ent__cartao{
  width:100%;min-width:0;background:var(--tcl-cartao);border-radius:18px;padding:30px 28px 20px;
  box-shadow:var(--tcl-sombra-cartao);display:flex;flex-direction:column;gap:16px;
}
.ent__logo{display:flex;justify-content:center}
.ent__logo img{height:34px;width:auto}
.ent__titulo{font-size:22px;font-weight:800;letter-spacing:-.02em;text-align:center;color:var(--tcl-tinta)}
.ent__sub{margin-top:-8px;font-size:14.5px;line-height:1.45;text-align:center;color:var(--tcl-tinta-fraca)}

.ent__msg{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:12px;border:1px solid transparent;font-size:14px;line-height:1.45}
.ent__msg svg{flex:none;margin-top:1px}
.ent__msg--erro{background:var(--tcl-erro-veu);border-color:var(--tcl-erro-borda);color:var(--tcl-erro-texto)}
.ent__msg--atencao{background:var(--tcl-atencao-veu);border-color:var(--tcl-atencao-borda);color:var(--tcl-atencao-texto)}
.ent__msg--ok{background:var(--tcl-ok-veu);border-color:rgba(21,128,61,.32);color:var(--tcl-tinta)}
.ent__msg--ok svg{color:var(--tcl-ok)}

.ent__form{display:flex;flex-direction:column;gap:14px}
.ent__campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.ent__rotulo{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tcl-tinta-fraca)}
.ent__caixa{position:relative;display:flex;align-items:center}
.ent__icone{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;color:var(--tcl-placeholder);pointer-events:none}
.ent .ent__input{
  box-sizing:border-box;width:100%;min-height:48px;padding:10px 14px 10px 44px;font:inherit;font-size:16px;
  border:1px solid var(--tcl-borda-campo);border-radius:12px;background:var(--tcl-campo-fundo);color:var(--tcl-tinta);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ent__input::placeholder{color:var(--tcl-placeholder)}
.ent__input:focus{outline:none;border-color:var(--tcl-primaria);box-shadow:0 0 0 3px rgba(192,38,211,.28)}
.ent__input[aria-invalid="true"]{border-color:var(--tcl-erro)}
.ent__caixa--senha .ent__input{padding-right:52px}
.ent__olho{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:transparent;
  color:var(--tcl-tinta-fraca);cursor:pointer;
}
.ent__olho:hover,.ent__olho[aria-pressed="true"]{color:var(--tcl-tinta)}
.ent__olho:focus-visible{outline:3px solid var(--tcl-primaria);outline-offset:-3px}
.ent__dica{font-size:12.5px;line-height:1.4;color:var(--tcl-tinta-fraca)}
.ent__dica--erro{color:var(--tcl-erro-texto);font-weight:600}
.ent__caps{font-size:12.5px;font-weight:600;color:var(--tcl-atencao-texto)}

.ent__linha{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;column-gap:6px;margin:-6px 0 -4px;font-size:14px;color:var(--tcl-tinta-fraca)}
.ent__linha--centro{justify-content:center;margin:0}
.ent__link{display:inline-flex;align-items:center;min-height:44px;color:var(--tcl-primaria-tinta);font-weight:600;text-decoration:none;border-radius:6px}
.ent__link:hover{color:var(--tcl-primaria-tinta);text-decoration:underline}
.ent__link:focus-visible{outline:3px solid var(--tcl-primaria);outline-offset:2px}

/* Caixa de marcar com alvo de 44 px e desenho de 22: a area sensivel e o
   proprio input (appearance:none), o quadrado e o ::before. */
.ent__marcar{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--tcl-tinta);cursor:pointer}
.ent__marcar input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px;height:44px;margin:0 -6px 0 -11px;border:0;background:transparent;cursor:pointer}
.ent__marcar input::before{content:"";position:absolute;inset:11px;border:2px solid var(--tcl-borda-campo);border-radius:6px;background:var(--tcl-campo-fundo)}
.ent__marcar input:checked::before{border-color:var(--tcl-botao);background:var(--tcl-botao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat}
.ent__marcar input:focus-visible{outline:none}
.ent__marcar input:focus-visible::before{outline:3px solid var(--tcl-primaria);outline-offset:2px}

.ent__botao{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;
  padding:12px 18px;border:1px solid var(--tcl-botao);border-radius:12px;background:var(--tcl-botao);color:var(--tcl-botao-texto);
  font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;
  box-shadow:0 8px 20px rgba(162,28,175,.30);transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.ent__botao:hover{background:var(--tcl-botao-hover);border-color:var(--tcl-botao-hover);color:var(--tcl-botao-texto)}
.ent__botao:active{transform:translateY(1px)}
.ent__botao:focus-visible{outline:3px solid var(--tcl-primaria);outline-offset:3px}
.ent__botao[aria-busy="true"]{opacity:.82;cursor:progress}
.ent__botao--secundario{background:transparent;border-color:var(--tcl-borda-campo);color:var(--tcl-primaria-tinta);box-shadow:none}
.ent__botao--secundario:hover{background:var(--tcl-primaria-veu);border-color:var(--tcl-primaria);color:var(--tcl-primaria-tinta)}
.ent__desafio{display:flex;justify-content:center;min-height:65px}
.ent__desafio .cf-turnstile{width:100%}

.ent__clinicas{display:flex;flex-direction:column;gap:8px;max-height:calc(100dvh - 320px);min-height:132px;overflow-y:auto;overscroll-behavior:contain}
.ent__clinica{
  box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 14px;flex:none;
  border:1px solid var(--tcl-linha);border-radius:12px;background:var(--tcl-campo-fundo);color:var(--tcl-tinta);
  font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.ent__clinica:hover{border-color:var(--tcl-primaria);background:var(--tcl-primaria-veu)}
.ent__clinica:focus-visible{outline:3px solid var(--tcl-primaria);outline-offset:2px}
.ent__clinica-icone{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--tcl-primaria-veu);color:var(--tcl-primaria-tinta)}
.ent__clinica-texto{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ent__clinica-texto strong{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.ent__clinica-texto span{font-size:13px;color:var(--tcl-tinta-fraca)}
.ent__clinica-seta{display:flex;color:var(--tcl-tinta-fraca)}

.ent__rodape{display:flex;flex-direction:column;align-items:center;gap:0;padding-top:10px;border-top:1px solid var(--tcl-linha);text-align:center}
.ent__ajuda{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:6px;margin:0;font-size:13.5px;color:var(--tcl-tinta-fraca)}
.ent__selos{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 16px;font-size:12px;color:var(--tcl-tinta-fraca)}
.ent__selos span{display:inline-flex;align-items:center;gap:5px}
.ent__selos svg{color:var(--tcl-primaria-tinta)}

/* Painel da marca: sempre sobre o escuro da base, nos dois modos. */
@media (min-width:861px){
  .ent__painel{display:flex;flex-direction:column;gap:22px;flex:1 1 460px;max-width:480px;min-width:0}
  .ent__painel-logo{height:52px;width:auto;align-self:flex-start}
  .ent__frase{margin:0;font-size:28px;line-height:1.3;font-weight:800;letter-spacing:-.02em;color:var(--tcl-sobre-escuro)}
  .ent__tiques{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
  .ent__tiques li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--tcl-apoio)}
  .ent__tiques svg{flex:none;margin-top:3px;color:var(--tcl-primaria-clara)}
  .ent__assina{margin:6px 0 0;font-size:13px;color:var(--tcl-apoio)}
  /* O painel ja mostra a logomarca: no cartao ela duplicaria. */
  .ent__logo{display:none}
  .ent__titulo,.ent__sub{text-align:left}
}

/* Alturas: do mais leve ao mais agressivo. */
@media (max-height:820px){
  .ent__cartao{padding:24px 26px 16px;gap:14px}
  .ent__painel{gap:18px}
  .ent__frase{font-size:25px}
}
@media (max-height:700px){
  .ent__tela{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .ent__cartao{padding:20px 22px 12px;gap:12px}
  .ent__selos{display:none}
  .ent__titulo{font-size:20px}
  .ent__logo img{height:30px}
  .ent .ent__input{min-height:46px}
  .ent__painel-logo{height:44px}
  .ent__tiques li{font-size:14.5px}
}
@media (max-height:600px){
  .ent__tela{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .ent__cartao{padding:16px 18px 8px;gap:10px}
  .ent__form{gap:10px}
  .ent__campo{gap:4px}
  .ent__logo img{height:28px}
  .ent__sub{margin-top:-6px;font-size:13.5px;line-height:1.4}
  .ent__conheca,.ent__conheca-sep{display:none}
  .ent__rodape{padding-top:4px}
  .ent__clinicas{max-height:calc(100dvh - 250px)}
}
@media (prefers-reduced-motion:reduce){.ent__input,.ent__botao,.ent__clinica{transition:none}}

/* ============================================================
   RESPONSIVO: alvo de toque e telas estreitas
   ============================================================ */
@media (max-width:1024px){
  .btn,.btn-primario,.btn-secundario,.btn-perigo{min-height:44px}
  input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="date"],input[type="month"],input[type="time"],input[type="search"],input[type="file"],select{min-height:44px}
  .tcl-filtros .tcl-busca,.tcl-sel__btn{min-height:44px}
  .btn-pequeno{min-width:44px;min-height:44px}
  .tabela td a:not(.btn),.card-sub a,.alert a,.login-acoes a,a.tcl-lista__nome,.card-link{display:inline-flex;align-items:center;min-height:44px}
  .login-rodape a{display:inline;min-height:0;padding:15px 0}
  .pg-voltar,.tcl-mais>summary{width:44px;height:44px}
  .app-conteudo{padding:14px 16px 24px}
}
/* Alvo de toque: 44x44 com o dedo em QUALQUER largura. Fica por pointer e
   tambem por largura: regra que so vale no aparelho real e regra que ninguem
   verifica. */
@media (pointer:coarse){
  .btn,.btn-pequeno,.tcl-sel__btn,.tcl-filtros .tcl-busca,.tb__link,.tb__menu-link{min-height:44px}
  /* A busca do TOPO entrava nesta lista e nao estava: no iPad em paisagem
     (1194px, dedo) ela era o UNICO alvo abaixo de 44px da tela, com 38px de
     altura e 14px de fonte, e fonte abaixo de 16px faz o iOS dar zoom no foco.
     Medido em 10/10/2026. */
  .tb__busca input{min-height:44px;font-size:16px}
  .btn-pequeno{min-width:44px}
  .pg-voltar,.tcl-mais>summary{width:44px;height:44px}
  .checkbox{min-height:44px}
  .tabela td a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
  a.tcl-lista__nome,.card-link{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:640px){
  .pg-titulo{font-size:20px}
  .pg-acoes{width:100%;justify-content:stretch}
  .pg-acoes>.btn,.pg-acoes>.inline-form{flex:1 1 auto}
  .pg-acoes>.inline-form>.btn{width:100%}
  .pg-acoes>.tcl-mais{flex:none;margin-left:auto}
  /* No telefone a acao primaria vira icone e o rotulo longo sai; o nome inteiro
     continua no aria-label. */
  .pg-acoes .rot-largo{display:none}
  .pg-acoes .rot-curto{display:inline}
  .tcl-filtros--lista{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:8px;width:100%}
  .tcl-filtros--lista .tcl-busca{grid-column:1 / 3;grid-row:1;max-width:none;min-width:0}
  .tcl-filtros--lista .tcl-filtros__buscar{grid-column:3;grid-row:1;width:44px;min-width:44px;padding:0}
  .tcl-filtros--lista .tcl-filtros__buscar .rot-largo{display:none}
  .tcl-filtros--lista>.tcl-sel{grid-row:2;min-width:0;max-width:none}
  .tcl-filtros--lista>.tcl-sel:nth-of-type(1){grid-column:1}
  .tcl-filtros--lista>.tcl-sel:nth-of-type(2){grid-column:2 / 4}
  /* O seletor de mes (mensalidades, fechamento) e o de data (diario) dividem a
     fileira 2 com o primeiro seletor da casa; sozinhos, ocupam a fileira. */
  .tcl-filtros--lista>input[type="month"],.tcl-filtros--lista>input[type="date"]{grid-row:2;grid-column:2 / 4;min-width:0;width:100%}
  .tcl-filtros--lista .tcl-filtros__limpar{grid-column:1 / -1;justify-self:start;margin:0}
  .card-body{padding:14px}
  .card-header{padding:10px 14px}
  .card-rodape .btn{flex:1 1 100%}
  .kanban-coluna{flex-basis:240px;width:240px}
  .barra-form .btn{flex:1 1 auto}
}
@media (max-width:400px){
  .btn{padding:0 12px}
  .tcl-filtros--lista{grid-template-columns:minmax(0,1fr) 44px}
  .tcl-filtros--lista .tcl-busca{grid-column:1}
  .tcl-filtros--lista .tcl-filtros__buscar{grid-column:2}
  /* Um por fileira. Sem o grid-row explicito os dois herdavam a fileira 2 e
     ficavam EMPILHADOS na mesma celula: o de cima cobria o de baixo, e o toque
     nunca chegava ao segundo filtro (medido pelo portao em 320, 360, 375 e
     390px). */
  .tcl-filtros--lista>.tcl-sel:nth-of-type(1){grid-column:1 / -1;grid-row:2}
  .tcl-filtros--lista>.tcl-sel:nth-of-type(2){grid-column:1 / -1;grid-row:3}
  .tcl-filtros--lista>input[type="month"],.tcl-filtros--lista>input[type="date"]{grid-column:1 / -1;grid-row:4}
  .tcl-filtros--lista .tcl-filtros__limpar{grid-row:5}
}
@media (min-width:1025px) and (pointer:fine){
  .btn-primario,.btn-secundario,.btn-perigo{min-height:40px}
  .btn-pequeno{min-height:36px;min-width:36px;padding:0 11px}
}
/* ---------- relatorios: par de tabelas e cabecalho que so sai no papel ----
   O cabecalho impresso existe porque print de tela nao diz de que instituicao
   nem de que periodo e o numero, e indicador sem dono ja chegou a reuniao da
   escola errada. Na tela ele nao aparece: quem esta logado sabe onde esta. */
.relatorio-impresso{display:none}
.rel-par{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.rel-par{grid-template-columns:1fr}}

@media print{
  .tb,.tb__backdrop,.pg-acoes,.pg-voltar,.tcl-ajuda,.tcl-filtros,.toast-area,.tcl-jan,.tcl-cfg-jan,.tabela td.acoes{display:none !important}
  .app-conteudo{padding:0}
  body{padding-top:0;background:#fff}
  .card{box-shadow:none;break-inside:avoid}
  .card-link{display:none !important}
  .relatorio-impresso{display:block;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--tcl-primaria-tinta)}
  .relatorio-impresso strong{display:block;font-size:15pt;line-height:1.25}
  .relatorio-impresso span{display:block;font-size:9.5pt;color:#333}
  .tcl-kpis{display:grid !important;grid-template-columns:repeat(3,1fr) !important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ------------------------------------------------------------------ Segundo fator (12/10/2026) */
.campo-opcao{display:flex;align-items:center;gap:10px;font-size:14.5px;min-height:44px;cursor:pointer}
.campo-opcao input[type="checkbox"]{width:20px;height:20px;accent-color:var(--tcl-primaria)}
.totp-parear{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:8px 0 14px}
.totp-qr{width:208px;max-width:100%;background:#fff;border:1px solid var(--tcl-borda);border-radius:10px;padding:10px;box-sizing:border-box}
.totp-qr svg{display:block;width:100%;height:auto}
.totp-reserva-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;list-style:none;margin:8px 0 16px;padding:0}
.totp-reserva-lista code{display:block;text-align:center;padding:10px 6px;background:var(--tcl-fundo);border:1px dashed var(--tcl-borda);border-radius:8px;font-size:14px}

/* ------------------------------------------------------------------ Portal da familia e do estudante (12/10/2026) */
.bt-lista{display:flex;flex-wrap:wrap;gap:10px}
.portal-adv{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:12px;border:1px solid var(--tcl-atencao-borda);background:var(--tcl-atencao-veu);border-radius:10px;margin-bottom:10px}
.portal-adv p{margin:0;flex:1 1 260px}
/* Comunicado no portal (F4.1, 12/10 tarde): um artigo por comunicado, com o
   texto completo e a confirmacao embaixo. Borda entre eles, nunca cartao
   dentro de cartao. */
.portal-comunicado{padding:14px 0;border-top:1px solid var(--tcl-linha)}
.portal-comunicado:first-child{border-top:0;padding-top:2px}
.portal-comunicado__titulo{margin:0 0 6px;font-size:15.5px;font-weight:700;color:var(--tcl-tinta);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.portal-comunicado__corpo{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--tcl-tinta);white-space:normal}
.carteirinha{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:18px;
  border:1px solid var(--tcl-borda);border-radius:14px;background:var(--tcl-fundo)}
.carteirinha__dados{display:flex;flex-direction:column;gap:4px;flex:1 1 220px;min-width:0}
.carteirinha__escola{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tcl-tinta-fraca,#64748b)}
.carteirinha__nome{font-size:19px;font-weight:700}
.carteirinha__sub{font-size:14px;color:var(--tcl-tinta-fraca,#64748b)}
.carteirinha__codigo{font-size:13px;margin-top:8px;font-variant-numeric:tabular-nums}
.carteirinha__qr{width:148px;max-width:40vw;background:#fff;border:1px solid var(--tcl-borda);border-radius:10px;padding:8px;box-sizing:border-box}
.carteirinha__qr svg{display:block;width:100%;height:auto}
@media (max-width:480px){.carteirinha{justify-content:center;text-align:center}.carteirinha__dados{align-items:center}}

/* ============================================================
   SIDEBAR DE DOIS PAINEIS (secao 5 do prompt).

   O TexEducacao usa barra superior; aqui a navegacao e o trilho de 72 px com
   os GRUPOS mais o painel de 240 px com os ITENS do grupo aberto, no desenho
   do sidebar2 do GinecoLab. Motivo: nove grupos com ate treze itens cabem sem
   rolar e sem cobrir o conteudo.

   Estado ativo em DOIS niveis: filete na primaria no trilho (grupo) e
   aria-current="page" com veu no painel (item).
   ============================================================ */

.shell{display:grid;grid-template-columns:var(--tcl-trilho-l) var(--tcl-painel-l) minmax(0,1fr);min-height:100vh}
/* Grupo que e link direto (Painel, Relatorios) nao tem painel de itens: o
   conteudo recebe os 240 px em vez de uma coluna em branco. */
.shell--sem-painel{grid-template-columns:var(--tcl-trilho-l) minmax(0,1fr)}
/* minmax(0,1fr) e obrigatorio na coluna de conteudo: com `1fr` puro ela nao
   encolhe abaixo do conteudo e a tabela larga estoura a pagina. */
:root{--tcl-trilho-l:72px;--tcl-painel-l:240px}

.trilho{background:var(--tcl-base);display:flex;flex-direction:column;align-items:center;padding:12px 0 8px;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.trilho__marca{display:flex;align-items:center;justify-content:center;width:var(--alvo);height:var(--alvo);margin-bottom:10px;color:var(--tcl-sobre-escuro)}
.trilho__logo{width:34px;height:34px}
.trilho__item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:64px;min-height:var(--alvo);padding:8px 2px;border:0;background:transparent;color:var(--tcl-apoio);font-size:10px;line-height:1.15;text-align:center;text-decoration:none;cursor:pointer;border-radius:10px;font-family:var(--fonte)}
.trilho__item:hover{background:var(--tcl-base-2);color:var(--tcl-sobre-escuro)}
.trilho__item:focus-visible{outline:2px solid var(--tcl-primaria-clara);outline-offset:2px}
.trilho__item.is-active{background:var(--tcl-base-2);color:var(--tcl-sobre-escuro)}
.trilho__item.is-active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--tcl-primaria)}
.trilho__item svg{width:20px;height:20px}
.trilho__rodape{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:8px}

.painel{background:var(--tcl-cartao);border-right:1px solid var(--tcl-linha);padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.painel__titulo{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--tcl-tinta-fraca);margin:0 8px 10px}
/* Nome da clinica no topo do painel: com a conta em varias clinicas, e o que diz onde a pessoa esta. */
.painel__clinica{margin:0 8px 12px;padding-bottom:10px;border-bottom:1px solid var(--tcl-linha);font-size:13.5px;font-weight:700;color:var(--tcl-tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.painel__link{display:flex;align-items:center;min-height:var(--alvo);padding:8px 12px;border-radius:8px;color:var(--tcl-tinta);text-decoration:none;font-size:14px}
.painel__link:hover{background:var(--tcl-fundo-2)}
.painel__link.is-active{background:var(--tcl-primaria-veu);color:var(--tcl-primaria-tinta);font-weight:600}
.painel__link:focus-visible{outline:2px solid var(--tcl-primaria-tinta);outline-offset:1px}

.conteudo{min-width:0}
.barra-movel{display:none}

/* Telas estreitas: trilho e painel viram gaveta. Este media query vem DEPOIS
   das regras base de proposito: regra base declarada depois do media query
   vence o media query (armadilha paga nesta casa em 2026). */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  /* GAVETA FECHADA NAO INTERCEPTA CLIQUE.
     Fechado, o painel fica em translateX(-100%), ou seja com a borda direita
     ainda dentro da tela quando ela e estreita: em 320 px ele cobria o lado
     esquerdo do conteudo e roubava o clique de um botao que a pessoa VE.
     isibility:hidden tira o elemento do alcance do ponteiro sem matar a
     transicao (o que display:none faria). Medido pelo portao em 18/10/2026. */
  .trilho,.painel{position:fixed;top:0;bottom:0;z-index:40;transform:translateX(-100%);visibility:hidden;transition:transform .18s ease,visibility .18s ease;height:100dvh}
  .trilho{left:0;width:var(--tcl-trilho-l)}
  .painel{left:var(--tcl-trilho-l);width:var(--tcl-painel-l);box-shadow:var(--sombra-forte)}
  .shell.is-aberto .trilho,.shell.is-aberto .painel{transform:translateX(0);visibility:visible}
  .conteudo{padding:12px 14px 32px;max-width:100%}
  .barra-movel{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--tcl-base);color:var(--tcl-sobre-escuro);position:sticky;top:0;z-index:30;margin:-12px -14px 12px;min-height:var(--alvo)}
  .barra-movel__botao{display:inline-flex;align-items:center;justify-content:center;width:var(--alvo);height:var(--alvo);border:0;border-radius:8px;background:transparent;color:var(--tcl-sobre-escuro);cursor:pointer}
  /* Logomarca na barra do telefone; abaixo de 420 px fica so o simbolo, para o nome da clinica caber. */
  .barra-movel__marca{display:inline-flex;align-items:center;flex:none;min-height:var(--alvo);border-radius:8px}
  .barra-movel__marca:focus-visible{outline:2px solid var(--tcl-primaria-clara);outline-offset:2px}
  .barra-movel__logo{height:24px;width:auto}
  .barra-movel__simbolo{display:none;width:28px;height:28px}
  .barra-movel__clinica{min-width:0;font-size:13.5px;font-weight:600;color:var(--tcl-apoio);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .shell.is-aberto::after{content:"";position:fixed;inset:0;background:var(--tcl-veu-escuro);z-index:35}
}
@media (max-width:420px){.barra-movel__logo{display:none}.barra-movel__simbolo{display:block}}
/* ============================================================
   ALVO DE TOQUE: 44 px, sempre, no ponteiro grosso.

   Botao compacto dentro de tabela e de cartao (padding reduzido, 38 px de
   altura) cabe bem no mouse e REPROVA no toque: a WCAG 2.5.5 pede 44 px nos
   dois lados, e o portao mede o ponto do clique, nao so a caixa.

   A solucao que a casa usa e ampliar a AREA SENSIVEL sem inchar o desenho:
   um ::after absoluto, centrado, de 44 x 44. O botao continua compacto na
   tela e passa a receber o toque na area inteira. Medido em 18/10/2026, em
   /repasse @ 390x844.
   ============================================================ */
@media (pointer: coarse) {
  .card .btn, .tabela .btn, .tcl-num .btn, form .btn { position: relative; }
  .card .btn::after, .tabela .btn::after, .tcl-num .btn::after, form .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: var(--alvo);
    min-height: var(--alvo);
    transform: translate(-50%, -50%);
  }
}

/* ===================================================================== Minha conta e atalhos (05/11/2026)
   Pedido do dono: "Minha conta" como painel da pessoa (identidade, segurança com QR Code do autenticador, atalhos
   escolhidos por caixa de seleção). Os atalhos também aparecem no Painel. Só tokens --tcl-*: o modo escuro vem junto. */
.pf-identidade{display:flex;align-items:center;gap:16px;padding:18px 20px;margin:0 0 16px;min-width:0;flex-wrap:wrap}
.pf-identidade__icone{flex:0 0 56px;width:56px;height:56px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:var(--tcl-primaria-veu);color:var(--tcl-primaria-tinta)}
.pf-identidade__texto{flex:1 1 240px;min-width:0}
.pf-identidade__nome{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--tcl-base);overflow-wrap:anywhere}
.pf-identidade__email{margin:2px 0 10px;font-size:14px;color:var(--tcl-tinta-fraca);overflow-wrap:anywhere}
.pf-identidade__acoes{flex:0 0 auto}
.pf-indicadores{margin:0 0 16px}
.pf-secao{margin:0 0 16px;min-width:0}
.pf-secao__topo{display:flex;align-items:center;gap:8px;margin:0 0 12px;min-width:0}
.pf-secao__icone{flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--tcl-primaria-veu);color:var(--tcl-primaria-tinta)}
.pf-secao__titulo{margin:0;font-size:16px;font-weight:700;color:var(--tcl-base);min-width:0}
.pf-texto-fraco{margin:0 0 10px;font-size:13px;color:var(--tcl-tinta-fraca)}
.pf-seguranca{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:16px;margin:0 0 16px}
/* section.card+section.card (0,2,2) dava 16 px ao segundo cartão e desalinhava o topo: o seletor precisa vencer. */
.pf-seguranca>section.card.pf-secao{margin:0}
.pf-estado{display:flex;align-items:flex-start;gap:8px;margin:0 0 10px;font-size:14px;color:var(--tcl-atencao)}
.pf-estado--ok{color:var(--tcl-ok)}
.pf-estado span{color:var(--tcl-tinta)}
.pf-estado svg{flex:none;margin-top:1px}
.pf-totp{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.pf-totp__qr{flex:0 0 168px;width:168px;height:168px;border-radius:12px;border:1px solid var(--tcl-linha);background:#fff;padding:6px}
.pf-totp__qr:not(.pf-totp__qr--pronto){display:none}
.pf-totp__qr svg{display:block;width:100%;height:100%}
.pf-totp__passos{flex:1 1 220px;min-width:0}
.pf-passos{margin:0 0 10px;padding-left:20px;font-size:13.5px;line-height:1.5;color:var(--tcl-tinta)}
.pf-chave{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:var(--tcl-fundo-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.04em;word-break:normal;overflow-wrap:anywhere;text-wrap:balance;user-select:all}
.pf-reservas{margin:0 0 16px}
.pf-reservas__lista{columns:2;margin:0;padding-left:20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.pf-clinicas{list-style:none;margin:0;padding:0}
.pf-clinicas__item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:var(--alvo);padding:6px 0;border-top:1px solid var(--tcl-linha)}
.pf-clinicas__item:first-child{border-top:0}
.pf-clinicas__nome{font-weight:600;color:var(--tcl-base);min-width:0;overflow-wrap:anywhere}
.pf-clinicas__papel{font-size:13px;color:var(--tcl-tinta-fraca)}
/* Escolha dos atalhos: caixas de seleção agrupadas pelo menu. */
.pf-escolha{margin:14px 0 0;border-top:1px solid var(--tcl-linha);padding-top:12px}
.pf-escolha__abrir{display:inline-flex;align-items:center;gap:8px;min-height:var(--alvo);padding:0 14px;border:1px solid var(--tcl-borda-campo);border-radius:10px;font-weight:600;font-size:14px;color:var(--tcl-base);cursor:pointer;list-style:none;user-select:none}
.pf-escolha__abrir::-webkit-details-marker{display:none}
.pf-escolha[open] .pf-escolha__abrir{background:var(--tcl-primaria-veu);border-color:var(--tcl-primaria-tinta)}
.pf-escolha__form{margin-top:14px}
.pf-grupos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:12px}
.pf-grupo{margin:0;padding:10px 12px;border:1px solid var(--tcl-linha);border-radius:12px;min-width:0}
.pf-grupo__titulo{padding:0 4px;font-size:12.5px;font-weight:700;text-transform:none;color:var(--tcl-tinta-fraca)}
.pf-caixa{display:flex;align-items:center;gap:10px;min-height:var(--alvo);font-size:14px;color:var(--tcl-tinta);cursor:pointer}
.pf-caixa input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--tcl-primaria)}
.pf-escolha__rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.pf-escolha__rodape .campo__dica{margin:0}
/* Grade de atalhos (Minha conta e Painel). */
.atalhos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:10px}
.atalho{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px;border:1px solid var(--tcl-linha);border-radius:12px;background:var(--tcl-cartao);color:var(--tcl-base);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.atalho:hover{border-color:var(--tcl-primaria-tinta);box-shadow:0 2px 8px rgba(12,19,34,.08)}
.atalho:focus-visible{outline:3px solid var(--tcl-primaria-hover);outline-offset:2px}
.atalho__icone{flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--tcl-primaria-veu);color:var(--tcl-primaria-tinta)}
.atalho__texto{display:flex;flex-direction:column;min-width:0;flex:1}
.atalho__rotulo{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.atalho__grupo{font-size:12px;color:var(--tcl-tinta-fraca)}
.atalho__seta{flex:none;color:var(--tcl-tinta-fraca)}
.atalhos__vazio{margin:0;font-size:14px;color:var(--tcl-tinta-fraca)}
.painel-atalhos{margin:0}
/* No telefone, um atalho por linha empurrava os números do Painel para baixo da dobra: duas colunas, sem o grupo e a seta. */
@media (max-width:560px){.atalhos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.atalho{gap:10px;min-height:52px;padding:8px 10px}.atalho__grupo,.atalho__seta{display:none}.atalho__icone{flex-basis:32px;width:32px;height:32px}.atalho__rotulo{font-size:13.5px;line-height:1.25;overflow-wrap:break-word;hyphens:auto}}
@media (max-width:360px){.atalho__icone{display:none}}
@media print{.pf-escolha,.atalhos,.painel-atalhos{display:none !important}}

/* ===================================================================== Equipe e acessos (05/11/2026)
   Lista da equipe (a tabela vira cartão pelo mecanismo único da .tabela), ficha de gerenciar e convite. */
.eq-indicadores{margin:0 0 16px}
.eq-ficha{margin:0 0 16px;border-left:3px solid var(--tcl-primaria)}
.eq-ficha__topo{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.eq-ficha__icone{flex:0 0 44px;width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--tcl-primaria-veu);color:var(--tcl-primaria-tinta)}
.eq-ficha__quem{flex:1 1 240px;min-width:0}
.eq-ficha__nome{margin:0;font-size:18px;line-height:1.3;color:var(--tcl-base);overflow-wrap:anywhere}
.eq-ficha__email{margin:2px 0 8px;font-size:14px;color:var(--tcl-tinta-fraca);overflow-wrap:anywhere}
.eq-ficha__chips{display:flex;flex-wrap:wrap;gap:6px}
.eq-ficha__fechar{margin-left:auto}
.eq-ficha__dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px 16px;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--tcl-linha)}
.eq-ficha__dados div{min-width:0}
.eq-ficha__dados dt{font-size:12px;font-weight:600;color:var(--tcl-tinta-fraca)}
.eq-ficha__dados dd{margin:2px 0 0;font-size:14.5px;color:var(--tcl-tinta)}
.eq-acoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px;margin-top:16px}
.eq-acao{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px;border:1px solid var(--tcl-linha);border-radius:12px;min-width:0}
.eq-acao__titulo{display:flex;align-items:center;margin:0;font-size:14.5px;font-weight:700;color:var(--tcl-base)}
.eq-acao__titulo>.tcl-ajuda{margin-left:0}
.eq-acao__texto{margin:0;font-size:13.5px;line-height:1.5;color:var(--tcl-tinta-fraca)}
.eq-acao__linha{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.eq-acao__linha select{flex:1 1 180px;min-width:0}
.eq-acao .campo{width:100%;margin:0}
.eq-convite{margin:0 0 16px;padding:0}
.eq-convite__abrir{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 20px;font-weight:700;font-size:15px;color:var(--tcl-base);cursor:pointer;list-style:none;user-select:none}
.eq-convite__abrir::-webkit-details-marker{display:none}
.eq-convite__abrir svg{color:var(--tcl-primaria-tinta)}
.eq-convite[open] .eq-convite__abrir{border-bottom:1px solid var(--tcl-linha)}
.eq-convite__form{padding:16px 20px 18px}
.eq-convite__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:4px 16px}
.eq-convite__rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.eq-convite__rodape .campo__dica{flex:1 1 280px;margin:0}
.eq-lista__topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.eq-lista__topo .pf-secao__titulo{margin:0}
.eq-pessoa{display:flex;flex-direction:column;min-width:0}
.eq-pessoa__email{font-size:13px;font-weight:400;color:var(--tcl-tinta-fraca);overflow-wrap:break-word}
.eq-tabela .tcl-chip{white-space:nowrap}
@media print{.eq-convite,.eq-acoes,.tabela td.acoes{display:none !important}}

/* ===================================================================== Segundo fator obrigatório em tela focada (05/11/2026)
   Moldura das telas de entrada (sem rolagem de 320x568 a 1920x1080). No telefone o QR some e entra o botão
   que abre o aplicativo pelo link otpauth://; na janela curta quem cede é o QR e a lista de passos. */
.pf-foco__par{display:grid;grid-template-columns:148px minmax(0,1fr);gap:16px;align-items:center}
.pf-foco .pf-foco__qr{flex:none;width:148px;height:148px;padding:5px}
.pf-foco__passos{min-width:0}
.pf-foco__lista{margin:0 0 8px;padding-left:18px;font-size:13.5px;line-height:1.45;color:var(--tcl-tinta)}
.pf-foco__so-link,.pf-foco__abrir{display:none}
.pf-foco__abrir{align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;margin:0 0 8px;border:1px solid var(--tcl-primaria-tinta);border-radius:12px;background:var(--tcl-primaria-veu);color:var(--tcl-primaria-tinta);font-weight:700;font-size:15px;text-decoration:none}
.pf-foco__chave-rotulo{margin:0 0 4px;font-size:12px;font-weight:600;color:var(--tcl-tinta-fraca)}
.pf-foco .pf-foco__chave{margin:0;padding:8px 10px;font-size:14px}
.pf-foco__sair{margin:0;text-align:center;font-size:14px}
.pf-foco__sair .ent__link{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:560px){
  .pf-foco__par{grid-template-columns:minmax(0,1fr)}
  .pf-foco .pf-foco__qr,.pf-foco__so-qr{display:none}
  .pf-foco__so-link{display:list-item}
  .pf-foco__abrir{display:flex}
}
@media (max-height:760px){.pf-foco .pf-foco__qr{width:124px;height:124px}.pf-foco__par{grid-template-columns:124px minmax(0,1fr)}}
@media (max-height:760px) and (max-width:560px){.pf-foco__par{grid-template-columns:minmax(0,1fr)}}
@media (max-height:660px){.pf-foco__lista{display:none}}
/* Quem já está dentro não precisa do "Conheça"; no telefone os selos e, na janela baixa, os passos cedem o espaço. */
.ent:has(.pf-foco) .ent__conheca{display:none}
@media (max-width:560px){.ent:has(.pf-foco) .ent__selos{display:none}.pf-foco__lista{font-size:13px;line-height:1.35}}
@media (max-height:700px) and (max-width:560px){.pf-foco__lista{display:none}}

/* 05/11/2026 (dono: nenhuma página de entrada rola). Sem mensagem a entrada cabia; com a mensagem do cartão
   (sessão expirada, senha salva, erro) rolava no telefone: 37 px em 320x760, 77 px em 320x720, 55 px em 320x640
   e 37 px em 360x720 (medido com ?msg=sessao_expirada e o Turnstile desenhado). A mensagem encolhe; com ela, os
   selos saem abaixo de 900 px de altura, o subtítulo abaixo de 820 px e "Conheça" abaixo de 700 px. Campos,
   Turnstile, botão, "Esqueceu a senha?" e a ajuda ficam. */
.ent .ent__msg{padding:8px 12px;font-size:13.5px;line-height:1.4}
@media (max-height:900px){.ent__cartao:has(.ent__msg) .ent__selos{display:none}}
@media (max-height:820px){.ent__cartao:has(.ent__msg) .ent__sub{display:none}}
@media (max-height:700px){.ent__cartao:has(.ent__msg) :is(.ent__conheca,.ent__conheca-sep){display:none}}

/* ===================================================================== Impressão do shell atual (05/11/2026)
   A regra antiga (bloco @media print acima) escondia classes de um shell que não existe mais (.tb): o menu, a
   barra do celular, a faixa de demonstração, o filtro de período e os botões saíam no papel, e um bloco maior que
   a página empurrava tudo para a folha seguinte. No papel: só o título, os chips de período e os números. */
@media print{
  .trilho,.painel,.barra-movel,.pular-conteudo,.aviso--info,#qa-tracker-ui{display:none !important}
  .app-conteudo .btn,.app-conteudo .mod-chips a,.card:has(form[method="get"]):not(:has(table)){display:none !important}
  .shell{display:block !important}
  .conteudo,.app-conteudo{padding:0 !important;margin:0 !important;max-width:none !important}
  /* Sem consulta de contêiner no papel: a tabela continua TABELA (abaixo de 900 px ela viraria cartão). */
  .app-conteudo{container-type:normal !important}
  .card{break-inside:auto}
  .tcl-kpi,.tabela tr{break-inside:avoid}
  .tabela thead{display:table-header-group}
  h2,h3{break-after:avoid}
  /* A caixa da tabela rola na tela; no papel ela cortava a última coluna (Motivo, no risco de abandono). */
  .tabela-scroll,.tabela-caixa{overflow:visible !important}
  .tabela{width:100% !important;font-size:11px}
  .tabela th,.tabela td{padding:6px 8px !important}
}
/* Com a mensagem E o Turnstile (que entra depois de tentativas erradas) ainda faltavam 57 px em 320x720: o respiro
   entre os blocos encolhe por altura. Em 320 px o Turnstile (300 px de largura mínima) passava 24 px da janela no
   recuperar senha: o cartão fica mais justo e o widget entra em escala 0,9 (270 px), inteiro à vista. */
@media (max-height:900px){.ent__cartao:has(.ent__msg){gap:12px}.ent__cartao:has(.ent__msg) .ent__form{gap:12px}}
@media (max-height:820px){.ent__cartao:has(.ent__msg){gap:10px}.ent__cartao:has(.ent__msg) .ent__form{gap:10px}}
@media (max-height:700px){.ent__cartao:has(.ent__msg){gap:8px}.ent__cartao:has(.ent__msg) .ent__form{gap:8px}.ent__cartao:has(.ent__msg) .ent__campo{gap:4px}}
@media (max-width:359px){
  .ent__tela{padding-left:10px;padding-right:10px}
  .ent__cartao{padding-left:14px;padding-right:14px}
  .ent__desafio{overflow:hidden}
  .ent__desafio .cf-turnstile{flex:none;width:300px;max-width:none;transform:scale(.9);transform-origin:top center;margin-bottom:-7px}
}
@media (max-height:600px){.ent__cartao:has(.ent__msg){gap:6px;padding-top:12px;padding-bottom:6px}.ent__cartao:has(.ent__msg) .ent__form{gap:6px}}