/* ==========================================================================
   VALORA · folha única do sistema
   A marca NÃO mora aqui: cada consultoria tem a sua, guardada no banco (V.marca no
   valora.js). O sistema é da Ábaco; o Instituto Hevelin Pimenta é o primeiro licenciado.
   Padrão visual: 05_IDENTIDADE_VISUAL/01_PADRAO_VISUAL_HEVELIN_PIMENTA.md
   Painel de gráficos (congelado, só copiado): 03_PAINEL_GRAFICOS_APROVADO_V1.html

   CAMADAS DESTE ARQUIVO (nesta ordem):
     1 · tokens          — as duas únicas listas de cor do sistema
     2 · base            — reset, foco, seleção, tipografia de apoio
     3 · casca           — vitrine (login), barra lateral, topo, página
     4 · componentes     — tiles, cards, tabela, campos, avisos, modal, toast…
     5 · estados         — foco, hover, carregando, animações
     6 · vitrine painel  — painel do dono (classes com sufixo -v, escopo .vitrine)
     7 · modo escuro     — escolha EXPLÍCITA do usuário (nunca prefers-color-scheme)
     8 · celular         — barra de dedo, alvos de toque, tabela em cartões
     9 · impressão       — marca, papel branco, casca escondida

   REGRA DA CASA: nenhum hexadecimal solto fora dos blocos de tokens
   (:root e html[data-tema="escuro"]). Cor nova = token novo nos DOIS temas.
   ========================================================================== */

/* ---------------------------------------------------------------- 1 · TOKENS */
:root{
  color-scheme:light;
  accent-color:var(--ouro);

  /* papel (medido na logo: creme quente levemente rosado, matiz 25°) */
  --papel:#F4EBE4;
  --papel-claro:#F8F1E9;
  --papel-escuro:#E9DED5;
  --superficie:#FBF7F2;

  /* ouro folha champanhe (matiz ~34°, saturação baixa) */
  --ouro-brilho:#F0D8AE;
  --ouro-claro:#E0C79E;
  --ouro:#C7A57C;
  --ouro-sombra:#A27E54;
  --ouro-profundo:#805F3E;
  --ouro-aresta:#61554D;
  --ouro-grad:linear-gradient(135deg,#A27E54 0%,#E0C79E 28%,#F0D8AE 36%,#C7A57C 55%,#A27E54 82%,#805F3E 100%);
  --ouro-grad-noite:linear-gradient(135deg,#A27E54 0%,#D9BC8E 30%,#F3DDB3 48%,#D2B283 62%,#A27E54 85%,#8F6D48 100%);
  --ouro-grad-serifa-claro:linear-gradient(135deg,#7A5A38 0%,#A27E54 28%,#D2B283 46%,#A27E54 60%,#805F3E 82%,#6B4E30 100%);
  --ouro-shimmer:linear-gradient(110deg,#A27E54 0%,#D9BC8E 25%,#F7E4BF 42%,#D2B283 55%,#A27E54 75%,#D9BC8E 100%);

  /* ouro em transparência (véus, fios, realces) */
  --ouro-8:rgba(199,165,124,.08);
  --ouro-12:rgba(199,165,124,.12);
  --ouro-16:rgba(199,165,124,.16);
  --ouro-24:rgba(199,165,124,.24);
  --ouro-35:rgba(199,165,124,.35);
  --ouro-40:rgba(199,165,124,.40);
  --ouro-60:rgba(199,165,124,.60);
  --ouro-70:rgba(199,165,124,.70);

  /* vermelho: linha fina = vivo, área/letra = carmim. Sempre fosco, sempre pouco. */
  --vermelho:#A11E32;
  --carmim:#801026;
  --rosa:#D4566A;

  /* âmbar (atenção) */
  --ambar:#B8862B;
  --ambar-fundo:#F4E7CC;
  --ambar-texto:#7A5A12;

  /* verde-sálvia: SÓ SINAL na vitrine (nunca fundo, nunca nas telas de trabalho).
     Nas telas de trabalho o positivo é OURO. Decisão a confirmar no 01_PADRAO §6. */
  --ok-sinal:#8FBF9F;
  --ok-sinal-fio:rgba(143,191,159,.5);
  --rosa-fio:rgba(212,86,106,.6);

  /* gradientes de apoio da vitrine (barra negativa e anel da foto) */
  --grad-neg:linear-gradient(90deg,#801026,#D4566A);
  --grad-foto:radial-gradient(circle at 35% 30%,#E8D4BA,#8F6D48 70%);

  /* texto (família quente da marca; nunca preto puro nem cinza frio) */
  --texto:#3D3531;
  --texto-2:#685E59;
  --texto-3:#6F655E;      /* era #837972 — reprovava AA sobre papel */
  --texto-4:#A2978F;
  --taupe-marca:#837972;  /* o cinza-taupe medido no "INSTITUTO" da logo */
  --rotulo:#6E635B;       /* taupe escurecido: o de cima dá 3,6:1 e reprova em letra miúda */

  /* noite (moldura: barra lateral, topo, vitrines) */
  --noite:#14110F;
  --noite-2:#1B1714;
  --noite-3:#26201B;
  --noite-fundo:#0C0A08;
  --marfim:#F2EDE6;
  --marfim-2:rgba(242,237,230,.62);
  --marfim-3:rgba(242,237,230,.38);
  --marfim-fio:rgba(242,237,230,.16);
  --marfim-fio-2:rgba(242,237,230,.08);
  --luz:rgba(240,216,174,.11);

  /* SINAIS DE TEXTO — os que trocam no modo escuro (contraste AA nos dois temas) */
  --alerta-texto:#801026;         /* escuro: #E38A99 */
  --ouro-texto:#805F3E;           /* escuro: #E0C79E */
  --erro-noite:#E38A99;           /* texto de erro sobre fundo noite (login/toast) */
  --btn-ouro-texto:#241A11;       /* texto sobre a folha de ouro (escurecido em 20-09: #2B2015 dava 4,28:1) */
  --sinal-vermelho-fundo:#801026; /* bolinha de semáforo; escuro: #C8506A */

  /* fios e relevo */
  --fio-suave-cor:#E3D8CD;
  --fio-suave:1px solid var(--fio-suave-cor);
  --fio-ouro:1px solid #C7A57C;
  --fio-ouro-40:1px solid rgba(199,165,124,.40);
  --relevo-escuro:rgba(97,85,77,.45);
  --relevo-claro:rgba(255,255,255,.85);

  /* superfícies que mudam no escuro */
  --campo-bg:#FFFFFF;
  --sombra-realce:#FFFFFF;
  --badge-ok-bg:#EEE3D2;
  --badge-alerta-bg:#F3E1E3;
  --badge-alerta-fio:#D9A2AA;
  --badge-perigo-bg:#F8ECEE;
  --destaque-grad:var(--ouro-grad-serifa-claro);

  /* fontes */
  --f-display:'Instrument Serif','Instrument Serif Fallback','Playfair Display',Georgia,serif;
  --f-titulo:'Jost','Segoe UI',sans-serif;
  --f-texto:'Inter','Segoe UI',sans-serif;

  /* escala tipográfica (piso de 10,5px em qualquer rótulo) */
  --t-micro:10.5px;
  --t-rotulo:11px;
  --t-legenda:12.5px;
  --t-texto:14px;
  --t-sub:15px;
  --t-h3:24px;
  --t-nome:22px;
  --t-kpi:40px;
  --t-titulo:clamp(30px,3.6vw,46px);
  --t-heroi:clamp(44px,6vw,84px);
  --tr-rotulo:.25em;
  --tr-micro:.3em;

  /* escala de espaço */
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px; --esp-6:32px;

  /* movimento */
  --dur:.18s;
  --curva:cubic-bezier(.2,.8,.2,1);

  /* impressão (usados no @media print pra desfazer o modo escuro no papel) */
  --papel-print:#FFFFFF;
  --papel-escuro-print:#EEEAE6;
  --texto-print:#3D3531;
  --texto-2-print:#685E59;
  --texto-3-print:#6F655E;
  --fio-print-cor:#DDD6CE;
}

/* fallback métrico da serifa: enquanto a Instrument Serif não carrega, Georgia
   entra com as mesmas medidas — a manchete não "pula" quando a fonte chega. */
@font-face{
  font-family:'Instrument Serif Fallback';
  src:local('Georgia'),local('Times New Roman');
  size-adjust:88%;
  ascent-override:90%;
  descent-override:22%;
}

/* ------------------------------------------------------------------ 2 · BASE */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font:var(--t-texto)/1.5 var(--f-texto);
  color:var(--texto);
  background:var(--noite);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--texto)}
img{max-width:100%}
.oculto{display:none!important}
::selection{background:var(--ouro-35);color:inherit}

/* foco visível em ouro — só pra quem navega por teclado */
:focus-visible{outline:2px solid var(--ouro);outline-offset:2px;border-radius:3px}
:focus:not(:focus-visible){outline:0}

/* sinais de texto reutilizáveis */
.neg{color:var(--alerta-texto);font-weight:600}
.pos{color:var(--ouro-texto)}
/* relevo de folha de ouro (deboss medido na logo) — SÓ no número-herói, um por tela */
.ouro-relevo{filter:drop-shadow(-1px -1px 0 var(--relevo-escuro)) drop-shadow(1px 1px 0 var(--relevo-claro))}
/* brilho que corre no texto (copiado do painel aprovado) */
.shimmer{
  background:var(--ouro-shimmer);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shine 4.5s linear infinite;
  filter:drop-shadow(0 0 18px rgba(240,216,174,.28));
}
/* divisória ornamental da marca: fio de ouro com o segmento vermelho na ponta */
hr.fio{
  border:0;
  height:1px;
  background:linear-gradient(90deg,var(--ouro) 0%,var(--ouro) 92%,var(--vermelho) 92%,var(--vermelho) 100%);
  margin:22px 0;
}

/* ----------------------------------------------------------------- 3 · CASCA */
/* ---- vitrine (login) ---- */
.vitrine{
  min-height:100vh;
  color:var(--marfim);
  background:
    radial-gradient(55% 45% at 28% 0%,var(--luz) 0%,transparent 60%),
    radial-gradient(120% 90% at 50% 60%,var(--noite-2) 0%,var(--noite) 70%,var(--noite-fundo) 100%);
  position:relative;
}
.vitrine::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8 0 0 0 0 .75 0 0 0 0 .7 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;padding:52px 64px;gap:48px;max-width:1240px;margin:0 auto;position:relative}
.login .logo{width:300px;max-width:80%;display:block;margin:0 0 36px}
.micro{font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--marfim-2);display:flex;gap:18px;flex-wrap:wrap;margin:0 0 30px}
.micro span+span::before{content:"|";margin-right:18px;color:var(--ouro-60)}
.manchete{font:400 clamp(40px,5vw,66px)/1.0 var(--f-display);letter-spacing:-.01em;margin:0 0 20px;color:var(--marfim)}
.manchete em{font-style:italic;background:var(--ouro-grad-noite);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(240,216,174,.28))}
.login p.sub{color:var(--marfim-2);font:italic 400 19px/1.4 var(--f-display);max-width:440px;margin:0 0 28px;text-transform:none;letter-spacing:0}
.card-noite{background:rgba(255,255,255,.035);border:var(--fio-ouro-40);border-radius:6px;backdrop-filter:blur(6px);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.form{padding:36px 36px 30px}
.form .rot{font:400 var(--t-rotulo)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--marfim-2);margin:0 0 8px}
.form input{width:100%;height:46px;border:1px solid var(--marfim-fio);border-radius:3px;background:rgba(0,0,0,.25);padding:0 14px;color:var(--marfim);font-size:var(--t-texto);margin:0 0 18px}
.form input:focus{border-color:var(--ouro-70);box-shadow:0 0 0 3px var(--ouro-12)}
.form .linha{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.form .linha a,.form .linha button.link{font-size:12px;color:var(--marfim-2);text-decoration:none;letter-spacing:.06em;background:none;border:0;padding:0}
.form .erro{color:var(--erro-noite);font-size:13px;margin:-8px 0 12px;min-height:18px}
.wordmark{font:italic 400 30px/1 var(--f-display);background:var(--ouro-grad-noite);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- moldura das telas de trabalho ---- */
.trabalho{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:100vh;background:var(--noite)}
/* overflow-y:auto: a barra tem 100vh de altura e o menu é maior que isso em janela baixa (medido no Chrome do
   Weslei, 08/09: 825px de menu numa janela de 551px) — sem rolagem, os últimos itens ficavam inalcançáveis. */
.lateral{background:linear-gradient(180deg,var(--noite-2),var(--noite));border-right:var(--fio-ouro-40);padding:22px 16px;color:var(--marfim);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ouro-40) transparent}
/* height:auto é obrigatório: o <img> traz width/height no HTML (reserva de espaço, sem salto de layout) e o
   CSS só sobrescrevia a largura — a altura de 359px do atributo continuava valendo e a imagem de 1200×359
   era esmagada em 179×359. Era isto o logo "fantasma/borrado" relatado pelo Weslei, 08/09 (não era a GPU). */
.lateral .logo{width:100%;height:auto;display:block;margin:0 0 6px}
.lateral .marca{font:italic 400 15px/1 var(--f-display);color:var(--ouro-claro);text-align:center;margin:0 0 26px;letter-spacing:.02em}
.nav a{display:flex;align-items:center;gap:12px;font:400 12.5px/1 var(--f-titulo);letter-spacing:.14em;text-transform:uppercase;color:var(--marfim-2);padding:12px 10px;border-radius:3px;text-decoration:none;position:relative;transition:color var(--dur),background-color var(--dur)}
.nav a i{width:7px;height:7px;border:1px solid var(--ouro-60);transform:rotate(45deg);display:inline-block;flex:none}
.nav a svg{width:15px;height:15px;flex:none;color:var(--ouro-60)}
.nav a:hover{color:var(--marfim)}
.nav a:hover svg{color:var(--ouro-claro)}
.nav a.ativo{color:var(--ouro-claro);background:var(--ouro-8)}
.nav a.ativo::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--ouro)}
.nav a.ativo i{background:var(--ouro);border-color:var(--ouro)}
.nav a.ativo svg{color:var(--ouro-claro)}
.nav a:focus-visible{outline-offset:-2px}
.nav a .cont{margin-left:auto;font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.1em;color:var(--noite);background:var(--ouro);border-radius:10px;padding:4px 7px}
.lateral .rodape{margin-top:auto;padding-top:18px;border-top:var(--fio-ouro-40);font-size:12px;color:var(--marfim-2)}
.lateral .rodape b{display:block;font:400 17px/1.2 var(--f-display);letter-spacing:0;color:var(--marfim)}
.lateral .rodape a{color:var(--ouro-claro);text-decoration:none;font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;display:inline-block;margin-top:8px}
.miolo{display:flex;flex-direction:column;background:var(--noite);min-width:0}
.topo{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 28px;border-bottom:var(--fio-ouro-40);color:var(--marfim);flex-wrap:wrap}
.topo .micro{margin:0}
.topo .logo-mini{display:none;width:28px;height:28px;flex:none}
.topo select.clinica{color-scheme:dark;background:rgba(0,0,0,.25);color:var(--marfim);border:1px solid var(--marfim-fio);border-radius:3px;height:34px;padding:0 10px;font:400 12.5px var(--f-titulo);letter-spacing:.06em;max-width:280px}
.topo .busca{width:260px;height:34px;border:1px solid var(--marfim-fio);border-radius:3px;padding:0 12px;background:rgba(0,0,0,.25);color:var(--marfim);font-size:12.5px}
.topo .busca::placeholder{color:var(--marfim-3)}
.topo .quem{display:flex;align-items:center;gap:10px;font:400 12px/1 var(--f-titulo);letter-spacing:.1em;color:var(--marfim-2)}
.topo .quem b{width:30px;height:30px;border-radius:50%;background:var(--ouro-grad);display:inline-block}
.pagina{
  flex:1;
  background:radial-gradient(ellipse at 50% 0%,var(--papel-claro) 0%,var(--papel) 60%,var(--papel-escuro) 100%);
  padding:28px 28px 40px;
  color:var(--texto);
  min-width:0;
  animation:aparecer var(--dur) var(--curva);
}
.pagina>*{min-width:0}

