/* ======================================================= componentes do sistema
 * Subconjunto fiel de componentes.css: so o que estas telas usam. */

/* ------------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fonte);font-size:var(--t-base);line-height:var(--altura-base);
font-optical-sizing:auto;color:var(--tinta);background:var(--fundo);overflow-wrap:break-word;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* sem esta regra o tema por container nao funciona: a cor herdada de fora ja foi
   resolvida em valor computado e atravessa a troca de token */
[data-tema]{color:var(--tinta);background-color:var(--fundo)}
a{color:var(--tinta);text-decoration-color:var(--linha-campo);text-underline-offset:2px}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--realce-3)}
[hidden]{display:none !important}
:focus-visible{outline:var(--anel-foco) solid var(--foco);outline-offset:2px}
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:-9999px;z-index:9}
.pular:focus{left:var(--e-4);top:var(--e-4);display:inline-flex;align-items:center;
min-height:var(--alvo);padding:0 var(--e-4);font-size:var(--t-menor);font-weight:var(--peso-forte);
color:var(--tinta);background:var(--superficie);border:var(--borda) solid var(--linha-campo);
border-radius:var(--raio-1);box-shadow:var(--sombra-levantado);text-decoration:none}
/* icone e SEMPRE svg com stroke=currentColor, nunca glifo unicode (LIC-012d) */
.icone{width:var(--icone);height:var(--icone);flex:none;fill:none;stroke:currentColor;
stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icone--menor{width:var(--icone-2);height:var(--icone-2)}
.sprite{display:none}

/* ----------------------------------------------------------------------- casca */
.quadro{display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);
min-height:100vh;min-height:100svh}
/* a lateral nao tem fundo nem borda: e o proprio canvas. Quem separa e o espaco e o
   cartao branco do lado, nao um filete. */
.lateral{position:sticky;top:0;display:flex;flex-direction:column;gap:var(--e-6);
height:100vh;height:100svh;padding:var(--e-5) var(--e-4);overflow-y:auto;
overscroll-behavior:contain;border-right:1px solid var(--linha-fraca)}
.lateral-marca{display:flex;align-items:center;gap:var(--e-3);min-height:var(--alvo);
padding:0 var(--e-2);margin:0 calc(-1 * var(--e-2));border-radius:var(--raio-3);
text-decoration:none;cursor:pointer;list-style:none;min-height:var(--alvo-toque);padding:var(--e-2);margin:0;background:var(--superficie);border:var(--borda) solid var(--linha)}
.lateral-marca::-webkit-details-marker{display:none}
.marca-selo{display:grid;place-items:center;width:var(--e-7);height:var(--e-7);flex:none;
font-family:var(--fonte-mono);font-size:var(--t-menor);font-weight:var(--peso-maximo);
letter-spacing:var(--trilha-numero);color:var(--acento-tinta);background:var(--acento);
border-radius:var(--raio-3)}
.marca-nome{display:block;font-size:var(--t-base);font-weight:var(--peso-maximo);
letter-spacing:var(--trilha-titulo);line-height:var(--altura-apertada)}
.marca-sub{display:block;font-family:var(--fonte-mono);font-size:var(--t-rotulo);
color:var(--tinta-3);line-height:var(--altura-apertada)}
/* menu da marca ("Trocar de painel", 3.17.1, V1): mesma receita do .menu-perfil, so que
   abre PRA BAIXO (a marca fica no topo). A lista reusa .menu-perfil-lista. */