/* ---- cabeçalho de página ---- */
.cabecalho{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.cabecalho .acoes{margin-bottom:20px}
.cabecalho .cab-texto{min-width:0}
.cabecalho .cabecalho{margin:0;flex:1 1 auto}
.rotulo{font:400 var(--t-rotulo)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--rotulo);display:inline-flex;align-items:center;gap:10px;margin:0 0 8px}
.rotulo::before{content:"";width:34px;height:2px;background:var(--vermelho);flex:none}
h2.titulo{font:400 var(--t-titulo)/1.05 var(--f-display);margin:0 0 4px;color:var(--texto);letter-spacing:-.01em}
h2.titulo em{font-style:italic;background:var(--destaque-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font:400 12px/1.6 var(--f-titulo);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);margin:0 0 20px}
.desc-sub{font:400 13px/1.5 var(--f-texto);color:var(--texto-2);max-width:720px;margin:0 0 20px;text-transform:none;letter-spacing:0}

/* ---------------------------------------------------------- 4 · COMPONENTES */
/* ---- grades ---- */
.grade{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.grade.larga{grid-template-columns:minmax(0,1fr)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 22px}
.tiles.largos{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ---- tile ---- */
.tile{background:var(--superficie);border:var(--fio-suave);border-top:2px solid var(--ouro);border-radius:6px;padding:14px 16px 12px;box-shadow:0 1px 0 var(--sombra-realce) inset,0 8px 20px rgba(97,85,77,.08);min-width:0}
.tile .l{font:400 var(--t-rotulo)/1.3 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--rotulo)}
.tile .n{font:400 clamp(22px,2.2vw,30px)/1.05 var(--f-display);color:var(--texto);font-variant-numeric:tabular-nums;margin:6px 0 2px;white-space:normal;overflow:visible;text-overflow:clip}
.tile .n.ouro{background:var(--destaque-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tile .n.alerta{color:var(--alerta-texto)}
.tile .s{font-size:11.5px;color:var(--texto-3)}
a.tile{text-decoration:none;transition:transform var(--dur) var(--curva),box-shadow var(--dur),border-color var(--dur)}
a.tile:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(97,85,77,.14);border-color:var(--ouro)}
a.tile .seta{float:right;color:var(--ouro-texto)}

/* ---- número-herói ---- */
.heroi-box{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:0 0 6px}
.heroi{font:400 var(--t-heroi)/1 var(--f-display);letter-spacing:-.005em;font-variant-numeric:tabular-nums;background:var(--destaque-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.heroi small{font-size:.4em;vertical-align:.6em;margin-right:.1em}
.frase{font:italic 400 17px/1.35 var(--f-display);color:var(--texto-2);margin:0 0 18px;max-width:640px}

/* ---- resposta viva (o número que recalcula enquanto a pessoa preenche) ---- */
.resposta-viva{
  position:sticky;top:12px;z-index:5;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  background:var(--superficie);border:var(--fio-suave);border-top:2px solid var(--ouro);
  border-radius:6px;padding:12px 18px;margin:0 0 18px;
  box-shadow:0 8px 20px rgba(97,85,77,.08);
}
.resposta-viva .l{font:400 var(--t-rotulo)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--rotulo)}
.resposta-viva .n{font:400 34px/1 var(--f-display);background:var(--destaque-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.resposta-viva .n.pisca{animation:brilha .9s var(--curva)}
.resposta-viva .s{font-size:12.5px;color:var(--texto-3)}

/* ---- tabela ---- */
table.tab{width:100%;border-collapse:collapse;background:var(--superficie);border:var(--fio-suave);border-radius:6px;overflow:hidden;font-size:13px}
.tab th{font:400 var(--t-rotulo)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--rotulo);text-align:left;padding:12px 12px;border-bottom:var(--fio-ouro);background:var(--papel-claro);white-space:nowrap;user-select:none;position:sticky;top:0;z-index:1;cursor:default}
.tab th.ord{cursor:pointer}
.tab th button.ord{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.tab th button.ord:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.tab th .seta{display:inline-block;width:10px;color:var(--ouro-texto)}
.tab td{padding:10px 12px;border-bottom:var(--fio-suave);font-variant-numeric:tabular-nums;vertical-align:middle}
.tab td.n,.tab th.n{text-align:right;white-space:nowrap}
.tab td:first-child{white-space:nowrap}
.tab tr.clic{cursor:pointer}
.tab tr.clic:hover td{background:var(--ouro-8)}
.tab tr.clic:focus-visible{outline:0}
.tab tr.clic:focus-visible td{background:var(--ouro-12);box-shadow:inset 3px 0 0 var(--ouro)}
.tab tr.sel td{background:var(--ouro-12)}
.tab tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--ouro)}
.tab tr.total td{border-bottom:0;background:var(--papel-claro);font-weight:600}
.tab td .mini{display:block;font-size:11px;color:var(--texto-3);white-space:normal;max-width:220px;line-height:1.3}
.tab tr .so-hover{opacity:0;transition:opacity var(--dur)}
.tab tr:hover .so-hover,.tab tr:focus-within .so-hover{opacity:1}
.tab-rolagem{position:relative;max-height:72vh;overflow:auto;border-radius:6px}
.tab .vazio-cel{text-align:center;color:var(--texto-3);padding:22px;font:italic 400 var(--t-sub) var(--f-display)}
.tab td .vazio-ed{border:0;background:transparent;padding:22px 12px}
.tab-rolagem.rola::after{content:"";position:sticky;right:0;top:0;bottom:0;width:24px;background:linear-gradient(90deg,transparent,var(--superficie));pointer-events:none;float:right}

/* ---- badge / selo de plano ---- */
.badge{display:inline-block;font:400 var(--t-rotulo)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;padding:6px 8px 5px;border-radius:3px;white-space:nowrap}
.badge.ok{background:var(--badge-ok-bg);color:var(--ouro-texto);border:1px solid var(--ouro)}
.badge.atencao{background:var(--ambar-fundo);color:var(--ambar-texto);border:1px solid var(--ambar)}
.badge.alerta{background:var(--badge-alerta-bg);color:var(--alerta-texto);border:1px solid var(--badge-alerta-fio)}
.badge.neutro{background:var(--papel-escuro);color:var(--texto-2);border:var(--fio-suave)}

/* §15 · campo trancado — o dado de um plano acima aparece no lugar de sempre,
   apagado, com cadeado e o degrau que destrava. Nunca o número real borrado. */
.trancado{display:inline-flex;align-items:center;gap:5px;font:400 var(--t-rotulo)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;padding:6px 9px 5px;border-radius:3px;color:var(--texto-3);background:transparent;border:1px dashed var(--ouro-40);white-space:nowrap;cursor:default}
.trancado .cadeado{display:inline-flex;line-height:1}
.trancado .cadeado svg{width:11px;height:11px;stroke:currentColor;color:var(--ouro-texto)}
.trancado .selo{color:var(--ouro-texto);font-weight:600}

/* card trancado (a vitrine do plano de cima dentro da tela de trabalho) */
.card.trancado{display:block;border:1px dashed var(--ouro-40);border-top:1px dashed var(--ouro-40);color:var(--texto-3);box-shadow:none;cursor:default}
.card.trancado .exemplo{font:400 34px/1 var(--f-display);background:var(--destaque-grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.45;font-variant-numeric:tabular-nums}
.card.trancado .frase{color:var(--texto-3);font:italic 400 15px/1.4 var(--f-display);margin:6px 0 10px;max-width:520px}
.card.trancado .calculados{font-size:12.5px;color:var(--texto-3);margin:0 0 12px}

/* ---- card ---- */
.card{background:var(--superficie);border:var(--fio-suave);border-top:2px solid var(--ouro);border-radius:6px;padding:20px 20px 18px;box-shadow:0 1px 0 var(--sombra-realce) inset,0 10px 26px rgba(97,85,77,.10);margin:0 0 18px;min-width:0}
.card .nome{font:400 var(--t-nome)/1.15 var(--f-display);margin:0 0 12px;color:var(--texto)}
.lin,.card .lin{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:var(--fio-suave);color:var(--texto-2);font-variant-numeric:tabular-nums}
.lin b,.card .lin b{color:var(--texto);font-weight:500;white-space:nowrap}
.kpi-rot,.card .kpi-rot{font:400 var(--t-rotulo)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--rotulo);margin:16px 0 6px}
.kpi,.card .kpi{font:400 var(--t-kpi)/1 var(--f-display);letter-spacing:0;background:var(--destaque-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.leg,.card .leg{font-size:12px;color:var(--texto-3);margin:6px 0 12px}
/* número negativo/positivo vence a cor do bloco onde estiver (a legenda cinza estava apagando o carmim) */
.neg,.card .neg,.leg .neg,.tab .neg{color:var(--alerta-texto)}
.pos,.card .pos,.leg .pos,.tab .pos{color:var(--ouro-texto)}

/* card de ação (plano do mês / painel do dono) */
.acao-card .itens{margin:10px 0 0;font-size:12.5px}
.acao-card .itens .it{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:var(--fio-suave);font-variant-numeric:tabular-nums}
.acao-card .itens .it .de{color:var(--texto-3);text-decoration:line-through;margin-right:6px}
.acao-card .itens .it .para{color:var(--ouro-texto);font-weight:600}
.acao-card .bt{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.acao-card.saindo{animation:fade var(--dur) reverse forwards}

/* ---- botões ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 11px/1 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;padding:12px 18px;border-radius:3px;border:0;text-decoration:none;white-space:nowrap;transition:transform var(--dur) var(--curva),box-shadow var(--dur),background-color var(--dur),border-color var(--dur)}
.btn.ouro{color:var(--btn-ouro-texto);background:var(--ouro-grad);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 4px 12px rgba(128,95,62,.25)}
.btn.ouro:hover{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 20px rgba(128,95,62,.32);transform:translateY(-1px)}
.btn.fio{color:var(--ouro-texto);border:var(--fio-ouro);background:transparent}
.btn.fio:hover{background:var(--ouro-8)}
.btn.leve{color:var(--texto-2);border:var(--fio-suave);background:var(--papel-claro)}
.btn.leve:hover{border-color:var(--ouro)}
.btn.perigo{color:var(--alerta-texto);border:1px solid var(--badge-alerta-fio);background:var(--badge-perigo-bg)}
.btn.perigo:hover{background:var(--badge-alerta-bg)}
.btn.mini{padding:8px 12px;font-size:var(--t-micro);letter-spacing:.16em}
.btn.grande{padding:16px 30px;letter-spacing:.24em;font-size:12px}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.68;cursor:not-allowed}
/* botão em ação: o rótulo some e entra o giro de ouro */
.btn.carregando{position:relative;color:transparent!important;pointer-events:none}
.btn.carregando::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border:1.5px solid rgba(43,32,21,.25);border-top-color:var(--btn-ouro-texto);border-radius:50%;animation:gira .8s linear infinite}
.btn.fio.carregando::after,.btn.leve.carregando::after,.btn.perigo.carregando::after{border-color:var(--ouro-40);border-top-color:var(--ouro)}
/* os apelidos .btn-ouro/.btn-fio saíram em 20/09/2026: nenhuma tela usava
   (conferido em web/ e api/) e o .btn-fio pintava ouro claro sobre papel — 1,39:1. */
.acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- campo é pergunta ---- */
.pergunta{margin:0 0 16px;min-width:0}
.pergunta label{display:block;font:400 14.5px/1.35 var(--f-texto);color:var(--texto);margin:0 0 6px}
.pergunta label small{display:block;font-size:12px;color:var(--texto-3);margin-top:2px}
.pergunta .campo{display:flex;align-items:center;gap:8px;height:42px;border:var(--fio-suave);border-radius:3px;background:var(--campo-bg);padding:0 12px;max-width:420px}
.pergunta .campo:focus-within{border-color:var(--ouro);box-shadow:0 0 0 3px var(--ouro-16)}
.pergunta .campo input,.pergunta .campo select{border:0;background:transparent;flex:1;min-width:0;height:100%;font-size:var(--t-texto)}
.pergunta .campo .un{font:400 var(--t-rotulo)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);color:var(--texto-3);text-transform:uppercase;white-space:nowrap}
.pergunta .campo .un.pre{order:-1}
.pergunta .campo input.dinheiro{text-align:right;font-variant-numeric:tabular-nums}
.pergunta .campo.curto{max-width:200px}
.pergunta .campo.pulsa{animation:pulsa 1.2s 2}
.pergunta textarea{width:100%;max-width:520px;min-height:70px;border:var(--fio-suave);border-radius:3px;padding:10px 12px;background:var(--campo-bg)}
.pergunta .salvo{font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-texto);margin:4px 0 0;opacity:0;transition:opacity var(--dur)}
.pergunta .salvo.on{opacity:1}
.resposta{font:italic 400 var(--t-sub)/1.4 var(--f-display);color:var(--ouro-texto);margin:6px 0 0}
/* AJUSTES DE 28/09: os números seguem o itálico da frase (em pé, noutro tamanho, "as letras ficavam estranhas") e
   saem em creme claro — no dourado claro de antes ficavam mais apagados que as palavras em volta */
.resposta b{font-style:inherit;font-weight:400;background:none;-webkit-text-fill-color:currentColor;color:var(--texto)}
.linha-campos{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.linha-campos .pergunta{flex:1 1 180px;margin:0}
.linha-campos .btn{align-self:flex-end;height:42px}
/* campo solto (busca de lista, filtro) */
.campo-simples{display:flex;align-items:center;gap:8px;height:42px;border:var(--fio-suave);border-radius:3px;background:var(--campo-bg);padding:0 12px;max-width:320px}
.campo-simples:focus-within{border-color:var(--ouro);box-shadow:0 0 0 3px var(--ouro-16)}
.campo-simples svg{width:15px;height:15px;flex:none;color:var(--texto-3)}
.campo-simples input{border:0;background:transparent;flex:1;min-width:0;font-size:var(--t-texto)}
/* controles nativos vestidos na marca */
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.campo select,.pergunta .campo select{appearance:none;-webkit-appearance:none;padding-right:26px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23C7A57C' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5 6 7.5 9 4.5'/></svg>") no-repeat right 8px center}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid var(--ouro);border-radius:3px;background:var(--campo-bg);display:inline-grid;place-content:center;vertical-align:middle;cursor:pointer}
input[type=checkbox]:checked::before{content:"";width:9px;height:9px;background:var(--ouro-grad)}

/* ---- seletor de competência ---- */
.mes{display:inline-flex;align-items:center;gap:10px}
.mes b{font:italic 400 18px/1 var(--f-display);color:var(--texto);min-width:150px;text-align:center;font-weight:400}
.mes button{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;color:var(--texto-2);border:var(--fio-suave);background:var(--papel-claro);border-radius:3px;font:500 11px/1 var(--f-titulo);letter-spacing:.16em;text-transform:uppercase;padding:8px 10px;transition:border-color var(--dur)}
.mes button:hover{border-color:var(--ouro)}

/* ---- seção ---- */
.secao{margin:0 0 26px;padding:0 0 22px;border-bottom:var(--fio-suave)}
.secao h3{font:400 var(--t-h3)/1.15 var(--f-display);margin:0 0 4px;color:var(--texto)}
.secao .desc{font-size:12.5px;color:var(--texto-3);margin:0 0 14px;max-width:720px}

/* ---- avisos ---- */
.aviso{background:var(--ambar-fundo);border:1px solid var(--ambar);border-radius:6px;padding:12px 16px;font-size:13px;color:var(--ambar-texto);margin:0 0 18px}
/* o ícone flutua: se fosse flex, cada pedaço de texto solto viraria uma coluna */
.aviso>svg{width:16px;height:16px;float:left;margin:2px 10px 0 0}
.aviso::after{content:"";display:block;clear:both}
.aviso.vermelho{background:var(--badge-perigo-bg);border-color:var(--badge-alerta-fio);color:var(--alerta-texto)}
.aviso.ouro{background:var(--badge-ok-bg);border-color:var(--ouro);color:var(--ouro-texto)}
.aviso.nota{background:var(--papel-escuro);border-color:var(--fio-suave-cor);color:var(--texto-2)}
.aviso a{color:inherit;font-weight:600}

/* ---- listas ---- */
.lista{list-style:none;margin:0;padding:0}
.lista li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 0;border-bottom:var(--fio-suave);font-size:13px}
.lista li .t small{display:block;color:var(--texto-3);font-size:11.5px}
.lista li .v{white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- vazio ---- */
.vazio{padding:26px;text-align:center;color:var(--texto-3);font:italic 400 var(--t-sub) var(--f-display);background:var(--superficie);border:var(--fio-suave);border-radius:6px}
.vazio-ed{position:relative;padding:36px 26px;text-align:center;background:var(--superficie);border:var(--fio-suave);border-radius:6px;overflow:hidden}
.vazio-ed::before{content:"";position:absolute;inset:0;background:url("MONOGRAMA_H_256.png") center/120px no-repeat;opacity:.08;pointer-events:none}
.vazio-ed>*{position:relative}
.vazio-ed h4{font:italic 400 var(--t-h3)/1.1 var(--f-display);margin:0 0 6px;color:var(--texto)}
.vazio-ed p{color:var(--texto-2);margin:0 0 14px}

/* ---- esqueleto (folha de ouro correndo enquanto o dado não chega) ---- */
.esqueleto{margin:0 0 18px}
.esqueleto.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.esqueleto .esq,.esq.tile,.esq.linha,.esq.card{
  background:linear-gradient(90deg,var(--papel-escuro) 0%,var(--ouro-24) 40%,var(--papel-escuro) 80%);
  background-size:220% 100%;
  animation:esq 1.4s linear infinite;
  border-radius:4px;
  min-height:14px;
}
.esq.tile{height:84px}
.esq.linha{height:38px;margin:6px 0}
.esq.card{height:180px}
.esqueleto.saindo{animation:fade var(--dur) reverse forwards}

/* ---- progresso ---- */
.progresso{height:8px;border-radius:4px;background:var(--papel-escuro);overflow:hidden;margin:8px 0 4px}
.progresso i{display:block;height:100%;background:var(--ouro-grad);border-radius:4px;transition:width .6s var(--curva)}

/* ---- busca viva ---- */
.sugestoes{position:absolute;z-index:20;background:var(--campo-bg);border:var(--fio-ouro);border-radius:3px;box-shadow:0 12px 30px rgba(97,85,77,.18);max-height:260px;overflow:auto;width:100%;max-width:420px}
.sugestoes div{padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:var(--fio-suave)}
.sugestoes div:hover,.sugestoes div.ativo{background:var(--ouro-16)}
.sugestoes div small{display:block;color:var(--texto-3);font-size:11px}
.rel{position:relative}

/* ---- toasts (empilham como cartões de visita, no máximo três) ---- */
.toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:50;max-width:90vw;pointer-events:none}
.toast{
  position:static;transform:none;pointer-events:auto;
  display:flex;align-items:center;gap:10px;
  background:var(--noite-2);color:var(--marfim);border:var(--fio-ouro-40);border-radius:4px;
  padding:12px 18px;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.4);max-width:90vw;
  animation:sobe .22s var(--curva);
}
.toast svg{width:16px;height:16px;flex:none;color:var(--ouro)}
.toast.erro{border-color:var(--badge-alerta-fio);color:var(--marfim)}
.toast.erro svg{color:var(--erro-noite)}
.toast .fechar,.toast .desfazer{background:none;border:0;color:var(--ouro-claro);font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.16em;text-transform:uppercase;padding:4px 6px}
.toast .fechar:hover,.toast .desfazer:hover{color:var(--ouro-brilho)}
.toast.saindo{animation:fade var(--dur) reverse forwards}

/* ---- modal ---- */
.modal-fundo{position:fixed;inset:0;background:rgba(14,12,10,.6);backdrop-filter:blur(3px);z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade var(--dur)}
.modal{background:var(--papel);border-top:2px solid var(--ouro);border-radius:6px;max-width:640px;width:100%;max-height:90vh;overflow:auto;padding:24px 26px;box-shadow:0 30px 80px rgba(0,0,0,.5);color:var(--texto);animation:sobe .22s var(--curva)}
.modal:focus{outline:0}
.modal h3{font:400 26px/1.1 var(--f-display);margin:0 0 14px;color:var(--texto)}
.modal.perigo{border-top-color:var(--carmim)}
.codigo{font:400 34px/1 var(--f-display);letter-spacing:.2em;background:var(--destaque-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:8px 0}

/* ---- chips ---- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.chip{font:400 var(--t-rotulo)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;padding:8px 11px;border-radius:14px;border:var(--fio-suave);background:var(--superficie);color:var(--texto-2);cursor:pointer;transition:border-color var(--dur),color var(--dur)}
.chip:hover{border-color:var(--ouro)}
.chip.ativo{border-color:var(--ouro);color:var(--ouro-texto);background:var(--badge-ok-bg)}

/* ---- semáforo ---- */
.sem{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.sem.verde{background:var(--ouro)}
.sem.atencao{background:var(--ambar)}
.sem.vermelho{background:var(--sinal-vermelho-fundo)}
.sem.neutro{background:var(--texto-4)}

/* ---- paleta de comando ("o que você quer fazer?") ---- */
.paleta-fundo{position:fixed;inset:0;background:rgba(14,12,10,.5);backdrop-filter:blur(3px);z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:10vh 20px;animation:fade var(--dur)}
.paleta{width:100%;max-width:620px;background:rgba(27,23,20,.96);border:var(--fio-ouro-40);border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5);color:var(--marfim);overflow:hidden;animation:sobe .22s var(--curva)}
.paleta input{width:100%;height:48px;font-size:var(--t-sub);border:0;border-bottom:var(--fio-ouro-40);background:rgba(0,0,0,.25);color:var(--marfim);padding:0 18px}
.paleta input::placeholder{color:var(--marfim-3)}
.paleta .rolo{max-height:52vh;overflow:auto}
.paleta .grupo{font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--marfim-2);padding:10px 16px 4px}
.paleta .item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font:400 17px/1.2 var(--f-display);cursor:pointer}
.paleta .item.ativo{background:var(--ouro-12);box-shadow:inset 3px 0 0 var(--ouro)}
.paleta .item small{font:400 11px var(--f-texto);color:var(--marfim-2);white-space:nowrap}
.paleta .nada{padding:18px 16px;color:var(--marfim-2);font:italic 400 15px var(--f-display)}

/* ---- folha do "Mais" (celular) ---- */
.folha-menu{display:none}

/* ---- assinatura da análise (consultora / Instituto) ---- */
.assinatura{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.assinatura .anel{width:44px;height:44px;border-radius:50%;flex:none;background:var(--papel-escuro) center/cover no-repeat;box-shadow:0 0 0 2px var(--superficie),0 0 0 3px var(--ouro-60)}
.assinatura .quem{font:400 18px/1.15 var(--f-display);color:var(--texto)}
.assinatura .quem small{display:block;font:400 var(--t-rotulo)/1.5 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--taupe-marca)}

/* ------------------------------------------------- 5 · ESTADOS E MOVIMENTO */
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}}
@keyframes aparecer{from{opacity:0;transform:translateY(4px)}}
@keyframes esq{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes shine{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes pulsa{50%{box-shadow:0 0 0 4px var(--ouro-40)}}
@keyframes brilha{50%{filter:drop-shadow(0 0 14px rgba(240,216,174,.55))}}

/* respeito a quem pediu menos movimento, e modo ?static=1 pra captura de tela */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body.static *{animation:none!important;transition:none!important}

/* ---------------------------------------- 6 · VITRINE (painel do dono) ----
   Copiado de 03_PAINEL_GRAFICOS_APROVADO_V1.html (congelado — só cópia, nunca
   edição) e de dono.html. Tudo sob .vitrine pra não encostar nas telas de
   trabalho. O painel do dono não usa .pagina: não tem barra de dedo. */
.vitrine .topo-v{display:flex;align-items:center;justify-content:space-between;padding:22px 40px 10px;position:relative;flex-wrap:wrap;gap:10px}
.vitrine .topo-v .marca{display:flex;align-items:center;gap:18px}
.vitrine .topo-v .marca img{width:150px;max-width:40vw}
.vitrine .topo-v .marca .wm{font:italic 400 22px/1 var(--f-display);background:var(--ouro-grad-noite);-webkit-background-clip:text;background-clip:text;color:transparent;padding-left:16px;border-left:var(--fio-ouro-40)}
.vitrine .wrap-v{padding:8px 40px 48px;position:relative;max-width:1440px;margin:0 auto}
.vitrine .saud{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:10px 0 22px}
.vitrine .saud h1{font:400 30px/1.15 var(--f-display);margin:0;letter-spacing:-.01em;max-width:760px}
.vitrine .saud h1 em{font-style:italic;background:var(--ouro-grad-noite);-webkit-background-clip:text;background-clip:text;color:transparent}
.vitrine .saud .data{font:400 12px/1 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-2);white-space:nowrap}
.vitrine .g3,.vitrine .g3b,.vitrine .g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;margin:0 0 18px}
.vitrine .g3b{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.vitrine .g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.vitrine .card-vidro{
  background:rgba(255,255,255,.035);
  border:var(--fio-ouro-40);
  border-radius:6px;
  padding:22px;
  position:relative;overflow:hidden;min-width:0;
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.04) inset;
  backdrop-filter:blur(8px);
  transition:transform .35s var(--curva),box-shadow .35s;
}
.vitrine .card-vidro:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 1px var(--ouro-40)}
.vitrine .card-vidro::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(240,216,174,.7),transparent)}
.vitrine .rot-v{font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--marfim-2);display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.vitrine .rot-v::before{content:"";width:22px;height:2px;background:var(--vermelho);flex:none}
.vitrine .tag{margin-left:auto;font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding:5px 8px 4px;border-radius:20px;border:1px solid var(--ouro-40);color:var(--ouro-claro)}
.vitrine .tag.ok{border-color:var(--ok-sinal-fio);color:var(--ok-sinal)}
.vitrine .tag.alerta{border-color:var(--rosa-fio);color:var(--rosa)}
.vitrine .heroi-v{font:400 clamp(48px,5.5vw,74px)/1 var(--f-display);letter-spacing:-.005em;margin:2px 0 4px;display:inline-block;font-variant-numeric:tabular-nums;background:var(--ouro-grad-noite);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(240,216,174,.22))}
.vitrine .heroi-v small{font-size:.4em;vertical-align:.7em;letter-spacing:0;margin-right:.06em}
.vitrine .sub-v{font:italic 400 var(--t-sub)/1.35 var(--f-display);color:var(--marfim-2)}
.vitrine .sub-v b{font-style:normal;color:var(--marfim);font-weight:400}
.vitrine .anel{width:112px;height:112px;position:relative;flex:none}
.vitrine .anel svg{transform:rotate(-90deg)}
.vitrine .anel .base{stroke:var(--marfim-fio-2)}
.vitrine .anel .val{stroke-linecap:round;transition:stroke-dashoffset 1.4s var(--curva)}
.vitrine .anel .n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:400 28px/1 var(--f-display);font-variant-numeric:tabular-nums}
.vitrine .anel .n small{font:500 var(--t-micro)/1.3 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-2);margin-top:5px;text-align:center}
.vitrine .barras{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.vitrine .bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 60px;align-items:center;gap:10px;font-size:12px}
.vitrine .bar .nm{color:var(--marfim-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vitrine .bar .tr{height:9px;border-radius:5px;background:var(--marfim-fio-2);overflow:hidden;position:relative}
.vitrine .bar .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--ouro-grad);width:0;transition:width 1.2s var(--curva);box-shadow:0 0 12px rgba(240,216,174,.25)}
.vitrine .bar.neg .tr i{background:var(--grad-neg)}
.vitrine .bar .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--marfim);font-weight:500}
.vitrine .bar.neg .v{color:var(--rosa)}
.vitrine .cena{width:100%;height:clamp(200px,60vw,290px);display:block}
.vitrine .analise{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}
.vitrine .consult{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.vitrine .consult .foto{width:56px;height:56px;border-radius:50%;background:var(--grad-foto) center/cover;box-shadow:0 0 0 2px var(--noite),0 0 0 3px var(--ouro-60)}
.vitrine .consult .nome{font:400 19px/1.1 var(--f-display)}
.vitrine .consult .nome small{display:block;font:500 var(--t-micro)/1.5 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-2)}
.vitrine .consult .fala{font:italic 400 var(--t-sub)/1.4 var(--f-display);color:var(--marfim-2);border-left:2px solid var(--ouro-60);padding-left:12px}
.vitrine .sintese{font:400 22px/1.15 var(--f-display);margin:0 0 14px}
.vitrine .sintese em{font-style:italic;background:var(--ouro-grad-noite);-webkit-background-clip:text;background-clip:text;color:transparent}
.vitrine .cards-v{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.vitrine .acao{background:rgba(0,0,0,.22);border:var(--fio-ouro-40);border-radius:10px;padding:14px 14px 12px}
.vitrine .acao .t{font:400 16px/1.2 var(--f-display);margin:0 0 6px}
.vitrine .acao .p{font-size:11.5px;color:var(--marfim-2);line-height:1.45;margin:0 0 10px}
.vitrine .acao .g{font:500 11px/1 var(--f-titulo);letter-spacing:.12em;text-transform:uppercase;color:var(--ouro-claro)}
.vitrine .acao .g b{font:400 19px/1 var(--f-display);letter-spacing:0;color:var(--ouro-brilho);margin-right:4px}
.vitrine .acao .bt{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.vitrine .bt a,.vitrine .bt button{font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.18em;text-transform:uppercase;padding:9px 12px;border-radius:4px;text-decoration:none;border:0;color:var(--btn-ouro-texto);background:var(--ouro-grad);box-shadow:0 1px 0 rgba(255,255,255,.5) inset}
.vitrine .bt a.fio,.vitrine .bt button.fio{background:transparent;color:var(--marfim-2);border:1px solid var(--marfim-fio);box-shadow:none}
.vitrine .merc table{width:100%;border-collapse:collapse;font-size:13px}
.vitrine .merc th{font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.18em;text-transform:uppercase;color:var(--marfim-2);text-align:right;padding:0 0 10px;border-bottom:var(--fio-ouro-40)}
.vitrine .merc th:first-child{text-align:left}
.vitrine .merc td{padding:10px 0;border-bottom:1px solid var(--marfim-fio-2);text-align:right;font-variant-numeric:tabular-nums}
.vitrine .merc td:first-child{text-align:left;color:var(--marfim-2)}
.vitrine .merc td.eu{color:var(--marfim);font-weight:600}
.vitrine .merc td.me{color:var(--ouro-claro)}
.vitrine .merc .pos{display:inline-block;min-width:44px;font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px 4px;border-radius:20px;border:1px solid var(--ok-sinal-fio);color:var(--ok-sinal)}
.vitrine .merc .pos.al{border-color:var(--rosa-fio);color:var(--rosa)}
.vitrine .merc .pos.at{border-color:var(--ouro-40);color:var(--ouro-claro)}
.vitrine .alertas{display:flex;flex-direction:column;gap:9px}
.vitrine .al{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--marfim-fio-2);border-radius:9px;background:rgba(0,0,0,.18);font-size:12px}
.vitrine .al i{width:8px;height:8px;border-radius:50%;background:var(--ouro-claro);box-shadow:0 0 10px rgba(240,216,174,.6)}
.vitrine .al.v i{background:var(--rosa);box-shadow:0 0 10px rgba(212,86,106,.7)}
.vitrine .al.ok i{background:var(--ok-sinal);box-shadow:0 0 10px rgba(143,191,159,.5)}
.vitrine .al span b{font-weight:500}
.vitrine .al a{font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-claro);text-decoration:none;border:1px solid var(--ouro-40);padding:7px 10px 6px;border-radius:4px;white-space:nowrap}
/* balão do dia (copiado do painel aprovado) */
.vitrine .tip{position:absolute;left:62%;top:26px;transform:translateX(-50%);background:rgba(20,17,15,.92);border:var(--fio-ouro-40);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--marfim);box-shadow:0 12px 30px rgba(0,0,0,.5);white-space:nowrap}
.vitrine .tip b{display:block;font:italic 400 15px/1.1 var(--f-display);margin-bottom:3px}
.vitrine .tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:rgba(20,17,15,.92);border-right:var(--fio-ouro-40);border-bottom:var(--fio-ouro-40);transform:translateX(-50%) rotate(45deg)}
.vitrine .legenda{display:flex;gap:16px;flex-wrap:wrap;font:400 var(--t-micro)/1 var(--f-titulo);letter-spacing:.1em;text-transform:uppercase;color:var(--marfim-2);margin-top:8px}
.vitrine .legenda i{display:inline-block;width:16px;height:2px;vertical-align:middle;margin-right:6px;border-radius:2px}
.vitrine .kv{font-size:12.5px;color:var(--marfim-2);line-height:1.6}
.vitrine .kv b{color:var(--marfim);font-weight:500;font-variant-numeric:tabular-nums}
.vitrine .nota{margin:22px 0 0;font-size:11.5px;color:var(--marfim-2);max-width:900px}
/* §15 no escuro: card trancado em marfim 38% */
.vitrine .trancado-v{display:inline-flex;align-items:center;gap:5px;font:400 var(--t-rotulo)/1 var(--f-titulo);letter-spacing:var(--tr-rotulo);text-transform:uppercase;padding:6px 9px 5px;border-radius:3px;color:var(--marfim-2);border:1px dashed var(--ouro-40);white-space:nowrap;cursor:default}
.vitrine .trancado-v .selo{color:var(--ouro-claro);font-weight:600}
.vitrine .trancado-v svg{width:11px;height:11px;color:var(--ouro)}
/* links do topo da vitrine (o painel do dono não tem barra de dedo) */
.vitrine .links-v{font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:var(--tr-micro);text-transform:uppercase;display:flex;gap:18px;flex-wrap:wrap}
.vitrine .links-v a{color:var(--marfim-2);text-decoration:none}
.vitrine .links-v a:hover,.vitrine .links-v a.ativo{color:var(--ouro-claro)}
.vitrine .anel-num{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);text-align:center;pointer-events:none}
.vitrine .anel-num b{font:400 46px/1 var(--f-display);background:var(--ouro-grad-noite);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.vitrine .anel-num small{font:500 var(--t-micro)/1.4 var(--f-titulo);letter-spacing:.22em;text-transform:uppercase;color:var(--marfim-2)}
/* o giro lento e o contador só pra quem não pediu menos movimento */
@media (prefers-reduced-motion:no-preference){
  .vitrine .gira{transform-origin:50% 50%;animation:gira 50s linear infinite}
}
@media (max-width:760px){
  .vitrine .topo-v,.vitrine .wrap-v{padding-left:16px;padding-right:16px}
  .vitrine .analise{grid-template-columns:minmax(0,1fr)}
  .vitrine .consult{flex-direction:row;align-items:center;gap:12px}
  .vitrine .cards-v{grid-template-columns:minmax(0,1fr)}
  .vitrine .merc{overflow-x:auto}
  .vitrine .merc table{min-width:520px}
  .vitrine .heroi-v{font-size:clamp(44px,13vw,60px)}
  .vitrine .saud h1{font-size:24px}
  .vitrine .tip{position:static;transform:none;display:inline-block;margin-top:8px;white-space:normal}
  .vitrine .tip::after{display:none}
}

/* ------------------------------------------------------- 7 · MODO ESCURO ----
   Decidido 07/09. A moldura (.lateral/.topo) já era escura por design; isto
   escurece o miolo (.pagina, cards, tabelas, campos). Alternado pelo usuário
   via V.tema — NUNCA automático pelo sistema operacional. */
html[data-tema="escuro"]{
  color-scheme:dark;
  --papel:#14110F;
  --papel-claro:#1B1714;
  --papel-escuro:#26201B;
  --superficie:#1E1A17;
  --texto:#F2EDE6;
  --texto-2:#C9BEB4;
  --texto-3:#9C8F85;
  --texto-4:#6E635A;
  --taupe-marca:#A99C92;
  --rotulo:#A99C92;
  --fio-suave-cor:#362E27;
  --campo-bg:#211C18;
  --sombra-realce:rgba(255,255,255,.05);
  --badge-ok-bg:rgba(199,165,124,.16);
  --badge-alerta-bg:rgba(161,30,50,.20);
  --badge-alerta-fio:rgba(217,162,170,.4);
  --badge-perigo-bg:rgba(161,30,50,.20);
  --destaque-grad:var(--ouro-grad-noite);
  --ambar-fundo:rgba(184,134,43,.20);
  --ambar-texto:#E9C879;
  --ambar:#D9A94A;
  /* sinais que trocam pra manter AA sobre o preto-café */
  --alerta-texto:#E38A99;
  --ouro-texto:#E0C79E;
  --sinal-vermelho-fundo:#C8506A;
}
/* miolo escuro com a mesma luz de estúdio da vitrine (veludo, não chapado) */
html[data-tema="escuro"] .pagina{background:radial-gradient(55% 40% at 30% 0%,rgba(240,216,174,.06),transparent 60%),var(--papel)}
html[data-tema="escuro"] .modal-fundo{background:rgba(0,0,0,.72)}
html[data-tema="escuro"] .modal{background:var(--superficie);border:var(--fio-ouro-40);border-top:2px solid var(--ouro)}
html[data-tema="escuro"] .toast{background:var(--superficie);border:var(--fio-ouro-40)}
html[data-tema="escuro"] .trancado{color:var(--marfim-2);border-color:var(--ouro-40)}
html[data-tema="escuro"] .card.trancado{color:var(--marfim-2)}
html[data-tema="escuro"] .btn.leve{background:var(--papel-claro)}
/* PONTE TEMPORÁRIA (remover quando as telas forem corrigidas): fechamento.html e
   procedimentos.html pintam texto com style inline `color: var(--carmim)` /
   `var(--ouro-profundo)`. No escuro esses dois hexes ficam ilegíveis (1,8:1 e 3:1).
   O seletor casa SÓ com estilo inline que COMEÇA em `color:` — não pega
   `border-top-color: var(--carmim)` do cadastro.html, que é fio e está certo. */
html[data-tema="escuro"] [style^="color: var(--carmim)"]{color:var(--alerta-texto)!important}
html[data-tema="escuro"] [style^="color: var(--ouro-profundo)"]{color:var(--ouro-texto)!important}
.alterna-tema{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--marfim-2);font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;padding:6px 0;margin-top:10px;cursor:pointer;min-height:36px}
.alterna-tema:hover{color:var(--ouro-claro)}
.alterna-tema i{width:26px;height:14px;border-radius:8px;border:1px solid var(--ouro-40);position:relative;flex:none;background:rgba(0,0,0,.25)}
.alterna-tema i::after{content:"";position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:50%;background:var(--ouro-claro);transition:transform .15s}
html[data-tema="escuro"] .alterna-tema i::after{transform:translateX(12px)}

/* ---------------------------------------------------------- 8 · CELULAR ----
   Regra fixa: nenhum grid com coluna fixa sem colapso; a página nunca rola
   na horizontal em 375px. A barra lateral vira barra de dedo no rodapé. */
@media (max-width:1180px){
  .grade{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .trabalho{grid-template-columns:minmax(0,1fr)}
  .lateral{
    position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:30;
    flex-direction:row;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right:0;border-top:var(--fio-ouro-40);
    background:rgba(20,17,15,.94);
    backdrop-filter:blur(10px);
  }
  .lateral .logo,.lateral .marca,.lateral .rodape{display:none}
  .nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:0}
  .nav a{
    flex-direction:column;gap:4px;padding:8px 4px;min-height:52px;
    font-size:var(--t-micro);letter-spacing:0;line-height:1.1;text-align:center;
    overflow-wrap:normal;word-break:normal;hyphens:none;justify-content:center;
  }
  .nav a i{display:none}
  .nav a svg{width:20px;height:20px}
  .nav a.ativo::before{top:auto;bottom:0;left:20%;right:20%;width:auto;height:2px}
  .pagina{padding:18px 14px calc(96px + env(safe-area-inset-bottom))}
  .topo{padding:8px 14px;gap:8px}
  .topo .quem{display:none}
  .topo .busca{width:100%;order:9}
  .topo .logo-mini{display:block}
  .btn.mini{min-height:36px}
  .chip{min-height:36px;display:inline-flex;align-items:center}
  input[type=checkbox]{width:18px;height:18px}
  .grade{grid-template-columns:minmax(0,1fr)}
  .tiles,.esqueleto.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login{grid-template-columns:1fr;padding:32px 22px}
  .login .logo{width:220px}
  .tab-rolagem{max-height:none}
  .modal{max-height:88vh}
  /* folha do "Mais": o resto do menu, clínica, tema e sair */
  .folha-menu{
    display:grid;
    position:fixed;inset:auto 0 calc(60px + env(safe-area-inset-bottom)) 0;
    background:var(--noite-2);border-top:var(--fio-ouro-40);
    padding:12px;z-index:31;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
    box-shadow:0 -18px 40px rgba(0,0,0,.5);
    animation:sobe .22s var(--curva);
  }
  .folha-menu a,.folha-menu button{
    display:flex;align-items:center;gap:10px;
    font:400 12.5px/1 var(--f-titulo);letter-spacing:.12em;text-transform:uppercase;
    color:var(--marfim-2);background:none;border:0;text-align:left;
    padding:12px 10px;border-radius:3px;text-decoration:none;min-height:48px;
  }
  .folha-menu a.ativo{color:var(--ouro-claro);background:var(--ouro-8)}
  .folha-menu svg{width:15px;height:15px;flex:none;color:var(--ouro-60)}
  .folha-menu .larga{grid-column:1/-1}
  .folha-menu select{width:100%;color-scheme:dark;background:rgba(0,0,0,.3);color:var(--marfim);border:1px solid var(--marfim-fio);border-radius:3px;height:42px;padding:0 10px;font:400 12.5px var(--f-titulo)}
  /* folha inferior no lugar do modal centrado */
  .modal-fundo.folha{align-items:flex-end;padding:0}
  .modal-fundo.folha .modal{border-radius:12px 12px 0 0;max-height:85vh}
  /* tabela em cartões (uma linha = um cartão) */
  .tab.cartoes thead{display:none}
  .tab.cartoes tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;border-bottom:var(--fio-suave)}
  .tab.cartoes td{display:block;padding:0;border:0;white-space:normal}
  .tab.cartoes td:first-child{white-space:normal;font-weight:500}
  .tab.cartoes td.n{text-align:left}
  .tab.cartoes td.acao{grid-row:1/span 9;align-self:center;text-align:right}
  .paleta-fundo{padding:6vh 12px}
}
@media (max-width:520px){
  .pergunta .campo,.pergunta textarea,.campo-simples{max-width:100%}
  .mes b{min-width:110px;font-size:16px}
}