.menu-marca{position:relative}
.menu-marca>.menu-perfil-lista{top:calc(100% + var(--e-2));bottom:auto}
.marca-seta{margin-left:auto;color:var(--tinta-4)}
.menu-marca[open]>.lateral-marca{background:var(--realce)}
.menu-marca[open]>.lateral-marca .marca-seta{color:var(--tinta-2)}
.lateral-corpo{display:flex;flex-direction:column;gap:var(--e-6)}
.grupo{display:flex;flex-direction:column;gap:2px}
/* rotulo de grupo: 11px, 600, caixa alta, tracking .2em. E a medida do Afilia. */
.grupo-rotulo{margin:0 0 var(--e-2);padding:0 var(--e-3);font-family:var(--fonte-mono);
font-size:var(--t-rotulo);font-weight:var(--peso-forte);text-transform:uppercase;
letter-spacing:var(--trilha-rotulo);color:var(--tinta-3)}
.nav-item{display:flex;align-items:center;gap:var(--e-3);min-height:var(--alvo);
padding:0 var(--e-3);font-size:var(--t-base);font-weight:var(--peso-medio);color:var(--tinta-2);
text-decoration:none;border-radius:var(--raio-3)}
.nav-item .icone{color:var(--tinta-4)}
.nav-item-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* item ativo: tinta a 5%, raio 12, peso 600. Sem barra, sem borda, sem cor. */
.nav-item.atual{color:var(--tinta);font-weight:var(--peso-forte);background:var(--realce)}
.nav-item.atual .icone{color:var(--tinta)}
.lateral-rodape{display:flex;flex-direction:column;gap:var(--e-2);margin-top:auto;
padding-top:var(--e-4);border-top:var(--borda) solid var(--linha)}
.lateral-quem{display:flex;align-items:center;gap:var(--e-2);min-width:0;margin:0;
font-size:var(--t-menor);color:var(--tinta-3)}
.lateral-quem strong{font-weight:var(--peso-forte);color:var(--tinta-2);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.lateral-botoes{display:flex;gap:var(--e-1)}
/* menu do perfil ("Trocar de painel" + "Sair"): <details> nativo, abre no clique e no
   teclado sem uma linha de JS. Espelha componentes.css. */
.menu-perfil{position:relative;min-width:0}
/* o gatilho do menu e o componente .perfil do sistema visual: quadrado com as INICIAIS,
   nome e seta, tudo num bloco com superficie propria e 44px (Thiago, 17/09: o rodape
   antigo "nao parece tocavel"). O mesmo markup vale pro layout.php do app. */
.perfil{display:flex;align-items:center;gap:var(--e-3);width:100%;
min-height:var(--alvo-toque);padding:var(--e-2);font-size:var(--t-menor);color:var(--tinta-2);
text-align:left;background:none;border:var(--borda) solid var(--fundo);
border-radius:var(--raio-3);cursor:pointer;list-style:none}
.perfil::-webkit-details-marker{display:none}
.perfil-iniciais{display:grid;place-items:center;width:var(--e-7);height:var(--e-7);flex:none;
font-family:var(--fonte-mono);font-size:var(--t-menor);font-weight:var(--peso-maximo);
letter-spacing:var(--trilha-numero);color:var(--fundo);background:var(--tinta);
border-radius:var(--raio-3)}
.perfil-nome{min-width:0;overflow:hidden;font-weight:var(--peso-forte);color:var(--tinta);
text-overflow:ellipsis;white-space:nowrap}
.perfil-seta{margin-left:auto;color:var(--tinta-4)}
.perfil[aria-expanded="true"]{background:var(--superficie-2);border-color:var(--linha-campo)}
.perfil[aria-expanded="true"] .perfil-seta{color:var(--tinta-2)}
.menu-perfil-lista{position:absolute;bottom:calc(100% + var(--e-2));left:0;right:0;z-index:5;
display:flex;flex-direction:column;gap:2px;width:auto;padding:var(--e-2);
background:var(--superficie);border:var(--borda) solid var(--linha);border-radius:var(--raio-3);
box-shadow:var(--sombra-levantado),var(--sombra-interna)}
.menu-perfil-lista .grupo-rotulo{margin:0 0 var(--e-1)}
.menu-perfil-lista .nav-item .icone{color:var(--tinta-4)}
.menu-perfil-sep{width:100%;height:var(--borda);margin:var(--e-1) 0;border:0;
background:var(--linha)}

/* --------------------------------------------------- lateral colapsada (68px, V3) */
[data-lateral="curta"] .quadro{grid-template-columns:var(--lateral-curta) minmax(0,1fr)}
[data-lateral="curta"] .lateral{padding:var(--e-5) var(--e-2);align-items:center}
[data-lateral="curta"] .marca-texto,[data-lateral="curta"] .marca-seta,
[data-lateral="curta"] .nav-item-nome,[data-lateral="curta"] .lateral-quem,
[data-lateral="curta"] .perfil-nome,[data-lateral="curta"] .perfil-seta,
[data-lateral="curta"] .grupo-rotulo{display:none}
[data-lateral="curta"] .perfil{justify-content:center;padding:var(--e-1)}
/* popover minusculo em 68px seria ilegivel; mais simples que fixed calculado (V4): so nao
   abre visualmente na lateral curta, expandir de novo devolve o menu */
[data-lateral="curta"] .menu-perfil-lista{display:none}
[data-lateral="curta"] .grupo{width:100%}
[data-lateral="curta"] .grupo+.grupo{padding-top:var(--e-4);
border-top:var(--borda) solid var(--linha)}
[data-lateral="curta"] .nav-item{justify-content:center;padding:0;position:relative}
[data-lateral="curta"] .lateral-rodape{width:100%}
[data-lateral="curta"] .lateral-botoes{flex-direction:column;align-items:center}

/* -------------------------------------------------------------------- cabecalho */
.coluna{display:flex;flex-direction:column;min-width:0}
.cabecalho{position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;gap:var(--e-4);
padding:var(--e-5) var(--e-7) var(--e-4);background:var(--fundo);
border-bottom:var(--borda) solid var(--linha)}
.cabecalho-texto{min-width:0}
/* trilha: contexto / secao, em mono caixa alta pequena */
.trilha{display:flex;align-items:center;gap:var(--e-2);margin:0 0 var(--e-1);
font-family:var(--fonte-mono);font-size:var(--t-rotulo);font-weight:var(--peso-medio);
text-transform:uppercase;letter-spacing:var(--trilha-kicker);color:var(--tinta-3)}
.trilha a{color:inherit;text-decoration:none}
.trilha-sep{color:var(--tinta-4)}
.titulo{margin:0;font-size:var(--t-titulo);font-weight:var(--peso-forte);
letter-spacing:var(--trilha-titulo);line-height:var(--altura-titulo);text-wrap:balance}
.cabecalho-sub{margin:var(--e-1) 0 0;font-size:var(--t-menor);color:var(--tinta-2)}
.cabecalho-fim{display:flex;align-items:center;gap:var(--e-2);margin-left:auto}
/* tem que vencer a regra do .botao, que vem depois neste arquivo */
.cabecalho .botao-gaveta{display:none}
.conteudo{width:100%;max-width:var(--conteudo-max);padding:var(--e-6) var(--e-7) var(--e-10)}

/* ----------------------------------------------------------------------- texto */
.subtitulo,.conteudo h2{margin:var(--e-7) 0 var(--e-3);font-size:var(--t-medio);
font-weight:var(--peso-forte);letter-spacing:var(--trilha-titulo);line-height:var(--altura-titulo)}
.conteudo>h2:first-child,.conteudo>.subtitulo:first-child{margin-top:0}
.kicker{display:block;font-family:var(--fonte-mono);font-size:var(--t-rotulo);
font-weight:var(--peso-forte);text-transform:uppercase;letter-spacing:var(--trilha-rotulo);
color:var(--tinta-3)}
.fraco,.dim,small{font-size:var(--t-micro);color:var(--tinta-3)}
.mono{font-family:var(--fonte-mono);font-variant-numeric:tabular-nums}
/* --------------------------------------------------------------------- numeros
 * A regra de numero mora AQUI, num lugar so, pra poder ser auditada de uma olhada:
 * tudo que a pessoa le como NUMERO usa a --fonte-numero com tabular-nums. A mono fica
 * onde ela sempre foi boa: rotulo em caixa alta e identificador tecnico. */
.numero,.metrica-numero,.tile b,.badge,.paginacao-texto,.codigo-erro,.item-meta,
.tabela--numeros tbody th,.tabela--numeros tbody td,.filtro-conta,.conta{
font-family:var(--fonte-numero);font-variant-numeric:tabular-nums}
.lista-simples,.conteudo ul,.conteudo ol{margin:var(--e-3) 0;padding-left:var(--e-5)}
.conteudo li{margin:var(--e-1) 0}
.conteudo p{margin:var(--e-3) 0}
hr{height:0;margin:var(--e-7) 0;border:0;border-top:var(--borda) solid var(--linha)}

/* ---------------------------------------------------------------------- cartao */
.cartao{background:var(--superficie);border:var(--borda) solid var(--linha);
border-radius:var(--raio-4);box-shadow:var(--sombra-repouso),var(--sombra-interna)}
.cartao-corpo{padding:var(--e-6)}
/* margem de primeiro e ultimo filho nao vaza pra dentro do cartao: sem isto o cartao que
   carrega um <details> so fica com 36px de respiro em cima (achado na rodada 1) */
.cartao-corpo>:first-child{margin-top:0}
.cartao-corpo>:last-child{margin-bottom:0}
/* cartao que carrega SO um passo ja concluido (o <details> fechado) nao precisa de 24px
   em volta de uma linha: ele vira uma faixa. Navegador sem :has() so fica com o cartao
   mais alto, que era o estado da rodada 2. */
.cartao-corpo:has(>details:only-child:not([open])){padding:var(--e-2) var(--e-6)}
.cartao-cabeca{display:flex;align-items:flex-start;gap:var(--e-3);padding:var(--e-5) var(--e-6);
border-bottom:var(--borda) solid var(--linha-fraca)}
.cartao-titulo{margin:0;font-size:var(--t-medio);font-weight:var(--peso-forte);
letter-spacing:var(--trilha-titulo)}
.cartao-fim{margin-left:auto}
.grade{display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}

/* --------------------------------------------------------------- item de lista */
.lista{display:flex;flex-direction:column;gap:var(--e-3)}
.item{position:relative;padding:var(--e-5);background:var(--superficie);
border:var(--borda) solid var(--linha);border-radius:var(--raio-4);
box-shadow:var(--sombra-repouso),var(--sombra-interna)}
/* item ja visto recua um passo; nunca por opacity, que quebraria o contraste medido */
.item.visto{background:var(--fundo-afundado);box-shadow:none}
.item.visto .item-titulo{color:var(--tinta-2);font-weight:var(--peso-normal)}
.item.visto .item-meta{color:var(--tinta-2)}
.item-topo{display:flex;align-items:flex-start;gap:var(--e-3)}
.item-titulo{margin:0;font-size:var(--t-base);font-weight:var(--peso-forte);
letter-spacing:var(--trilha-titulo);line-height:var(--altura-titulo)}
.item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin:var(--e-2) 0 0;
font-size:var(--t-rotulo);color:var(--tinta-3)}
.item-meta-sep{color:var(--tinta-4)}
.item-resumo{margin:var(--e-3) 0 0;font-size:var(--t-menor);color:var(--tinta-2)}
.item-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin-top:var(--e-4);
padding-top:var(--e-4);border-top:var(--borda) solid var(--linha-fraca)}
.item-acoes-fim{display:flex;align-items:center;gap:var(--e-2);margin-left:auto}

/* ---------------------------------------------------------------------- botao
 * O painel monta muito <button> e <input> sem classe, entao o elemento cru recebe o
 * desenho do componente. O seletor de elemento vai dentro de :where(), que tem peso ZERO:
 * sem isso `.login button` (0,1,1) venceria `.botao--primario` (0,1,0) e o botao primario
 * do login sairia branco -- foi o que aconteceu na rodada 1. */
.botao,:where(.conteudo,.login,.solta) button{display:inline-flex;align-items:center;
justify-content:center;flex:none;gap:var(--e-2);min-height:var(--alvo);padding:0 var(--e-4);
font-size:var(--t-menor);font-weight:var(--peso-medio);line-height:1;color:var(--tinta);
text-decoration:none;white-space:nowrap;background:var(--superficie);
border:var(--borda) solid var(--linha-campo);border-radius:var(--raio-1);cursor:pointer;
margin:0}
.botao .icone{color:var(--tinta-3)}
.botao--primario{color:var(--acento-tinta);background:var(--acento);border-color:var(--acento);
font-weight:var(--peso-forte)}
.botao--primario .icone{color:var(--acento-tinta)}
.botao--fantasma{color:var(--tinta-2);background:var(--transparente);
border-color:var(--transparente)}
.botao--icone{width:var(--alvo);padding:0}
.botao--pequeno{min-height:var(--e-7);padding:0 var(--e-3);font-size:var(--t-rotulo)}
.botao.ligado{color:var(--acento-tinta);background:var(--acento);border-color:var(--acento)}
.botao[disabled]{color:var(--tinta-4);border-color:var(--linha);cursor:not-allowed}
/* acao destrutiva: variante por classe precisa da propria linha de hover la embaixo,
   senao herda o hover do botao base (LIC-037) */
.botao--perigo{color:var(--erro-tinta);border-color:var(--erro-linha);background:var(--erro-fundo)}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin:var(--e-4) 0 0}

/* ----------------------------------------------------------------------- chip */
.chips{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:0}
.chip{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--e-7);
padding:0 var(--e-4);font-size:var(--t-menor);font-weight:var(--peso-medio);color:var(--tinta-2);
text-decoration:none;background:var(--superficie);border:var(--borda) solid var(--linha);
border-radius:var(--raio-pilula)}
.chip .icone{color:var(--tinta-4)}

/* ------------------------------------------------------------- filtro e aba
 * Mesmo desenho pros dois: pilula fantasma quando inativa, branca com anel de 1px
 * quando ativa. Filtro e aba sao a mesma pergunta feita em dois lugares. */
.filtros,.abas{display:flex;flex-wrap:wrap;gap:var(--e-1);margin:0;padding:0;list-style:none}
.filtro,.aba{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--alvo);
padding:0 var(--e-4);font-size:var(--t-menor);font-weight:var(--peso-medio);color:var(--tinta-2);
text-decoration:none;background:var(--transparente);border:var(--borda) solid var(--transparente);
border-radius:var(--raio-pilula);cursor:pointer}
.filtro.atual,.aba.atual,.aba[aria-current="page"]{color:var(--tinta);font-weight:var(--peso-forte);
background:var(--superficie);border-color:var(--linha);box-shadow:var(--sombra-repouso)}
.filtro-conta{padding:0 var(--e-1);font-size:var(--t-rotulo);color:var(--tinta-3)}
.barra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3);margin-bottom:var(--e-5)}
.barra-fim{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin-left:auto}

/* ------------------------------------------------------- campo e formulario */
.formulario{display:grid;gap:var(--e-5);max-width:36rem;margin:var(--e-4) 0 0}
/* o formulario do admin tem campo largo (acessos em caixas de marcar) e nao cabe em 36rem;
   solto na largura do cartao, o campo "Nome" viraria uma faixa de 900px, que mente sobre o
   tamanho do dado. 46rem e o meio termo medido na rodada 2. */
.formulario--largo{max-width:46rem}
.campo-grupo{display:grid;gap:var(--e-2);min-width:0}
.rotulo,:where(.conteudo,.login,.solta) label{display:block;font-family:var(--fonte-mono);
font-size:var(--t-rotulo);font-weight:var(--peso-forte);text-transform:uppercase;
letter-spacing:var(--trilha-rotulo);color:var(--tinta-3)}
/* rotulo de caixa de marcar e frase, nao etiqueta: volta pra sans em caixa baixa */
label.marcar{font-family:var(--fonte);font-size:var(--t-menor);font-weight:var(--peso-normal);
text-transform:none;letter-spacing:0;color:var(--tinta-2)}
.ajuda{font-size:var(--t-micro);color:var(--tinta-3)}
.campo,:where(.conteudo,.login,.solta) :where(input,select,textarea){width:100%;
min-height:var(--alvo);padding:0 var(--e-3);font-size:var(--t-campo);color:var(--tinta);
background:var(--superficie);border:var(--borda) solid var(--linha-campo);
border-radius:var(--raio-1)}
.campo::placeholder,input::placeholder,textarea::placeholder{color:var(--tinta-4)}
/* o select nativo so sai do desenho do sistema operacional com borda E padding proprios
   (LIC-037, item 1): sem isso ele fica branco no meio do tema escuro */