/* -------------------------------------------------------- 9 · IMPRESSÃO ----
   O papel volta a ser papel: casca fora, marca no alto, rodapé assinado. */
@media print{
  .lateral,.topo,.toasts,.folha-menu,.paleta-fundo,.modal-fundo{display:none!important}
  .trabalho{grid-template-columns:1fr;min-height:0}
  .pagina{background:var(--papel-print)!important;padding:0;animation:none}
  html[data-tema="escuro"]{
    --papel:var(--papel-print);
    --papel-claro:var(--papel-print);
    --superficie:var(--papel-print);
    --papel-escuro:var(--papel-escuro-print);
    --texto:var(--texto-print);
    --texto-2:var(--texto-2-print);
    --texto-3:var(--texto-3-print);
    --taupe-marca:var(--texto-3-print);
    --fio-suave-cor:var(--fio-print-cor);
    --campo-bg:var(--papel-print);
    --destaque-grad:var(--ouro-grad-serifa-claro);
    --alerta-texto:var(--carmim);
    --ouro-texto:var(--ouro-profundo);
  }
  .pagina::before{
    content:"";
    display:block;
    height:46px;
    margin:0 0 14px;
    background:url("LOGO_INSTITUTO_HEVELIN_PIMENTA_TRANSPARENTE_FLOW.png") left center/auto 40px no-repeat;
  }
  .pagina::after{
    content:"Valora · Instituto Hevelin Pimenta";
    display:block;
    margin:26px 0 0;
    padding-top:8px;
    border-top:1px solid var(--ouro);
    font:400 10.5px/1 var(--f-titulo);
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--texto-3);
  }
  .card,.tile,.tab{box-shadow:none;break-inside:avoid}
  .tab-rolagem{max-height:none;overflow:visible}
  .btn,.acoes{display:none!important}
}