select{padding:0 var(--e-3);cursor:pointer}
textarea,:where(.conteudo) textarea{min-height:var(--e-10);padding:var(--e-3);
line-height:var(--altura-base);resize:vertical}
/* campo de arquivo: MESMA armadilha do select (LIC-037, item 1). O botao de escolher e
   desenhado pelo sistema operacional e nasce cinza-claro no meio do tema escuro. Achado
   olhando o render do formulario de feedback, nao lendo o CSS. */
input[type=file].campo{padding:var(--e-1) var(--e-2);line-height:var(--alvo)}
.campo::file-selector-button{margin-right:var(--e-3);min-height:var(--alvo);
padding:0 var(--e-3);font-family:var(--fonte);font-size:var(--t-menor);
font-weight:var(--peso-forte);color:var(--tinta);background:var(--superficie-2);
border:var(--borda) solid var(--linha-campo);border-radius:var(--raio-1);cursor:pointer}
/* a caixa de marcar nao e campo de texto: o width:100% esticava a caixinha */
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;
margin:0 var(--e-2) 0 0;vertical-align:-3px;accent-color:var(--acento)}
.envelope{position:relative;display:flex;align-items:center;min-width:0;flex:1 1 14rem}
.envelope .icone{position:absolute;left:var(--e-3);color:var(--tinta-4);pointer-events:none}
.envelope .campo{padding-left:var(--e-8)}
.busca{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin:0}

/* --------------------------------------------------------------------- tabela */
.painel{background:var(--superficie);border:var(--borda) solid var(--linha);
border-radius:var(--raio-4);box-shadow:var(--sombra-repouso),var(--sombra-interna);
overflow:hidden;margin:var(--e-3) 0}
/* caixa que rola precisa ser alcancavel pelo teclado: a .rolagem leva tabindex e role */
.rolagem{overflow-x:auto;overscroll-behavior-x:contain}
.tabela{width:100%;border-collapse:collapse;font-size:var(--t-menor)}
/* piso de largura: `--larga` e a tabela densa de 8 colunas (rola no computador tambem);
   `--media` e a de 6 colunas curtas, que cabe inteira em 1280 e so rola no celular. Quem
   nao tem piso nenhum e a de 3 colunas. */
.tabela--larga{min-width:var(--tabela-min)}
.tabela--media{min-width:34rem}
.tabela thead th{position:sticky;top:0;z-index:1;padding:var(--e-3) var(--e-4);
font-family:var(--fonte-mono);font-size:var(--t-rotulo);font-weight:var(--peso-forte);
text-transform:uppercase;letter-spacing:var(--trilha-kicker);text-align:left;
color:var(--tinta-3);background:var(--superficie);
border-bottom:var(--borda) solid var(--linha-forte)}
/* na tabela larga o cabecalho nao quebra (a coluna ja tem piso); nas outras ele quebra, e
   e isso que faz a de 6 colunas caber sem rolagem no computador */
.tabela--larga thead th{white-space:nowrap}
.tabela tbody th,.tabela tbody td{padding:var(--e-3) var(--e-4);text-align:left;
vertical-align:top;border-top:var(--borda) solid var(--linha-fraca)}
.tabela tbody th{font-weight:var(--peso-forte);white-space:nowrap}
/* a nota do rodape do painel: sobre a --superficie-2 a --tinta-3 da 4,38:1, abaixo do
   alvo de 4,5 (medido), entao ela sobe pra --tinta-2 */
.tabela-nota{margin:0;padding:var(--e-3) var(--e-5);font-size:var(--t-micro);
color:var(--tinta-2);background:var(--superficie-2);
border-top:var(--borda) solid var(--linha-fraca)}

/* --------------------------------------------------------------- estado vazio
 * Nunca so "nada aqui": icone, o que e, e o que fazer em seguida. */
.vazio{display:flex;flex-direction:column;align-items:center;gap:var(--e-3);
padding:var(--e-9) var(--e-6);text-align:center;border:var(--borda) dashed var(--linha-forte);
border-radius:var(--raio-4)}
.vazio .icone{width:var(--e-7);height:var(--e-7);color:var(--tinta-4);stroke-width:1.25}
.vazio-titulo{margin:0;font-size:var(--t-medio);font-weight:var(--peso-forte);
letter-spacing:var(--trilha-titulo)}
.vazio-texto{margin:0;max-width:34rem;font-size:var(--t-menor);color:var(--tinta-2)}
.vazio .acoes{justify-content:center;margin-top:var(--e-2)}

/* ---------------------------------------------------------------------- aviso
 * O `.aviso` do sistema e flex (icone + .aviso-texto). O `.msg` do painel NAO pode ser:
 * a maior parte delas carrega texto solto com um <b> no meio, e em flex cada trecho vira
 * uma COLUNA -- a frase "esta chave nao volta a ser exibida" saiu em tres colunas na
 * rodada 1. Aqui o icone e inline e o texto flui. */
.aviso{display:flex;align-items:flex-start;gap:var(--e-3)}
.aviso,.msg{margin:var(--e-4) 0;padding:var(--e-4);font-size:var(--t-menor);color:var(--tinta);
background:var(--aviso-fundo);border:var(--borda) solid var(--aviso-linha);
border-radius:var(--raio-3)}
.msg{display:block}
.aviso .icone,.msg .icone{color:var(--aviso-tinta)}
.msg .icone{vertical-align:-.25em;margin-right:var(--e-2)}
.msg p{display:inline;margin:0}
.msg b,.aviso strong{font-weight:var(--peso-forte)}
.msg.erro,.aviso--erro{background:var(--erro-fundo);border-color:var(--erro-linha)}
.msg.erro .icone,.aviso--erro .icone{color:var(--erro-tinta)}
.msg.ok,.aviso--ok{background:var(--ok-fundo);border-color:var(--ok-linha)}
.msg.ok .icone,.aviso--ok .icone{color:var(--ok-tinta)}