/* ============================================================================
   CORREÇÕES ACHADAS PELAS TELAS (08/09) — cada bloco nasceu de um defeito real
   visto no navegador por quem estava montando uma tela. Ficam no fim de propósito:
   é a última palavra sobre quem vence a cascata.
   ============================================================================ */

/* 1. Botão de ouro no tema escuro: o texto vinha herdando o cinza do tema (≈1,9:1 sobre
      a folha de ouro, ilegível). O ouro é claro nos dois temas, então o texto é sempre escuro. */
html[data-tema="escuro"] .btn.ouro,
html[data-tema="escuro"] .btn-ouro,
html[data-tema="escuro"] .vitrine .bt a:not(.fio):not(.leve),
html[data-tema="escuro"] .vitrine .bt button:not(.fio):not(.leve){color:var(--btn-ouro-texto)}
/*    (o botao de contorno .fio fica de fora: fundo transparente + texto escuro = invisivel no cartao escuro; corrigido 19/09/2026) */

/* 2. Número negativo/positivo vence a cor do bloco onde está (a legenda cinza e o
      número do tile apagavam o carmim — um valor negativo aparecia igual a um normal). */
.tile .n.neg,.lin b.neg,.tab td .neg,.card .neg,.leg .neg,.kpi.neg{color:var(--alerta-texto)}
.tile .n.pos,.lin b.pos,.tab td .pos,.card .pos,.leg .pos,.kpi.pos{color:var(--ouro-texto)}