/* ------------------------------------------------------- estado (chip de status) */
.estado{display:inline-flex;align-items:center;gap:var(--e-1);padding:var(--e-1) var(--e-2);
font-family:var(--fonte-mono);font-size:var(--t-rotulo);font-weight:var(--peso-forte);
line-height:1;text-transform:uppercase;letter-spacing:var(--trilha-kicker);color:var(--tinta-2);
background:var(--superficie-2);border:var(--borda) solid var(--linha);
border-radius:var(--raio-pilula);white-space:nowrap}
.estado--erro{color:var(--erro-tinta);background:var(--erro-fundo);border-color:var(--erro-linha)}
.estado--aviso{color:var(--aviso-tinta);background:var(--aviso-fundo);
border-color:var(--aviso-linha)}
.estado--ok{color:var(--ok-tinta);background:var(--ok-fundo);border-color:var(--ok-linha)}
.estado--forte{color:var(--acento-tinta);background:var(--acento);border-color:var(--acento)}

/* ======================================================= so do catalogo
 * O que nao existe no sistema porque so estas telas tem. Cada bloco diz por que. */

/* contador em pilula da lateral e das abas (feedbacks nao lidos) */
.badge,.conta{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
padding:var(--e-1) var(--e-2);font-size:var(--t-rotulo);font-weight:var(--peso-forte);
line-height:1;color:var(--acento-tinta);background:var(--acento);
border:var(--borda) solid var(--acento);border-radius:var(--raio-pilula)}
.aba .badge{margin-left:var(--e-1)}

/* acervo: um cartao por agente compartilhado com a pessoa (spec-painel-pessoa, secao 2).
   `align-items:start` = o cartao que carrega o termo de download fica alto sem esticar os
   vizinhos. O nome da classe e o markup do cartao sao contrato do teste de aceite. */
.acervo{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--e-4);
margin:var(--e-3) 0 0;align-items:start}
.acervo .cartao{display:flex;flex-direction:column;gap:var(--e-2);padding:var(--e-5)}
.acervo .cartao h3{margin:0;font-size:var(--t-medio);font-weight:var(--peso-forte);
letter-spacing:var(--trilha-titulo);line-height:var(--altura-titulo)}
.acervo .cartao .oque{margin:0;font-size:var(--t-menor);color:var(--tinta-2)}
.acervo .cartao .dim{margin:0}
.acervo .cartao form{margin-top:var(--e-2)}
.acervo .cartao .msg{margin:var(--e-2) 0 0}
/* o botao de baixar carrega nome, versao e data ("Baixar growthchief 3.1.0 (versao de
   10/09/2026)"): com `nowrap` ele estourava 13px pra fora da tela em 375 (medido na
   rodada 1). Aqui ele quebra e cresce em altura, que e o que uma tela estreita tem de
   sobra. */
.acervo .cartao .botao{justify-content:flex-start;height:auto;white-space:normal;
text-align:left;padding-top:var(--e-2);padding-bottom:var(--e-2);line-height:var(--altura-titulo)}

/* metrica em cartao (bloco de uso da pessoa e numeros do admin). O rotulo vem primeiro
   por `order`, porque as duas telas montam o par em ordens diferentes e kicker em cima e
   o desenho do sistema. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--e-4);
margin:var(--e-3) 0}
/* `space-between` alinha o numero pela BASE do cartao: com ele, "pessoas ativas 30d" em
   duas linhas nao derruba so o numero daquele cartao (achado na rodada 2). E a mesma
   correcao que a `.metrica` do sistema ja carrega. */
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:var(--e-2);
padding:var(--e-5);background:var(--superficie);border:var(--borda) solid var(--linha);
border-radius:var(--raio-4);box-shadow:var(--sombra-repouso),var(--sombra-interna)}
.tile span{order:-1;font-family:var(--fonte-mono);font-size:var(--t-rotulo);
font-weight:var(--peso-forte);text-transform:uppercase;letter-spacing:var(--trilha-rotulo);
color:var(--tinta-3)}
.tile b{font-size:var(--t-numero);font-weight:var(--peso-maximo);
letter-spacing:var(--trilha-numero);line-height:var(--altura-numero)}
/* variante de TEXTO: "conta da casa" e "ainda nao usou" nao sao numero e nao cabem em 28px.
   Fica no TILE, nao no grupo: no bloco de uso da pessoa o primeiro cartao e numero de
   verdade (pecas feitas) e continua grande. */
.tile--texto b{font-size:var(--t-medio);line-height:var(--altura-titulo)}

/* bloco de conteudo com rotulo em cima (chave ativa, pessoa, agente, grupo, feedback).
   E o cartao do sistema com um passo a menos de peso: o admin empilha dezenas deles. */
.bloco{padding:var(--e-4) var(--e-5);margin:var(--e-3) 0;background:var(--superficie);
border:var(--borda) solid var(--linha);border-radius:var(--raio-3);overflow-wrap:anywhere}
.bloco>b:first-child{display:block;margin-bottom:var(--e-1);font-family:var(--fonte-mono);
font-size:var(--t-rotulo);font-weight:var(--peso-forte);text-transform:uppercase;
letter-spacing:var(--trilha-rotulo);color:var(--tinta-3)}
.bloco .dim{display:block;margin:var(--e-1) 0 0}
/* nome de pessoa e TITULO, nao rotulo: em mono caixa alta ele lia como etiqueta de campo
   no meio do bloco (achado na rodada 2). Nome de agente, de papel e de grupo continuam em
   mono caixa alta porque sao identificadores. */
.bloco--titulo>b:first-child{font-family:var(--fonte);font-size:var(--t-base);
font-weight:var(--peso-forte);text-transform:none;letter-spacing:var(--trilha-titulo);
color:var(--tinta)}
.bloco-ident{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);
margin:var(--e-1) 0 0;font-size:var(--t-micro);color:var(--tinta-3)}
.bloco form{margin-top:var(--e-3)}
.bloco-acoes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--e-2);
margin-top:var(--e-3)}
.bloco-acoes .campo-grupo{flex:0 1 auto}

/* bloco de codigo e chave: identificador tecnico, entao mono, e o fundo e a superficie
   recuada (nao o preto de antes: no tema escuro preto sobre preto some) */
code,pre,.chave-box{font-family:var(--fonte-mono)}
code{font-size:.9em;overflow-wrap:anywhere}
pre{margin:0;padding:var(--e-3) var(--e-4);font-size:var(--t-micro);line-height:1.6;
color:var(--tinta);background:var(--superficie-2);overflow-x:auto;white-space:pre-wrap;
overflow-wrap:anywhere}
.copiavel{position:relative;margin:var(--e-2) 0;background:var(--superficie-2);
border:var(--borda) solid var(--linha);border-radius:var(--raio-2);overflow:hidden}
.copiar{position:absolute;top:var(--e-2);right:var(--e-2);min-height:var(--e-7);
padding:0 var(--e-3);font-size:var(--t-rotulo)}
/* o botao flutua em cima do bloco: o texto precisa parar antes dele, senao a primeira
   linha do comando passa por baixo (achado na rodada 1) */