/* 3. O selo trancado e o CARD trancado dividem a classe `.trancado`: sem isto o card
      herdava caixa-alta e nowrap do selo e virava uma linha só, ilegível. */
.card.trancado{white-space:normal;text-transform:none;letter-spacing:normal;display:block;cursor:auto}
.card.trancado .frase,.card.trancado .exemplo,.card.trancado .calculados{text-transform:none;letter-spacing:normal;white-space:normal}

/* 4. Botão escondido com [hidden] continuava aparecendo (`.btn` é inline-flex e vence
      o display:none padrão do atributo). */
[hidden]{display:none!important}

/* 5. Anel da assinatura dentro da vitrine virava o anel de 112px do painel. */
.vitrine .assinatura .anel{width:44px;height:44px}

/* 6. Variantes escuras que faltavam (o miolo escuro deixava estes três blocos claros). */
html[data-tema="escuro"] .acao-card .itens{background:var(--papel-claro);border-color:var(--fio-suave-cor)}
html[data-tema="escuro"] .card.trancado{color:var(--marfim-2);border-color:var(--ouro-40)}
html[data-tema="escuro"] .assinatura .quem small{color:var(--texto-3)}

@media (max-width:900px){
  /* 7. Tabela em cartões: a coluna de ação caía POR CIMA do nome (o `grid-row` sem
        `grid-column` deixava o botão na primeira coluna). */
  .tab.cartoes td.acao{grid-column:2;grid-row:1/span 9;justify-self:end}
  .tab.cartoes td:first-child{grid-column:1}
}

/* 8. Badge com texto longo estourava a tela no celular (era nowrap sempre). No desktop
      continua numa linha só; no celular pode quebrar. */
@media (max-width:900px){ .badge{white-space:normal} }

/*VITRINE-COMUM · 19/09/2026 · as peças escuras saíram do dono.html e passam a valer em toda tela de vitrine.
  Antes, só o Painel tinha essas regras: nas outras telas escuras o botão voltava para a versão clara (texto escuro
  em cartão escuro). Defeito achado pelo Weslei no Painel (Adiar 30 dias / Não se aplica). */
.vitrine .ouro-t,.vitrine .acao-card .kpi{background:var(--ouro-grad-noite);-webkit-background-clip:text;background-clip:text;color:transparent}
.vitrine .chip{display:inline-flex;align-items:center;gap:6px;background:none;border-color:var(--marfim-fio);color:var(--marfim-2);border-radius:20px;padding:5px 9px 4px;cursor:default}
.vitrine .chip i{width:7px;height:7px;border-radius:2px;flex:none}
.vitrine .assinatura .anel{width:56px;height:56px;box-shadow:0 0 0 2px var(--noite),0 0 0 3px var(--ouro-60)}
.vitrine .assinatura .quem{color:var(--marfim)}
.vitrine .assinatura .quem small{color:var(--marfim-2)}
.vitrine .acao-card,.vitrine .card.trancado{background:rgba(0,0,0,.22);border:var(--fio-ouro-40);border-radius:10px;padding:14px 14px 12px;margin:0;box-shadow:none;color:var(--marfim-2)}
.vitrine .card.trancado{border-style:dashed}
.vitrine .acao-card .nome,.vitrine .card.trancado .nome{color:var(--marfim);font:400 17px/1.2 var(--f-display);margin:0 0 6px}
.vitrine .acao-card .rotulo,.vitrine .acao-card .kpi-rot,.vitrine .acao-card .frase,.vitrine .acao-card .itens .it,.vitrine .card.trancado .frase,.vitrine .card.trancado .calculados{color:var(--marfim-2)}
.vitrine .acao-card .itens .it{border-bottom:1px solid var(--marfim-fio-2)}
.vitrine .acao-card .itens .it .de{color:var(--marfim-2)}
.vitrine .acao-card .itens .it .para,.vitrine .card.trancado .exemplo{background:none;color:var(--ouro-claro);-webkit-text-fill-color:var(--ouro-claro);opacity:1}
.vitrine .btn.leve,.vitrine .btn.fio{background:none;color:var(--marfim-2);border:1px solid var(--marfim-fio)}
.vitrine .btn.leve:hover,.vitrine .btn.fio:hover{color:var(--marfim);border-color:var(--ouro-60)}
/* botão nunca estoura a caixa: quando o texto é longo, ele quebra dentro do botão */
.vitrine .btn,.vitrine .bt a,.vitrine .bt button{white-space:normal;text-align:center;line-height:1.35}
/*VITRINE-COMUM-FIM*/

/*CONTRASTE-2026-09-20 · varredura de texto apagado: rótulos, campo trancado,
  setas/cadeado, ícones de navegação, login, vitrine, botão desligado e a lista
  do seletor de clínica. Provas em 06_SISTEMA/provas_telas/varredura_2026-09-20/. */


/* ============================================================ 26/09/2026 (Weslei) ============ */
/* ABAS DO PAINEL (26/09/2026): fôlego em cima e embaixo, centralizadas, em ouro champanhe, com um fio
   de ouro em cima e embaixo que some nas pontas. A aba aberta ganha o losango — o único ornamento. */