.copiavel pre{padding-right:5.5rem}
.chave-box{display:block;padding:var(--e-3) var(--e-4);padding-right:var(--e-10);
font-size:var(--t-micro);line-height:1.6;word-break:break-all;color:var(--tinta)}
.cmd{margin:var(--e-3) 0;background:var(--superficie);border:var(--borda) solid var(--linha);
border-radius:var(--raio-2);overflow:hidden}
.cmd .cab{padding:var(--e-2) var(--e-4);font-family:var(--fonte-mono);font-size:var(--t-rotulo);
font-weight:var(--peso-forte);text-transform:uppercase;letter-spacing:var(--trilha-kicker);
color:var(--tinta-3);border-bottom:var(--borda) solid var(--linha-fraca)}
.cmd .copiavel{margin:0;border:0;border-radius:0}

/* passo a passo numerado da instalacao */
.passos{counter-reset:p;list-style:none;margin:var(--e-3) 0;padding:0}
.passos li{counter-increment:p;position:relative;margin:var(--e-4) 0;padding-left:var(--e-8)}
.passos li::before{content:counter(p);position:absolute;left:0;top:0;display:grid;
place-items:center;width:var(--e-6);height:var(--e-6);font-family:var(--fonte-numero);
font-size:var(--t-micro);font-weight:var(--peso-maximo);font-variant-numeric:tabular-nums;
color:var(--acento-tinta);background:var(--acento);border-radius:var(--raio-pilula)}
.tecla{display:inline-block;padding:0 var(--e-2);font-family:var(--fonte-mono);
font-size:var(--t-micro);color:var(--tinta);background:var(--superficie-2);
border:var(--borda) solid var(--linha-campo);border-bottom-width:2px;border-radius:var(--raio-1)}

/* trilha de progresso da instalacao: os mesmos chips de estado do sistema */
.prog{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:0 0 var(--e-5)}
.passo{display:inline-flex;align-items:center;gap:var(--e-1);min-height:var(--e-7);
padding:0 var(--e-4);font-family:var(--fonte-mono);font-size:var(--t-rotulo);
font-weight:var(--peso-forte);text-transform:uppercase;letter-spacing:var(--trilha-kicker);
color:var(--tinta-3);background:var(--transparente);border:var(--borda) solid var(--linha);
border-radius:var(--raio-pilula);white-space:nowrap}
.passo.feito{color:var(--ok-tinta);background:var(--ok-fundo);border-color:var(--ok-linha)}
.passo.atual{color:var(--acento-tinta);background:var(--acento);border-color:var(--acento)}

/* tabela de rotulo e valor (perfil, saude): duas colunas, sem cara de planilha */
.kv{width:100%;border-collapse:collapse;font-size:var(--t-menor)}
.kv th{width:14rem;padding:var(--e-3) var(--e-5);font-family:var(--fonte-mono);
font-size:var(--t-rotulo);font-weight:var(--peso-forte);text-transform:uppercase;
letter-spacing:var(--trilha-kicker);text-align:left;vertical-align:top;color:var(--tinta-3);
border-top:var(--borda) solid var(--linha-fraca)}
.kv td{padding:var(--e-3) var(--e-5);text-align:left;vertical-align:top;
border-top:var(--borda) solid var(--linha-fraca)}
.kv tr:first-child th,.kv tr:first-child td{border-top:0}

/* barrinha de proporcao das tabelas de uso: e desenho de dado, nao de moldura */
.barrinha{position:relative;height:var(--e-2);min-width:60px;background:var(--realce);
border-radius:var(--raio-pilula);overflow:hidden}
.barrinha i{position:absolute;left:0;top:0;bottom:0;background:var(--acento);
border-radius:var(--raio-pilula)}
/* var() nao funciona em ATRIBUTO de apresentacao de svg (LIC-037, item 2): a linha e o
   ponto do grafico pegam a cor por CLASSE, daqui. */
.grafico{width:100%;max-width:600px;height:90px;margin:var(--e-3) 0}
.grafico-linha{fill:none;stroke:var(--tinta);stroke-width:2}
.grafico-ponto{fill:var(--tinta-3)}

details{margin:var(--e-3) 0}
/* o marcador de abre/fecha e o NATIVO (`disclosure-closed`/`disclosure-open`): ele desenha
   com a cor do texto e nao e glifo unicode. Com `display:flex` no summary ele some, e na
   rodada 1 o "Esqueci minha senha" ficou sem nenhuma pista de que abria. */
summary{display:list-item;list-style:disclosure-closed inside;min-height:var(--alvo);
padding:var(--e-2) 0;font-size:var(--t-menor);font-weight:var(--peso-forte);
color:var(--tinta-2);cursor:pointer}
details[open]>summary{list-style-type:disclosure-open;margin-bottom:var(--e-2)}
summary .icone{vertical-align:-.25em;margin-right:var(--e-1)}
.socorro{margin-top:var(--e-6);padding-top:var(--e-2);
border-top:var(--borda) solid var(--linha)}

dialog{max-width:28rem;width:92%;padding:var(--e-6);color:var(--tinta);
background:var(--superficie);border:var(--borda) solid var(--linha);
border-radius:var(--raio-4);box-shadow:var(--sombra-levantado)}
dialog::backdrop{background:var(--cortina)}
dialog h2{margin-top:0}

/* paginas sem menu (entrar, ativar): coluna unica, sem centralizar por vh, porque com o
   teclado aberto em tela baixa o formulario saia pra fora */
.login,.solta{width:100%;max-width:26rem;margin:0 auto;padding:clamp(22px,7vh,80px) var(--e-5)
var(--e-9)}
.solta{max-width:32rem}
.login .marca-selo,.solta .marca-selo{margin-bottom:var(--e-4)}
.login h1,.solta h1{margin:0;font-size:var(--t-titulo);font-weight:var(--peso-forte);
letter-spacing:var(--trilha-titulo)}
.login .sub,.solta .sub{margin:var(--e-1) 0 var(--e-6);font-size:var(--t-menor);
color:var(--tinta-2)}
.login h2,.solta h2{margin:0 0 var(--e-1);font-size:var(--t-medio);font-weight:var(--peso-forte);
letter-spacing:var(--trilha-titulo)}
.login .formulario,.solta .formulario{max-width:none}
.login button,.solta button{width:100%}
.login .msg,.solta .msg{margin:var(--e-4) 0 0}
@media(max-height:560px){.login,.solta{padding-top:var(--e-4)}
.login .sub{margin-bottom:var(--e-3)}}
/* o hub /portais: mesma pagina sem menu, so que larga o bastante pros cartoes caberem
   lado a lado no computador e empilharem no celular (a grade e a mesma do acervo) */