.vitrine .abas-painel{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:34px 0 38px;padding:16px 0}
.vitrine .abas-painel::before,.vitrine .abas-painel::after{content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(199,165,124,0) 0%,rgba(199,165,124,.35) 18%,#E9CF9F 50%,rgba(199,165,124,.35) 82%,rgba(199,165,124,0) 100%)}
.vitrine .abas-painel::before{top:0;opacity:.55}
.vitrine .abas-painel::after{bottom:0}
.vitrine .abas-painel a{display:flex;align-items:center;gap:9px;padding:10px 16px;font:500 12.5px/1 var(--f-titulo);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;border-radius:3px;position:relative;color:#D9BD8C;transition:color var(--dur),background-color var(--dur)}
.vitrine .abas-painel a svg{width:16px;height:16px;flex:none;color:#B8955F}
.vitrine .abas-painel a:hover{color:#F3E2C0;background:rgba(199,165,124,.08)}
.vitrine .abas-painel a.ativo{color:#FFF4DC;text-shadow:0 0 14px rgba(240,216,174,.45)}
.vitrine .abas-painel a.ativo svg{color:#F0D8AE}
.vitrine .abas-painel a.ativo::after{content:"";position:absolute;left:50%;bottom:-13px;width:7px;height:7px;transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#FFF0CC,#C7A57C 60%,#8A6A45);box-shadow:0 0 8px rgba(240,216,174,.7)}
.vitrine .topo-v .sair-topo{font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-2);text-decoration:none;margin-left:14px}
.vitrine .topo-v .sair-topo:hover{color:var(--ouro-claro)}
@media (max-width:760px){.vitrine .abas-painel{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:20px 0 26px}}

/* CAMPOS COM FIO DE OURO (26/09/2026): a borda do campo quase não se via no escuro. Contorno de ouro
   discreto + um fio de ouro embaixo que some nas pontas. O foco continua como era (ouro + halo). */
.pergunta .campo,.campo-simples,.pergunta textarea{border:1px solid rgba(199,165,124,.40);
  background-image:linear-gradient(90deg,rgba(199,165,124,0),rgba(233,207,159,.85) 50%,rgba(199,165,124,0));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat}
.pergunta .campo:hover,.campo-simples:hover,.pergunta textarea:hover{border-color:rgba(199,165,124,.62)}
.pergunta .campo:focus-within,.campo-simples:focus-within,.pergunta textarea:focus{border-color:var(--ouro)}

/* LISTA DE SUGESTÕES como painel flutuante de verdade (26/09/2026): no escuro ela tinha a cor do fundo e
   sombra fraca, e parecia que os campos de baixo tinham quebrado. */
.sugestoes{border:1px solid rgba(199,165,124,.6);box-shadow:0 20px 46px rgba(0,0,0,.28),0 2px 0 rgba(199,165,124,.12);max-height:236px}
html[data-tema="escuro"] .sugestoes{background:#1A1512;box-shadow:0 22px 50px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.4)}
html[data-tema="escuro"] .sugestoes div{border-bottom-color:rgba(199,165,124,.14)}

/* FORMULÁRIO COM RESPIRO (26/09/2026): as linhas de campos encostavam uma na outra (rótulo grudado no
   campo de cima). Cada linha depois da primeira ganha espaço; o estilo escrito na própria tela vence. */
.linha-campos ~ .linha-campos{margin-top:18px}

/* CABEÇALHO PRESO DE VERDADE (26/09/2026): overflow:hidden na tabela virava o trilho do cabeçalho preso e
   ele rolava junto com as linhas. clip recorta os cantos igual, sem virar trilho. */
table.tab{overflow:clip}

/* ABAS DE OURO EM TODAS AS TELAS (Weslei, 26/09/2026): o mesmo desenho das abas do Painel. No computador
   a lateral some e a marca vai para o cabeçalho; no celular continua a barra de baixo. */
.abas-topo{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 6px;margin:22px 28px 4px;padding:14px 0}
.abas-topo::before,.abas-topo::after{content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(199,165,124,0) 0%,rgba(199,165,124,.35) 18%,#E9CF9F 50%,rgba(199,165,124,.35) 82%,rgba(199,165,124,0) 100%)}
.abas-topo::before{top:0;opacity:.55}
.abas-topo::after{bottom:0}
.abas-topo a{display:flex;align-items:center;gap:9px;padding:10px 15px;font:500 12.5px/1 var(--f-titulo);letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;border-radius:3px;position:relative;color:#D9BD8C;transition:color var(--dur),background-color var(--dur)}
.abas-topo a svg{width:16px;height:16px;flex:none;color:#B8955F}
.abas-topo a:hover{color:#F3E2C0;background:rgba(199,165,124,.08)}
.abas-topo a.ativo{color:#FFF4DC;text-shadow:0 0 14px rgba(240,216,174,.45)}
.abas-topo a.ativo svg{color:#F0D8AE}
.abas-topo a.ativo::after{content:"";position:absolute;left:50%;bottom:-11px;width:7px;height:7px;transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#FFF0CC,#C7A57C 60%,#8A6A45);box-shadow:0 0 8px rgba(240,216,174,.7)}
.topo .marca-topo{display:none;align-items:center;gap:14px;text-decoration:none;margin-right:auto}
.topo .marca-topo img{height:40px;width:auto;display:block}
.topo .marca-topo .txt{display:flex;flex-direction:column;gap:5px;padding-left:14px;border-left:var(--fio-ouro-40)}
.topo .marca-topo .wm{font:italic 400 19px/1 var(--f-display);color:var(--ouro-claro)}
.topo .marca-topo .assina{font:500 8px/1.5 var(--f-titulo);letter-spacing:.16em;text-transform:uppercase;color:var(--marfim-2)}
.topo .sair-topo{font:500 var(--t-micro)/1 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-2);text-decoration:none;margin-left:8px}
.topo .sair-topo:hover{color:var(--ouro-claro)}
@media (min-width:901px){
  .trabalho.com-abas{grid-template-columns:minmax(0,1fr)}
  .trabalho.com-abas .lateral{display:none}
  .trabalho.com-abas .topo .marca-topo{display:flex}
}
@media (max-width:900px){.abas-topo{display:none}}

/* CABEÇALHO NUMA LINHA SÓ (26/09/2026): abas mais justas para as 10 da Hevelin caberem numa fileira;
   sai do cabeçalho o que ficou repetido (a aba marcada já diz a tela; o seletor já diz a clínica). */
.abas-topo{gap:4px}
.abas-topo a{padding:10px 11px;font-size:11.5px;letter-spacing:.13em;gap:7px}
.abas-topo a svg{width:15px;height:15px}
@media (min-width:901px){
  .trabalho.com-abas .topo{flex-wrap:nowrap}
  .trabalho.com-abas .topo .micro span + span{display:none}
  .trabalho.com-abas .topo:has(select.clinica) .micro{display:none}
  .trabalho.com-abas .topo .busca{width:210px;min-width:150px;flex:0 1 210px}
  .trabalho.com-abas .topo select.clinica{max-width:240px;min-width:0;flex:0 1 240px}
  .trabalho.com-abas .topo .quem{white-space:nowrap}
}

/* LISTAS DE ESCOLHA LEGÍVEIS (Weslei, 26/09/2026): o campo tem fundo transparente e o navegador abria a
   lista em BRANCO com a letra clara do tema escuro — ilegível. Cada opção leva o fundo e a letra do tema. */
select option,select optgroup{background-color:var(--superficie);color:var(--texto)}
select option:disabled{color:var(--texto-3)}
/* número com nota embaixo ("32,6 h / jornada da clínica"): a nota acompanha o número, à direita */
.tab td.n .mini{margin-left:auto;text-align:right}
/* botões de ação na ponta direita da tabela (no celular a tabela vira cartão e tem regra própria) */
@media (min-width:901px){
  .tab td.acao{text-align:right}
  .tab td.acao .acoes{justify-content:flex-end}
  .tab td.acao > .btn{margin-left:auto}
}

/* DUAS LINHAS DE ABAS (Weslei, 26/09/2026): em cima o que só a consultoria vê (ouro mais escuro), embaixo o
   que a clínica vê (como era). As cores das abas viraram tokens. */
/* a moldura (cabeçalho + abas) é ESCURA nos dois temas — só a página muda de cor —, então os tokens
   das abas valem para os dois */
:root{
  --aba-cor:#D9BD8C;--aba-icone:#B8955F;--aba-hover:#F3E2C0;--aba-ativo:#FFF4DC;--aba-ativo-icone:#F0D8AE;--aba-brilho:rgba(240,216,174,.45);
  --aba2-cor:#A98B60;--aba2-icone:#86683F;--aba2-hover:#D9BD8C;--aba2-ativo:#EBD3A5;--aba2-brilho:rgba(199,165,124,.30);
  --aba-fio:#E9CF9F;
}
.abas-topo a{color:var(--aba-cor)}
.abas-topo a svg{color:var(--aba-icone)}
.abas-topo a:hover{color:var(--aba-hover)}
.abas-topo a.ativo{color:var(--aba-ativo);text-shadow:0 0 14px var(--aba-brilho)}
.abas-topo a.ativo svg{color:var(--aba-ativo-icone)}
/* as duas linhas: legenda à esquerda, abas no centro, um contrapeso à direita para o centro ficar no meio */
.abas-topo.duas{display:block;padding:0}
.abas-topo .linha-abas{position:relative;display:grid;grid-template-columns:160px minmax(0,1fr) 160px;align-items:center;column-gap:12px;padding:12px 0}
/* com o Retrato da Clínica a linha de baixo tem 7 abas: um fio a menos de espaço entre as letras e ela cabe numa fileira */
.abas-topo.duas a{letter-spacing:.12em}
.abas-topo .grupo-abas{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px}
.abas-topo .linha-abas.consultoria::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--aba-fio) 50%,transparent);opacity:.35}
.abas-topo .legenda-abas{font:500 9px/1.45 var(--f-titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--aba-icone);
  text-align:right;padding-right:14px;border-right:1px solid rgba(199,165,124,.28)}
.abas-topo .legenda-abas small{display:block;margin-top:3px;font:italic 400 12.5px/1.25 var(--f-display);letter-spacing:0;text-transform:none;color:var(--aba-cor)}
/* a linha de cima: o mesmo desenho, num ouro mais escuro */
.abas-topo .consultoria .legenda-abas{color:var(--aba2-icone)}
.abas-topo .consultoria a{color:var(--aba2-cor)}
.abas-topo .consultoria a svg{color:var(--aba2-icone)}
.abas-topo .consultoria a:hover{color:var(--aba2-hover)}
.abas-topo .consultoria a.ativo{color:var(--aba2-ativo);text-shadow:0 0 12px var(--aba2-brilho)}
.abas-topo .consultoria a.ativo svg{color:var(--aba2-ativo)}
.abas-topo .consultoria a.ativo::after{background:linear-gradient(135deg,#E9CF9F,#A8875A 60%,#6E5436);box-shadow:0 0 6px rgba(199,165,124,.5)}
/* 7 ABAS NUMA FILEIRA (Weslei, 28/09/2026 — com "Onde economizar" o "Mais" caía para uma 2ª fileira a 1336 px):
   o contrapeso da direita (160 px vazios, só para centralizar) só existe acima de 1440 px */
@media (max-width:1440px){
  .abas-topo .linha-abas{grid-template-columns:160px minmax(0,1fr)}
  .abas-topo .linha-abas .contrapeso{display:none}
}
@media (max-width:1300px){
  .abas-topo .linha-abas{grid-template-columns:130px minmax(0,1fr)}
  .abas-topo .linha-abas .contrapeso{display:none}
}
/* TEXTO NA LARGURA TODA (Weslei, 28/09/2026 — fotos marcadas de ponta a ponta): no computador o subtítulo da
   página e a explicação de cada seção vão até a borda direita do conteúdo, alinhados com a tabela, em vez de
   quebrar no meio da tela (eram 720 px). O texto do cabeçalho cresce até os botões, que ficam na mesma linha. */
@media (min-width:901px){
  .desc-sub,.secao .desc,.frase{max-width:none}   /* .frase: AJUSTES DE 28/09 (pendências do Cadastro) */
  .cabecalho > .cab-texto{flex:1 1 0}
  /* LISTA ACOMPANHA A FICHA (AJUSTES DE 28/09 — Insumos): em toda tela de lista + ficha ao lado, a lista fica presa
     no alto da tela ao rolar e termina alinhada com o fim da ficha (12 px em cima + 40 px do respiro da página) */
  .grade:not(.larga) > .tab-rolagem{position:sticky;top:12px;max-height:calc(100vh - 52px)}
}

/* CAMPOS DA MESMA LINHA NA MESMA ALTURA (Weslei, 26/09/2026): a nota embaixo de um campo (.resposta)
   empurrava aquela caixa para cima das vizinhas. Na linha com nota, cada pergunta vira coluna de uma
   grade comum: pergunta em cima, caixas alinhadas, "salvo" e nota penduradas embaixo. */
@media (min-width:901px){
  .linha-campos:has(> .pergunta > .resposta){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto);column-gap:14px;row-gap:0;align-items:start;margin-bottom:26px}
  .linha-campos:has(> .pergunta > .resposta) > .pergunta{display:grid;grid-row:1 / span 5;grid-template-rows:subgrid;row-gap:0}
  .linha-campos:has(> .pergunta > .resposta) > .pergunta > label{grid-row:1;align-self:end}
  .linha-campos:has(> .pergunta > .resposta) > .pergunta > .campo{grid-row:2}
  .linha-campos:has(> .pergunta > .resposta) > .pergunta > .salvo{grid-row:3}
  .linha-campos:has(> .pergunta > .resposta) > .pergunta > .resposta:not(.delta){grid-row:4}
  .linha-campos:has(> .pergunta > .resposta) > .pergunta > :not(label):not(.campo):not(.salvo):not(.resposta:not(.delta)){grid-row:5}
  .linha-campos:has(> .pergunta > .resposta) > .btn{grid-row:2;align-self:end}
}

/* LEITURA JOIA · ROTEIRO EM MARSALA (Weslei, 28/09/2026: "troque a cor para aquele marsala bonito... ou coloque algum
   fundinho"; depois, com outra tela aberta: "pra mim não mudou a cor") — a aba do Roteiro da Reunião fica SEMPRE numa
   pedra carmim polida (o carmim #801026 da casa, fio de ouro e ponto de luz); ativa, ganha o losango embaixo como as outras */
.abas-topo a[href="curadoria.html"]{background:linear-gradient(180deg,#9A1D36 0%,#801026 52%,#5E0B1C 100%);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,236,220,.22),inset 0 0 0 1px rgba(233,207,159,.30),0 0 16px rgba(128,16,38,.45);color:#FFF4DC;text-shadow:none}
.abas-topo a[href="curadoria.html"] svg{color:#F0D8AE}
.abas-topo a[href="curadoria.html"]:hover{background:linear-gradient(180deg,#A8223D 0%,#8C1430 52%,#66101F 100%);color:#FFF8EA}