.portais{width:100%;max-width:56rem;margin:0 auto;padding:clamp(22px,7vh,80px) var(--e-5)
var(--e-9)}
.portais .marca-selo{margin-bottom:var(--e-4)}
.portais h1{margin:0;font-size:var(--t-titulo);font-weight:var(--peso-forte);
letter-spacing:var(--trilha-titulo)}
.portais .sub{margin:var(--e-1) 0 var(--e-6);font-size:var(--t-menor);color:var(--tinta-2)}
.portais .acervo{margin:0}
.portais .acervo .cartao{color:inherit;text-decoration:none}
.portais .kicker{margin:0 0 var(--e-2)}
.portais .acervo .cartao h3{display:flex;align-items:center;gap:var(--e-2);
font-size:var(--t-medio)}
.portais .acervo .cartao h3 .icone{color:var(--tinta-3)}
.cartao-ir{display:inline-flex;align-items:center;gap:var(--e-2);margin-top:auto;
padding-top:var(--e-2);font-family:var(--fonte-mono);font-size:var(--t-rotulo);
font-weight:var(--peso-forte);text-transform:uppercase;letter-spacing:var(--trilha-rotulo);
color:var(--tinta-3)}
.portais .acoes{justify-content:flex-start;margin-top:var(--e-6)}
.portais .acoes .botao{width:auto}

/* campo que so mostra valor (o codigo de ativacao ja preenchido): recua um passo em vez
   de apagar por opacity, que quebraria o contraste medido */
.campo[readonly]{color:var(--tinta-2);background:var(--fundo-afundado)}
/* larguras de campo: sao poucas e sao as do formulario do admin, onde quota e jobs/dia
   ao lado de nome numa caixa de 36rem ficariam do mesmo tamanho e mentiriam sobre o dado */
.campo-grupo--curto{max-width:9rem}
.campo-grupo--medio{max-width:16rem}
/* linha de caixas de marcar: elas sao MUITAS no admin e precisam de alvo proprio */
.caixas{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-4)}
.caixas .marcar{display:inline-flex;align-items:center;min-height:var(--alvo)}
.caixas-grupo{display:flex;flex-wrap:wrap;gap:var(--e-4) var(--e-6)}
.caixas-grupo>.campo-grupo{flex:0 1 auto}
.oque{margin:var(--e-1) 0 0;font-size:var(--t-menor);color:var(--tinta-2)}
/* colunas da tabela do admin: a da barrinha tem largura fixa (senao ela dança de linha
   em linha) e a do detalhe do log pode quebrar palavra longa */
.tabela .col-barra{width:9rem}
.tabela .col-detalhe{word-break:break-word;min-width:18rem}
.conteudo>.barra:first-child{margin-top:0}
.bloco .item-meta{margin:var(--e-1) 0 0}
.bloco .acoes,.bloco .bloco-acoes{margin-top:var(--e-3)}

/* --------------------------------------------------- botao flutuante de feedback
 * Pilula fixa no canto inferior direito de TODA tela logada (pedido do Thiago, 17/09).
 * E um <a>: leva a uma pagina, nao executa acao. z-index 3 = o plano do cabecalho
 * grudado, ABAIXO da cortina (4) e da gaveta (5), pra nunca boiar sobre o menu aberto. */
.feedback-flutuante{position:fixed;right:var(--e-5);
bottom:calc(var(--e-5) + env(safe-area-inset-bottom));z-index:3;display:inline-flex;
align-items:center;gap:var(--e-2);min-height:var(--alvo-toque);padding:0 var(--e-4);
font-size:var(--t-menor);font-weight:var(--peso-forte);color:var(--tinta);
text-decoration:none;background:var(--superficie);border:var(--borda) solid var(--linha-campo);
border-radius:var(--raio-pilula);box-shadow:var(--sombra-levantado),var(--sombra-interna)}
.feedback-flutuante .icone{color:var(--tinta-3)}

/* ------------------------------------------------- prints do feedback (3.17.0)
 * Previa das miniaturas antes de enviar e as miniaturas do feedback no /admin. A
 * mesma grade nos dois lugares: quadrado que corta pelo centro. O 96 e medida propria
 * da miniatura (nao ha token de tamanho de imagem), e o 24 do X e o piso do WCAG 2.2. */
/* `.conteudo .prints` (0,2,0) porque a grade e um <ul> e a regra de lista do conteudo
   (`.conteudo ul`, 0,1,1) empurraria as miniaturas 20px pra dentro. Visto no render. */
.prints,.conteudo .prints{display:flex;flex-wrap:wrap;gap:var(--e-3);margin:var(--e-3) 0 0;
padding:0;list-style:none}
.prints:empty{display:none}
.print{position:relative;width:96px}
.print img{display:block;width:96px;height:96px;object-fit:cover;background:var(--fundo-afundado);
border:var(--borda) solid var(--linha);border-radius:var(--raio-2)}
.print-nome{display:block;margin-top:var(--e-1);overflow:hidden;font-size:var(--t-rotulo);
color:var(--tinta-3);text-overflow:ellipsis;white-space:nowrap}
/* o X de tirar a imagem da fila: alvo de 24px no canto, o minimo do WCAG 2.2 (2.5.8).
   O seletor e `.prints .print-tirar` (0,2,0) de proposito: a regra de toque do celular
   (`.conteudo button{min-height:44px}`, 0,1,1) esticaria este botao pra uma pilula
   vertical de 24x44 em cima da miniatura. Achado olhando o render de 375px. */
.prints .print-tirar{position:absolute;top:var(--e-1);right:var(--e-1);display:grid;
place-items:center;width:24px;height:24px;min-height:0;padding:0;line-height:1;
color:var(--tinta);background:var(--superficie);border:var(--borda) solid var(--linha-campo);
border-radius:var(--raio-pilula);cursor:pointer}
.prints-aviso,.conteudo .prints-aviso{margin:var(--e-2) 0 0;font-size:var(--t-micro);
color:var(--tinta-3)}

/* --------------------------------------------------------------------- hover
 * Tudo junto e no fim, dentro de @media (hover:hover): no celular, hover que "cola"
 * depois do toque e um bug classico. */
@media(hover:hover){
.nav-item:hover{color:var(--tinta);background:var(--realce)}
.nav-item:hover .icone{color:var(--tinta-2)}
.campo::file-selector-button:hover{background:var(--realce-2)}
.perfil:hover{background:var(--superficie-2);border-color:var(--linha-campo)}
.perfil:hover .perfil-seta{color:var(--tinta-2)}
.feedback-flutuante:hover{background:var(--superficie-2)}
.feedback-flutuante:hover .icone{color:var(--tinta)}
.nav-item.atual:hover{background:var(--realce-2)}
.botao:hover,.conteudo button:hover,.login button:hover,.solta button:hover{
background:var(--superficie-2)}
.botao--primario:hover,.botao.ligado:hover{background:var(--acento-hover);
border-color:var(--acento-hover)}
.botao--fantasma:hover{color:var(--tinta);background:var(--realce);
border-color:var(--transparente)}
/* variante por classe precisa da propria linha, senao herda o hover do botao base */
.botao--perigo:hover{background:var(--erro-fundo);border-color:var(--erro-tinta)}
.botao[disabled]:hover{background:var(--superficie)}
.filtro:hover,.aba:hover{color:var(--tinta);background:var(--realce)}
.filtro.atual:hover,.aba.atual:hover{background:var(--superficie)}
.chip:hover{color:var(--tinta);background:var(--superficie-2)}
.item:hover{box-shadow:var(--sombra-levantado),var(--sombra-interna)}
.acervo .cartao:hover{box-shadow:var(--sombra-levantado),var(--sombra-interna)}
.tabela tbody tr:hover th,.tabela tbody tr:hover td{background:var(--realce)}
summary:hover{color:var(--tinta)}
}

/* ------------------------------------------------------------------- celular
 * A quebra e 800px, literal: media query nao le variavel CSS. */
.cortina{display:none}
@media(max-width:800px){
.quadro{grid-template-columns:minmax(0,1fr)}
/* a lateral vira gaveta: fora da tela por transform, nunca por width */
.lateral{position:fixed;top:0;bottom:0;left:0;z-index:5;width:var(--lateral);max-width:86vw;
height:auto;padding:var(--e-4);padding-bottom:calc(var(--e-4) + env(safe-area-inset-bottom));
background:var(--fundo);border-right:var(--borda) solid var(--linha);
transform:translateX(-101%);transition:transform var(--tempo) var(--curva)}
.lateral.aberta{transform:translateX(0);box-shadow:var(--sombra-levantado)}
.cortina{position:fixed;inset:0;z-index:4;display:block;width:100%;height:100%;margin:0;
padding:0;background:var(--cortina);border:0;border-radius:0;box-shadow:none}
.cortina[hidden]{display:none}
/* na gaveta a lateral nunca e curta */
[data-lateral="curta"] .quadro{grid-template-columns:minmax(0,1fr)}
[data-lateral="curta"] .lateral{align-items:stretch;padding:var(--e-4)}
[data-lateral="curta"] .marca-texto,[data-lateral="curta"] .nav-item-nome,
[data-lateral="curta"] .lateral-quem,[data-lateral="curta"] .grupo-rotulo{display:revert}
[data-lateral="curta"] .nav-item{justify-content:flex-start;padding:0 var(--e-3)}
.cabecalho .botao-gaveta{display:inline-flex}
.cabecalho{align-items:center;gap:var(--e-3);padding:var(--e-3) var(--e-4)}
/* no celular a trilha some: o titulo e o menu ja dizem onde a pessoa esta */
.cabecalho .trilha{display:none}
/* o fim da pagina ganha a altura do flutuante de folga: sem isso a ultima acao da tela
   (a barra de copiar, o botao de enviar) nasce embaixo da pilula */
.conteudo{padding:var(--e-4) var(--e-4)
calc(var(--e-9) + var(--alvo-toque) + env(safe-area-inset-bottom))}
.feedback-flutuante{right:var(--e-4);
bottom:calc(var(--e-4) + env(safe-area-inset-bottom))}
/* no toque, alvo de 44px */
.botao,.conteudo button,.login button,.solta button,.filtro,.aba,.campo,.nav-item,
.conteudo input,.conteudo select,.conteudo textarea,.login input,.solta input,
.login select,.solta select{min-height:var(--alvo-toque)}
.botao--icone{width:var(--alvo-toque)}
.botao--pequeno{min-height:var(--alvo)}
/* no toque o X da miniatura cresce pra 32px, sem virar um alvo que cobre o print */
.prints .print-tirar{width:var(--e-7);height:var(--e-7)}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0;vertical-align:-5px}
.item,.tile{padding:var(--e-4)}
.bloco,.cartao-corpo,.cartao-cabeca,.acervo .cartao{padding-left:var(--e-4);
padding-right:var(--e-4)}
.tabela thead th,.tabela tbody th,.tabela tbody td{padding:var(--e-3)}
.kv th,.kv td{padding:var(--e-3) var(--e-4)}
/* dedo nao tem hover: o botao de copiar sai de cima do codigo e vira barra inteira */
.copiavel{display:flex;flex-direction:column}
.copiar{position:static;order:2;width:100%;min-height:var(--alvo-toque);
border-radius:0;border-width:var(--borda) 0 0}
.chave-box{padding-right:var(--e-4)}
.titulo{font-size:var(--t-medio)}
.tiles{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
/* o bloco de uso tem TRES cartoes de texto: em duas colunas o terceiro fica orfao e a
   frase longa quebra em quatro linhas. Em coluna unica ele le de uma vez. */
.tiles--texto{grid-template-columns:minmax(0,1fr)}
/* tabela de rotulo e valor vira cartao empilhado: o <th> vira o rotulo de cima. E o
   painel que a embrulha perde a moldura, senao fica cartao dentro de cartao (rodada 3). */
.painel:has(>.rolagem>.kv),.painel:has(>.kv){background:var(--transparente);border:0;
box-shadow:none;overflow:visible}
.kv,.kv tbody,.kv tr,.kv th,.kv td{display:block;width:auto}
.kv tr{margin:0 0 var(--e-2);padding:var(--e-3) var(--e-4);background:var(--superficie);
border:var(--borda) solid var(--linha);border-radius:var(--raio-3)}
.kv th,.kv td{padding:0;border-top:0}
.kv td{padding-top:var(--e-1);word-break:break-word}
}

@media(max-width:360px){
.conteudo{padding-left:var(--e-3);padding-right:var(--e-3)}
.bloco,.tile,.item,.acervo .cartao{padding-left:var(--e-3);padding-right:var(--e-3)}
}

/* -------------------------------------------------------------- motion off */
@media(prefers-reduced-motion:reduce){.lateral{transition:none}}