/* SGS — tema Safira (aprovado em 24/10/2026; protótipo: arte-sgs/prototipo/APROVADO-safira.html).
   UMA folha de estilo para o sistema inteiro: central, endereço do salão e todos os módulos (Trico, Gestão,
   Relacionamento). data-tema no <html> = auto | claro | escuro (Usuario.tema; no endereço do salão, a marca do salão
   pode trocar as cores de destaque: salao/cores.py). Fonte Inter local (static/sgs/fontes), sem CDN. */

/* ============================== Fonte ============================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fontes/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fontes/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fontes/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fontes/inter-700.woff2") format("woff2")}

/* ============================== Tokens ============================== */
:root{
  --fonte:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* superfícies e texto */
  --bg:#F5F6F8;--card:#FFFFFF;--card-2:#F8F9FB;--chip:#F1F3F6;--texto:#14161B;--texto-2:#3F4452;--suave:#6B7280;
  --linha:#E6E8EC;--linha-2:#EEF0F3;--sombra:0 1px 2px rgba(28,26,24,.04),0 8px 24px rgba(28,26,24,.06);
  --sombra-forte:0 18px 50px rgba(10,16,32,.18);
  /* destaque Safira */
  --a1:#3B82F6;--a2:#4F46E5;--a3:#1D4ED8;--sobre-a:#FFFFFF;--a-claro:#E8EEFF;--acento-texto:#1D4ED8;--a-sec:#4F46E5;
  /* situação */
  --ok:#2F7A55;--ok-claro:#E7F3EC;--erro:#A3442F;--erro-claro:#F8E9E5;--aviso:#8A5D00;--aviso-claro:#FDF3D8;
  --verde:#22C55E;--amarelo:#FACC15;--laranja:#F59E0B;--vermelho:#EF4444;
  /* menu lateral (sempre escuro) */
  --menu:#0A1020;--menu-2:#0F1830;--menu-texto:#AEB4C2;--menu-secao:#6B7385;--menu-marca:#8A92A3;
  --raio:16px;--raio-sm:10px;--w-menu:248px;--h-topo:66px;
  color-scheme:light;
  /* nomes antigos do Trico (as telas continuam usando) → tokens Safira */
  --azul:var(--acento-texto);--azul-claro:var(--a-claro);--ciano:#93B4FF;--ciano-claro:var(--a-claro);
  --navy-950:#070B16;--navy-900:var(--menu);--navy-800:var(--menu-2);--navy-700:#1A2440;
  --borda:var(--linha);--muted:var(--suave);--ok-2:var(--verde);--warn:#D99A06;--warn-2:var(--amarelo);
  --bad:#DC2626;--bad-2:var(--vermelho);--prata:#C4C8CE;
}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){
  --bg:#0E1015;--card:#161922;--card-2:#1B1F2A;--chip:#222632;--texto:#ECEEF3;--texto-2:#C3C8D2;--suave:#9AA1AE;
  --linha:#262A35;--linha-2:#20242E;--sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --a-claro:#1C2442;--acento-texto:#93B4FF;--ok:#7CC9A0;--ok-claro:#1C2E25;--erro:#E7988A;--erro-claro:#33201B;
  --aviso:#E2B04F;--aviso-claro:#2B2414;--bad:#F87171;color-scheme:dark}}
:root[data-tema="escuro"]{
  --bg:#0E1015;--card:#161922;--card-2:#1B1F2A;--chip:#222632;--texto:#ECEEF3;--texto-2:#C3C8D2;--suave:#9AA1AE;
  --linha:#262A35;--linha-2:#20242E;--sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --a-claro:#1C2442;--acento-texto:#93B4FF;--ok:#7CC9A0;--ok-claro:#1C2E25;--erro:#E7988A;--erro-claro:#33201B;
  --aviso:#E2B04F;--aviso-claro:#2B2414;--bad:#F87171;color-scheme:dark}

/* ============================== Base ============================== */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--texto);font:14.5px/1.5 var(--fonte);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--acento-texto);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em;overflow-wrap:break-word}
.cab h1,.pagina-topo h1,.cab p,.pagina-topo p{overflow-wrap:anywhere}
h1{font-size:26px;font-weight:700;letter-spacing:-.02em}
h2{font-size:18px;font-weight:600}
h3{font-size:15px;font-weight:600}
h4{font-size:13px;font-weight:600;margin:18px 0 10px;color:var(--texto-2)}
p{margin:0 0 10px}
small,.suave,.muted{color:var(--suave)}
code,kbd{font:12.5px ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--card-2);border:1px solid var(--linha);
  border-radius:6px;padding:1px 6px;color:var(--texto)}
kbd{font-size:11px}
hr{border:0;border-top:1px solid var(--linha);margin:16px 0}
img{max-width:100%}
.ic{width:18px;height:18px;flex:none}
[hidden]{display:none!important}
.centro{text-align:center}
.dir{margin-left:auto;text-align:right}
.flex1{flex:1}
.mt{margin-top:14px}.mb{margin-bottom:10px}
.nowrap{white-space:nowrap}
.inline{display:inline}
.num{text-align:right;font-variant-numeric:tabular-nums}
.txt-ok{color:var(--ok)}.txt-warn{color:var(--aviso)}.txt-bad{color:var(--erro)}
::selection{background:color-mix(in srgb,var(--a1) 30%,transparent)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--a1) 60%,transparent);outline-offset:2px}

/* ============================== Estrutura (app) ============================== */
.menu{position:fixed;inset:0 auto 0 0;width:var(--w-menu);z-index:40;display:flex;flex-direction:column;gap:2px;
  padding:22px 14px 16px;overflow-y:auto;color:var(--menu-texto);background:linear-gradient(180deg,var(--menu),var(--menu-2));
  /* barra de rolagem fina e discreta (o menu é escuro nos dois temas); ::-webkit-scrollbar = Chrome/Edge < 121 */
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.menu:hover{scrollbar-color:rgba(255,255,255,.28) transparent}
.menu::-webkit-scrollbar{width:6px}
.menu::-webkit-scrollbar-track{background:transparent}
.menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px}
.menu-marca{display:flex;align-items:center;gap:12px;padding:4px 10px 22px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.07);color:#fff}
.menu-marca .mono{width:74px;height:auto;flex:none}
.menu-marca small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--menu-marca);line-height:1.35}
.menu-marca .logo-salao{max-width:100%;max-height:64px;object-fit:contain;margin:0 auto}
.menu-marca .nome-salao{font-weight:700;font-size:17px;line-height:1.25;color:#fff}
.menu-marca .nome-salao small{margin-top:4px}
.menu nav{display:flex;flex-direction:column;gap:2px}
.menu .secao{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--menu-secao);padding:16px 12px 6px}
.menu nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--menu-texto);font-weight:500}
.menu nav a:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.menu nav a.ativo{color:#fff;background:linear-gradient(90deg,color-mix(in srgb,var(--a1) 28%,transparent),color-mix(in srgb,var(--a1) 6%,transparent))}
.menu nav a.ativo::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(var(--a1),var(--a-sec))}
.menu .rodape{margin-top:auto;padding:16px 10px 0;font-size:12px;line-height:1.5;color:var(--menu-marca)}
.menu .dica-salao{margin:14px 10px 0;font-size:12.5px;color:var(--menu-marca)}

/* overflow-x:clip: nada da área de conteúdo passa da borda direita da janela (sem rolagem horizontal da página);
   diferente de hidden, não cria caixa de rolagem — o topo continua grudado (sticky) */
.principal{margin-left:var(--w-menu);min-height:100vh;display:flex;flex-direction:column;min-width:0;overflow-x:clip}
.topo{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;min-height:var(--h-topo);padding:10px 32px;
  background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.topo .flex1{flex:1}
/* grupo da direita (tema, sino, usuário): nunca encolhe nem sai da tela — quem cede espaço é o seletor/nome do salão */
.topo-dir{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto}
.topo>.seletor-salao,.topo>.salao-fixo{flex:0 1 auto;min-width:0;overflow:hidden}
.btn-menu{display:none;border:0;background:none;color:var(--texto);font-size:22px;line-height:1;cursor:pointer;padding:6px}
.conteudo{padding:28px 32px 48px;max-width:1280px;width:100%;min-width:0}
.conteudo-largo .conteudo{max-width:1480px}
.veu{display:none}

/* seletor de salão (central) e nome do salão (endereço do salão) */
.seletor-salao{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;border:1px solid var(--linha);border-radius:999px;background:var(--bg);font-weight:500;min-width:0}
.seletor-salao .pt{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.seletor-salao .pt.off{background:var(--erro)}
.seletor-salao .pt.nenhum{background:var(--suave)}
.seletor-salao .pt.todos{background:var(--a1)}
.seletor-salao select{border:0;background:transparent;padding:4px 26px 4px 0;font-weight:500;min-width:180px;max-width:320px;color:var(--texto);
  box-shadow:none;cursor:pointer}
.seletor-salao select:focus{box-shadow:none;outline:none}
.salao-fixo{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.salao-fixo .seletor-salao{max-width:100%}
.salao-fixo .nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.salao-fixo small{font-weight:400}

/* botões redondos do topo, sino e menu do usuário */
.btn-ic{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--linha);
  background:var(--card);color:var(--suave);cursor:pointer;padding:0}
.btn-ic:hover{color:var(--texto);border-color:color-mix(in srgb,var(--a1) 40%,var(--linha))}
.btn-ic .contador{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--a2);
  color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--card)}
.sino,.menu-usuario{position:relative}
.sino summary,.menu-usuario summary{list-style:none;cursor:pointer}
.sino summary::-webkit-details-marker,.menu-usuario summary::-webkit-details-marker{display:none}
.menu-usuario summary{display:flex;align-items:center;gap:10px;padding:3px 8px 3px 3px;border-radius:999px}
.menu-usuario summary:hover{background:var(--card-2)}
.menu-usuario summary>span{min-width:0;max-width:240px}
.menu-usuario b{display:block;font-size:13.5px;line-height:1.25}
.menu-usuario small{display:block;font-size:12px}
.menu-usuario b,.menu-usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.painel-flutuante{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:calc(100vw - 24px);background:var(--card);
  border:1px solid var(--linha);border-radius:14px;box-shadow:var(--sombra-forte);padding:8px;z-index:50}
.painel-flutuante a.item,.painel-flutuante button.item{display:flex;gap:8px;align-items:flex-start;width:100%;padding:9px 10px;border-radius:9px;
  color:var(--texto);background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.painel-flutuante a.item:hover,.painel-flutuante button.item:hover{background:var(--card-2);text-decoration:none}
.painel-flutuante .vazio{padding:14px;color:var(--suave);text-align:left}
.painel-flutuante .item .ic{color:var(--suave);margin-top:1px}

/* ============================== Páginas públicas (login, erros) ============================== */
.publico{min-height:100vh;display:grid;place-items:center;padding:28px 16px;
  background:radial-gradient(60% 50% at 100% 0%,color-mix(in srgb,var(--a2) 30%,transparent),transparent 65%),
    radial-gradient(70% 60% at 0% 100%,color-mix(in srgb,var(--a1) 22%,transparent),transparent 60%),
    linear-gradient(160deg,var(--menu),var(--menu-2))}
.publico-caixa{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:22px}
.publico-marca{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#fff}
.publico-marca .mono{width:118px;height:auto}
.publico-marca small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--menu-marca)}
.publico-marca .logo-salao{max-height:92px;max-width:300px;object-fit:contain}
.publico-marca b{font-size:22px;letter-spacing:-.01em}
.publico .card{width:100%;margin:0;padding:28px 28px 24px;border:0;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.publico .card h2{font-size:20px;margin-bottom:6px}
.publico-rodape{font-size:12px;color:var(--menu-marca);text-align:center}
.publico-rodape a{color:#C9D6FF}
.caixa-centro{max-width:520px;margin:6vh auto;text-align:left}
.publico .caixa-centro{margin:0}

/* ============================== Componentes ============================== */
.card{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:20px;margin-bottom:18px;min-width:0}
.card-tabela{padding:6px 0}
.card-tabela>.card-tit{padding:14px 22px 4px}
.card-tabela .tabela th,.card-tabela .tabela td{padding-left:22px;padding-right:22px}
.card-tit{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.card-tit h3,.card-tit h2{margin:0}
.card-tit .ic{color:var(--acento-texto)}
.card-tit .dir{margin-left:auto}
h3.card-tit{font-size:15px}
.card-centro{max-width:560px;margin:40px auto}
.card-centro>.ic{width:42px;height:42px;color:var(--acento-texto)}
.card-centro h2{margin-bottom:14px}
.cab,.pagina-topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.cab p,.pagina-topo p{margin:4px 0 0;color:var(--suave)}
.secao-tit{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.secao-tit .ic{color:var(--acento-texto)}
.pilha{display:flex;flex-direction:column;gap:10px}
.pilha>.card{margin-bottom:8px}
.acoes,.linha{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.card .acoes,form .acoes{margin-top:14px}
.cab .acoes,.pagina-topo .acoes,.card-tit .acoes{margin-top:0}
div.grade,section.grade{display:grid;gap:18px;margin-bottom:18px}
.grade.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grade.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grade>.card,.grade>form.card{margin-bottom:0}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}

/* indicadores (central: span/b/small · Trico: kpi-ic + small/b) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:16px 18px;display:flex;flex-direction:column;min-width:0}
.kpi:has(.kpi-ic){flex-direction:row;align-items:center;gap:16px}
.kpi>span:not(.kpi-ic){font-size:12px;color:var(--suave);font-weight:500}
.kpi b{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:26px;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px;line-height:1.15}
.kpi:has(.kpi-ic) b{margin:2px 0}
.kpi small{display:block;font-size:12px;color:var(--suave)}
.kpi-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--a-claro);color:var(--acento-texto);flex:none}
.kpi-ic .ic{width:22px;height:22px}
.kpis-4 .kpi b{font-size:22px}
.var{font-size:12px;font-weight:600}.var.up{color:var(--ok)}.var.down{color:var(--erro)}

/* tabelas */
.tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela,.conteudo table:not([class]){width:100%;border-collapse:collapse}
.tabela th,.conteudo table:not([class]) th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave);
  font-weight:600;padding:10px 12px;border-bottom:1px solid var(--linha);white-space:nowrap}
.tabela td,.conteudo table:not([class]) td{padding:12px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tr:last-child td,.conteudo table:not([class]) tr:last-child td{border-bottom:0}
.tabela td.num,.tabela th.num,.conteudo table:not([class]) .num{text-align:right;font-variant-numeric:tabular-nums}
.tabela tr.clicavel{cursor:pointer}
.tabela tr.clicavel:hover td{background:var(--card-2)}
.tabela-compacta td,.tabela-compacta th{padding:7px 10px}
.tabela .apagado td{color:var(--suave)}
.pessoa{display:flex;align-items:center;gap:12px;min-width:0}
.pessoa b{display:block}
.pessoa small{display:block;color:var(--suave);font-size:12px}
.pessoa-lg h1{font-size:24px}
.pessoa-inline{display:inline-flex;gap:8px}

/* selos, pílulas e chips */
.selo,.pill,.chip-estatico{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;
  background:var(--chip);color:var(--texto-2);white-space:nowrap;line-height:1.4;border:0}
.selo.on,.selo.ok,.pill-ok{background:var(--ok-claro);color:var(--ok)}
.selo.off,.selo.erro,.pill-bad{background:var(--erro-claro);color:var(--erro)}
.selo.aviso,.pill-warn{background:var(--aviso-claro);color:var(--aviso)}
.selo.acento,.pill-info{background:var(--a-claro);color:var(--acento-texto)}
.pill-muted{color:var(--suave)}
.pill-texto{white-space:normal;max-width:100%;line-height:1.4;padding:5px 12px;border-radius:12px;overflow-wrap:anywhere}
.pill-etiqueta{background:color-mix(in srgb,var(--cor,#3b82f6) 14%,var(--card));color:var(--texto);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cor,#3b82f6) 55%,transparent)}
.pill-etiqueta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cor,#3b82f6)}
.chip-estatico{font-weight:500;white-space:normal;max-width:100%}
.chip-aviso{background:var(--aviso-claro);color:var(--aviso)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips-mini{gap:4px}
.chips-mini .chip-estatico{padding:2px 8px;font-size:11px}
.chip{display:inline-flex;flex-direction:row;cursor:pointer;margin:0}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{padding:7px 13px;border-radius:999px;border:1px solid var(--linha);background:var(--card);font-size:13px;font-weight:500;
  color:var(--texto-2);transition:all .12s;user-select:none}
.chip:hover span{border-color:var(--a1)}
.chip input:checked+span{background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent;color:var(--sobre-a)}
.chip input:focus-visible+span{box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 30%,transparent)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.ok{background:var(--verde)}.dot.warn{background:var(--amarelo)}.dot.bad{background:var(--vermelho)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:10px;border:1px solid var(--linha);
  background:var(--card);color:var(--texto);font:inherit;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:border-color .15s,background .15s,filter .15s,box-shadow .15s;line-height:1.3}
.btn:hover{border-color:color-mix(in srgb,var(--a1) 45%,var(--linha));text-decoration:none;background:var(--card-2)}
.btn .ic{width:17px;height:17px}
.btn-primario{border:0;color:var(--sobre-a);background:linear-gradient(135deg,var(--a1),var(--a2));font-weight:600;
  box-shadow:0 6px 18px color-mix(in srgb,var(--a2) 32%,transparent)}
.btn-primario:hover{background:linear-gradient(135deg,var(--a1),var(--a2));filter:brightness(1.07);color:var(--sobre-a)}
.btn-sucesso{border-color:transparent;color:#fff;background:linear-gradient(135deg,#1FA463,#11834C)}
.btn-sucesso:hover{background:linear-gradient(135deg,#1FA463,#11834C);filter:brightness(1.07)}
.btn-destaque{border-color:color-mix(in srgb,var(--a1) 40%,var(--linha));background:var(--a-claro);color:var(--acento-texto);font-weight:600}
.btn-destaque:hover{background:var(--a-claro);filter:brightness(.98)}
.btn-escuro{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.btn-escuro:hover{background:rgba(255,255,255,.12)}
.btn-perigo{color:var(--erro);border-color:color-mix(in srgb,var(--erro) 35%,var(--linha))}
.btn-perigo:hover{background:var(--erro-claro);border-color:var(--erro)}
.btn-fantasma{border-color:transparent;background:transparent;color:var(--suave)}
.btn-fantasma:hover{background:var(--card-2);color:var(--texto)}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn-lg{padding:13px 22px;font-size:15px}
.btn-bloco{width:100%}
.btn:disabled{opacity:.6;cursor:progress}
.btn-icone{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;color:var(--suave);background:none;border:0;padding:0;cursor:pointer}
.btn-icone:hover{background:var(--card-2);color:var(--texto)}
.link-sm{font-size:12.5px}
.link-forte{font-weight:600;color:var(--acento-texto);white-space:nowrap}
label.btn{flex-direction:row;cursor:pointer;font-size:inherit;margin:0}

/* formulários */
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--texto-2)}
input,select,textarea{font:inherit;color:var(--texto);padding:9px 12px;border:1px solid var(--linha);border-radius:10px;background:var(--card);
  width:100%;transition:border-color .15s,box-shadow .15s;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--a1);box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 22%,transparent)}
input::placeholder,textarea::placeholder{color:var(--suave);opacity:.8}
textarea{resize:vertical}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--a1);padding:0}
input[type=color]{width:64px;height:38px;padding:3px;cursor:pointer}
input[type=file]{padding:7px}
label.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;color:var(--texto);margin:4px 0}
label.check input{margin-top:3px;flex:none}   /* texto longo não encolhe a caixinha */
/* opções de múltipla escolha (CheckboxSelectMultiple / RadioSelect do Django) */
.opcoes>div{display:flex;flex-direction:column;gap:4px}
label:where(:has(>input[type=checkbox]),:has(>input[type=radio])){flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--texto)}
.opcoes label{margin:0}
.ajuda,.helptext{display:block;font-size:12px;color:var(--suave);font-weight:400}
.campo-erro,.errorlist{color:var(--erro);font-size:12.5px;list-style:none;padding:0;margin:4px 0 0}
.campo-form{margin-bottom:14px}
.campo-form>label{margin-bottom:6px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo-rot{font-size:13px;font-weight:600;color:var(--texto-2)}
.form-grid,.form-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.form-grade{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:4px 16px}
.form-grid .col-2{grid-column:span 2}.form-grid .col-3{grid-column:span 3}.form-grid .col-4{grid-column:1/-1}
.form-pilha{display:flex;flex-direction:column;gap:14px}
.form-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:6px}
fieldset{border:1px solid var(--linha);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;margin:0;min-width:0}
legend{font-weight:600;padding:0 6px;color:var(--texto)}
.lgpd small{color:var(--suave);display:block}
.grupo-perm{margin-bottom:12px}
.grupo-perm legend{font-weight:700}
.busca{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.busca>.ic{position:absolute;left:11px;top:11px;width:17px;height:17px;color:var(--suave);pointer-events:none}
.busca input{padding-left:36px;min-width:260px;width:auto}
.sel-mini{width:auto;max-width:240px;padding:6px 10px;font-size:12.5px}
.filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filtros>div{min-width:150px}
.filtros select{width:auto}
.link-copiar{display:flex;gap:6px}.link-copiar input{font:12.5px ui-monospace,Consolas,monospace}

/* mensagens e avisos */
.alerta{padding:12px 16px;border-radius:12px;margin-bottom:16px;border:1px solid transparent;display:flex;gap:10px;align-items:flex-start;
  background:var(--a-claro);color:var(--texto)}
.alerta-ok{background:var(--ok-claro);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.alerta-erro{background:var(--erro-claro);border-color:color-mix(in srgb,var(--erro) 30%,transparent)}
.alerta-aviso{background:var(--aviso-claro);border-color:color-mix(in srgb,var(--aviso) 30%,transparent)}
.alerta-info{background:var(--a-claro);border-color:color-mix(in srgb,var(--a1) 25%,transparent)}
.vazio{text-align:center;padding:36px 16px;color:var(--suave)}
.vazio .ic{width:40px;height:40px;color:var(--suave);opacity:.6;margin-bottom:6px}
.vazio-sm{padding:20px;color:var(--suave)}
.vazio-grande{text-align:center;padding:36px;color:var(--suave)}
.nota{font-size:12px;color:var(--suave)}

/* abas (links do servidor ou botões com data-abas) */
/* a linha de base é sombra interna (não borda + margem -1px): nada sobra na vertical, então a barra de abas não ganha
   barra de rolagem vertical com as barras "clássicas" do Windows */
.abas{display:flex;gap:4px;box-shadow:inset 0 -1px 0 var(--linha);margin:0 0 18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.abas a,.abas button{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border:0;background:none;font:inherit;font-weight:500;
  color:var(--suave);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;border-radius:0}
.abas a:hover,.abas button:hover{color:var(--texto);text-decoration:none}
.abas a.ativo,.abas button.ativo{color:var(--acento-texto);border-color:var(--a1)}
.abas .ic{width:16px;height:16px}
.card>.abas{margin:-6px -4px 18px}

.paginas{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px}
.ul-limpa{list-style:none;padding:0;margin:0}.ul-limpa li{padding:10px 0;border-bottom:1px solid var(--linha)}.ul-limpa li:last-child{border:0}
.dados{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;margin:0;font-size:13.5px}
.dados dt{color:var(--suave)}.dados dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.dados-2{grid-template-columns:180px 1fr}
.lista{margin:8px 0;padding-left:18px}.lista li{margin-bottom:4px}

/* barras: horizontal (barra-h) · colunas por dia (colunas) */
.barra-h{height:6px;border-radius:6px;background:var(--chip);overflow:hidden;margin-top:6px}
.barra-h i{display:block;height:100%;background:linear-gradient(90deg,var(--a1),var(--a2))}
.barra-h i.aviso{background:var(--laranja)}.barra-h i.erro{background:var(--vermelho)}
.colunas{display:flex;align-items:flex-end;gap:3px;height:160px;padding-top:8px;border-bottom:1px solid var(--linha)}
.colunas .b{flex:1;min-width:4px;background:linear-gradient(180deg,var(--a1),var(--a2));border-radius:4px 4px 0 0;position:relative}
.colunas .b:hover::after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--texto);
  color:var(--bg);font-size:11px;padding:3px 6px;border-radius:6px;white-space:nowrap}
.rotulos-colunas{display:flex;gap:3px;font-size:10.5px;color:var(--suave)}.rotulos-colunas span{flex:1;text-align:center;overflow:hidden}

/* avatar */
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;font-size:14px;
  color:var(--sobre-a);background:linear-gradient(135deg,var(--a1),var(--a2))}
img.avatar{object-fit:cover;background:var(--chip)}
.avatar-xs{width:24px;height:24px;font-size:10px}
.avatar-sm{width:32px;height:32px;font-size:13px}
.avatar-lg{width:60px;height:60px;font-size:24px}
.avatar-xl{width:120px;height:120px;font-size:42px;box-shadow:0 0 0 4px var(--card),0 0 0 6px var(--a-claro)}

/* Início: cartões dos módulos do salão */
.modulos-salao{margin-bottom:26px}
.grade-modulos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.cartao-modulo{display:flex;gap:16px;align-items:flex-start;margin:0;color:var(--texto);transition:transform .15s,box-shadow .15s,border-color .15s}
.cartao-modulo:hover{text-decoration:none;transform:translateY(-2px);border-color:color-mix(in srgb,var(--a1) 40%,var(--linha))}
.cartao-modulo h3{margin-bottom:4px}
.cartao-modulo p{margin:0;font-size:13.5px}
.cartao-modulo-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--sobre-a);
  background:linear-gradient(135deg,var(--a1),var(--a2))}
.cartao-modulo-ic .ic{width:22px;height:22px}

/* prévia da marca (Portais e marca) */
.previa-marca{border-radius:14px;overflow:hidden;border:1px solid var(--linha);display:grid;grid-template-columns:190px 1fr;min-height:170px}
.previa-menu{display:flex;flex-direction:column;gap:8px;padding:16px 12px;color:var(--menu-texto);background:linear-gradient(180deg,var(--menu),var(--menu-2))}
.previa-menu img{max-height:44px;max-width:150px;object-fit:contain;margin-bottom:6px}
.previa-menu b{color:#fff;margin-bottom:6px}
.previa-menu small{margin-top:auto;font-size:11px;color:var(--menu-marca)}
.previa-item{padding:7px 10px;border-radius:9px;font-size:12.5px;font-weight:500}
.previa-corpo{padding:16px;background:#F5F6F8;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.previa-botao{display:inline-block;padding:8px 14px;border-radius:10px;font-weight:600;font-size:13px}

/* ============================== Trico Expert ============================== */
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand img{max-height:56px;max-width:100%;object-fit:contain}
.brand-claro{align-self:flex-end}
.perfil-edicao{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.foto-edicao{display:flex;flex-direction:column;align-items:center;gap:10px}
.foto-edicao-linha{flex-direction:row;align-items:center;gap:16px}
.foto-edicao .btn{flex-direction:row;cursor:pointer}
.assinatura-campo{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.assinatura-campo small{font-size:12px}
.assinatura-previa{min-height:90px;display:grid;place-items:center;padding:10px;border:1px dashed var(--linha);border-radius:10px;background:#fff}
.assinatura-previa img{max-height:90px;max-width:100%;object-fit:contain}
.assinatura-previa .muted{color:#6B7280}
/* catálogo */
.prod-img{width:64px;height:64px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--linha);flex:none}
.prod-img-lg{width:110px;height:110px}
.prod-sem-img{display:grid;place-items:center;font-weight:700;font-size:18px;letter-spacing:.02em;color:#fff;border:0}
.prod-sem-img.marca-mirra{background:linear-gradient(135deg,#94A3B8,#1E293B)}
.prod-sem-img.marca-mv{background:linear-gradient(135deg,#6366F1,#312E81)}
.prod-img-lg.prod-sem-img{font-size:30px}
.prod-previa:has(img[data-preview-alvo]:not([hidden]))>:not([data-preview-alvo]){display:none}
.prod-lista{display:flex;flex-direction:column;gap:10px}
.prod-item{display:flex;gap:14px;align-items:flex-start;padding:12px;border:1px solid var(--linha-2);border-radius:12px}
.prod-item.inativo{opacity:.55}
.prod-item.sel{border-color:var(--a1);box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 15%,transparent)}
.prod-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.prod-info small{color:var(--texto-2);font-size:12.5px}
.prod-meta{display:flex;gap:6px;flex-wrap:wrap}
.prod-acoes{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.prod-form{position:sticky;top:calc(var(--h-topo) + 16px)}
/* plano de tratamento */
.plano-lista{display:flex;flex-direction:column;gap:12px}
.plano-item{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--linha-2);border-radius:12px;background:var(--card-2)}
.plano-item-corpo{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.plano-item:has(.plano-remover input:checked){opacity:.45}
.plano-remover{white-space:nowrap;font-size:12.5px}
.protocolo-selo{flex:none;width:64px;height:64px;border-radius:10px;display:grid;place-items:center;font-size:22px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#1A2440,#0A1020)}
.protocolo-selo.tipo-calmia{background:linear-gradient(135deg,#7DD3FC,#2563EB)}
.protocolo-selo.tipo-estimulante{background:linear-gradient(135deg,#F59E0B,#C2410C)}
.protocolo-selo.tipo-detox,.protocolo-selo.tipo-antifungico{background:linear-gradient(135deg,#34D399,#047857)}
.protocolo-selo.tipo-esfoliante{background:linear-gradient(135deg,#A5B4FC,#4F46E5)}
.protocolo-selo.selo-sm{width:30px;height:30px;font-size:13px;border-radius:8px}
.protocolo-item small{font-size:12.5px}
/* voz (Configurações do Trico) */
.vozes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.voz-opcao{flex-direction:row;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--linha);border-radius:10px;cursor:pointer;font-weight:400}
.voz-opcao:has(input:checked){border-color:var(--a1);background:var(--a-claro)}
.voz-opcao span{flex:1}.voz-opcao b{display:block;font-size:13px;color:var(--texto)}.voz-opcao small{color:var(--suave);font-size:11.5px}
/* custos de IA (Trico) e gráficos */
.grafico{width:100%;height:auto;display:block}
.grafico .grade{stroke:var(--linha-2)}
.grafico .eixo{font-size:11px;fill:var(--suave)}
.grafico .linha{fill:none;stroke-width:2.5;stroke-linejoin:round}
.grafico .ponto{stroke:var(--card);stroke-width:2}
.grafico .area{opacity:.12}
.grafico .barra-g{fill:var(--a1);opacity:.85}
.grafico .barra-g:hover{opacity:1;fill:var(--a2)}
.s1{stroke:var(--a1);fill:var(--a1)}.s2{stroke:#8B5CF6;fill:#8B5CF6}.s3{stroke:var(--verde);fill:var(--verde)}
.s4{stroke:var(--laranja);fill:var(--laranja)}.s5{stroke:#94A3B8;fill:#94A3B8}
.grafico .linha.s1,.grafico .linha.s2,.grafico .linha.s3,.grafico .linha.s4,.grafico .linha.s5{fill:none}
.grafico-legenda{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--suave);margin-top:6px}
.grafico-legenda i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.grafico-legenda i.s1{background:var(--a1)}.grafico-legenda i.s2{background:#8B5CF6}.grafico-legenda i.s3{background:var(--verde)}
.grafico-legenda i.s4{background:var(--laranja)}.grafico-legenda i.s5{background:#94A3B8}
.barra-custo{grid-template-columns:210px 1fr 90px}
.barra-custo span small{display:block;color:var(--suave);font-size:11px}
.tabela-precos input{padding:6px 8px;font-size:13px;min-width:90px}
.tabela-precos td:first-child input{min-width:170px}
.tabela-precos .linha-nova td{background:var(--aviso-claro)}
/* base de conhecimento */
a.conh-item,.conh-item{display:flex;gap:14px;align-items:flex-start;color:var(--texto);margin-bottom:0}
a.conh-item:hover{text-decoration:none;border-color:color-mix(in srgb,var(--a1) 35%,var(--linha))}
.conh-item small{display:block;margin-top:4px}
.conh-ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--a-claro);color:var(--acento-texto)}
.conh-integrado{background:linear-gradient(135deg,var(--card-2),var(--card))}
.conh-integrado .conh-ic{background:var(--chip);color:var(--suave)}
.conh-envio{position:sticky;top:calc(var(--h-topo) + 16px)}
.conh-processo{min-width:0}
.arquivo-drop{display:block;cursor:pointer}
.arquivo-drop input{position:absolute;opacity:0;width:1px;height:1px}
.arquivo-drop>span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 14px;border:2px dashed var(--linha);border-radius:12px;
  text-align:center;color:var(--texto-2);transition:border-color .15s,background .15s}
.arquivo-drop:hover>span{border-color:var(--a1);background:var(--card-2)}
.arquivo-drop .ic{width:30px;height:30px;color:var(--acento-texto)}
.arquivo-drop small{color:var(--suave);font-weight:400}
.conh-etapas{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:et}
.conh-etapas li{counter-increment:et;padding:12px 14px 12px 50px;position:relative;border:1px solid var(--linha-2);border-radius:12px;background:var(--card-2)}
.conh-etapas li::before{content:counter(et);position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--chip);font-weight:700;font-size:12px}
.conh-etapas li.feito::before{content:"✓";background:var(--ok-claro);color:var(--ok)}
.conh-etapas b{display:block;font-size:13px}.conh-etapas small{color:var(--suave);font-size:12px}
.conh-proto{border:1px solid var(--linha-2);border-radius:12px;padding:10px 14px;background:var(--card-2)}
.conh-proto summary{display:flex;align-items:center;gap:10px;cursor:pointer;flex-wrap:wrap;list-style:none}
.conh-proto summary::-webkit-details-marker{display:none}
.conh-proto[open] summary{margin-bottom:10px}
.conh-proto ol{padding-left:22px}.conh-proto li{margin-bottom:4px;font-size:13px}.conh-proto p{font-size:13px}
.conh-texto{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.55}
/* anéis de indicador */
.anel{position:relative;flex:none}
.anel svg{width:100%;height:100%;display:block}
.anel .trilho{stroke:var(--chip)}
.anel-ok .g1{stop-color:#38BDF8}.anel-ok .g2{stop-color:var(--verde)}
.anel-warn .g1{stop-color:var(--laranja)}.anel-warn .g2{stop-color:var(--amarelo)}
.anel-bad .g1{stop-color:#F97316}.anel-bad .g2{stop-color:var(--vermelho)}
.anel-muted .g1,.anel-muted .g2{stop-color:#CBD5E1}
.anel-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.anel-txt b{font-size:15px;font-weight:700;color:var(--texto)}
.anel[style*="150px"] .anel-txt b,.anel[style*="170px"] .anel-txt b{font-size:36px}
.anel-txt small{font-size:12px;color:var(--suave)}
/* etapas da análise */
.etapas{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.etapa{display:flex;align-items:center;gap:8px;color:var(--suave);font-weight:500}
.etapa b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--chip);font-size:12px;color:var(--texto-2)}
.etapa.ativa{color:var(--texto)}.etapa.ativa b{background:linear-gradient(135deg,var(--a1),var(--a2));color:var(--sobre-a);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 18%,transparent)}
.etapa.feita{color:var(--ok)}.etapa.feita b{background:var(--ok-claro);color:var(--ok)}
.etapas>i{flex:0 1 50px;height:2px;background:var(--linha)}
/* anamnese */
.anamnese .card h3{margin-bottom:14px}
.anamnese-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
.campo-textarea,.campo-multi{grid-column:1/-1}
.cliente-faixa{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.barra-fixa{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:14px 0;background:linear-gradient(transparent,var(--bg) 35%)}
.cliente-mini{padding:10px 14px;background:var(--card-2);border-radius:10px;margin-bottom:14px}
.cliente-mini b{display:block}.cliente-mini small{color:var(--suave)}
/* captura (painel da câmera é sempre escuro) */
.captura-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.card-camera{background:linear-gradient(180deg,#151B2C,#0D1220);border-color:#232B44;color:#fff}
.card-camera h3{color:#fff}
.card-camera .card-tit .ic{color:var(--ciano)}
.card-camera .sel-mini{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.card-camera .sel-mini option{color:#000}
.card-camera .muted,.card-camera small{color:#AEB4C2}
.visor{position:relative;aspect-ratio:4/3;background:#000;border-radius:12px;overflow:hidden}
.visor video{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.visor-moldura{position:absolute;inset:14px;pointer-events:none}
.visor-moldura i{position:absolute;width:34px;height:34px;border:2px solid rgba(255,255,255,.75)}
.visor-moldura i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.visor-moldura i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.visor-moldura i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.visor-moldura i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.visor-mira{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(147,180,255,.7);border-radius:50%;pointer-events:none}
.visor-mira::before,.visor-mira::after{content:"";position:absolute;background:rgba(147,180,255,.7)}
.visor-mira::before{left:50%;top:-10px;bottom:-10px;width:1px}
.visor-mira::after{top:50%;left:-10px;right:-10px;height:1px}
.visor-zoom{position:absolute;top:18px;right:22px;font-size:16px;font-weight:600;text-shadow:0 1px 3px #000}
.visor-status,.visor-regiao{position:absolute;bottom:18px;padding:4px 10px;border-radius:99px;background:rgba(0,0,0,.55);font-size:12px;backdrop-filter:blur(4px)}
.visor-status{left:18px}
.visor-status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--laranja);margin-right:4px}
.visor-status.ok i{background:var(--verde);box-shadow:0 0 8px var(--verde)}
.visor-regiao{right:18px;color:var(--ciano);font-weight:600}
.visor-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.visor-flash.on{animation:flash .35s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.visor-erro{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;background:rgba(10,14,24,.9);color:#EEF1F6;line-height:1.6}
.cam-ctrl{display:flex;justify-content:center;gap:8px;margin:14px 0 10px;flex-wrap:wrap}
.cam-ctrl button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;padding:8px 10px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:#E9ECF2;font:inherit;font-size:12px;cursor:pointer}
.cam-ctrl button:hover{background:rgba(255,255,255,.07)}
.cam-ctrl button.on{border-color:rgba(147,180,255,.6);color:var(--ciano)}
.cam-ctrl button#bt-zoom-menos,.cam-ctrl button#bt-zoom-mais{font-size:20px;min-width:40px;justify-content:center}
.regioes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.regioes button{padding:6px 11px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#DCE1EA;font:inherit;font-size:12px;cursor:pointer}
.regioes button.ativo{background:var(--ciano);border-color:var(--ciano);color:#0A1020;font-weight:600}
.cam-acoes{display:flex;gap:10px}
.cam-acoes kbd{background:rgba(255,255,255,.2);border-color:transparent;color:#fff}
.dica{margin:12px 0 0;font-size:12px;color:#AEB4C2}
.dica a{color:var(--ciano)}
.dica kbd{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.btn-imersivo{display:flex;align-items:center;gap:14px;width:100%;margin-bottom:14px;padding:14px 16px;border-radius:12px;border:1px solid rgba(147,180,255,.45);
  background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(79,70,229,.22));color:#fff;font:inherit;text-align:left;cursor:pointer;transition:all .15s}
.btn-imersivo:hover{border-color:var(--ciano);background:linear-gradient(135deg,rgba(59,130,246,.34),rgba(79,70,229,.34))}
.btn-imersivo .ic{width:30px;height:30px;color:var(--ciano);flex:none}
.btn-imersivo span{flex:1}.btn-imersivo b{display:block;font-size:15px}
.btn-imersivo small{color:#C3C9D6;font-size:12px}
.btn-imersivo kbd{background:rgba(255,255,255,.15);color:#fff;border-color:transparent}
/* mapa da cabeça */
.regiao-seletor{display:grid;grid-template-columns:175px 1fr;gap:18px;align-items:start;margin-bottom:14px;padding:14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.regiao-tit{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#AEB4C2;margin-bottom:8px}
.regiao-seletor .regioes{margin-bottom:10px}
.regiao-dica{margin:0;font-size:12.5px;line-height:1.5;color:#E9ECF2;padding:8px 12px;border-left:3px solid var(--vermelho);background:rgba(239,68,68,.08);border-radius:0 8px 8px 0}
.regiao-dica:empty{display:none}
.regiao-lado{min-width:0}
.mapa-cabeca{width:100%;height:auto;display:block}
.mapa-cabeca .orelha,.mapa-cabeca .nariz{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.4);stroke-width:1.2}
.mapa-cabeca .contorno{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2;pointer-events:none}
.mapa-cabeca .reg>*{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.28);stroke-width:1;transition:fill .15s}
.mapa-cabeca .reg{cursor:pointer}
.mapa-cabeca .reg:hover>*{fill:rgba(147,180,255,.28)}
.mapa-cabeca .reg.feito>*{fill:rgba(34,197,94,.18)}
.mapa-cabeca .reg.ativo>*{fill:rgba(239,68,68,.7);stroke:#EF4444;animation:pulsa-reg 1.4s ease-in-out infinite}
@keyframes pulsa-reg{50%{fill:rgba(239,68,68,.38)}}
.mapa-cabeca .rot{font-size:8px;font-weight:600;letter-spacing:.08em;fill:#AEB4C2;pointer-events:none}
.mapa-cabeca .badge{pointer-events:none}
.mapa-cabeca .badge circle{fill:var(--verde);stroke:#0D1220;stroke-width:1.5}
.mapa-cabeca .badge text{font-size:9.5px;font-weight:700;fill:#052E16}
.mapa-box.sem-area{opacity:.55}
.mapa-claro .orelha,.mapa-claro .nariz{fill:#F1F3F6;stroke:#9AA1AE}
.mapa-claro .contorno{stroke:#3F4452}
.mapa-claro .reg>*{fill:#F8F9FB;stroke:#D5D9E0}
.mapa-claro .reg.feito>*{fill:rgba(34,197,94,.35)}
.mapa-claro .rot{fill:#6B7280}
.mapa-claro .badge circle{stroke:#fff}
/* galeria de fotos e modal */
.card-galeria{min-width:0}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:560px;overflow-y:auto;padding:2px}
.vazio-galeria{padding:30px 10px}
.foto-card{border:1px solid var(--linha);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--card);transition:box-shadow .15s,transform .15s}
.foto-card:hover{box-shadow:var(--sombra);transform:translateY(-1px)}
.foto-card.erro{border-color:color-mix(in srgb,var(--erro) 45%,transparent)}
.foto-img{position:relative;aspect-ratio:4/3;background:#10141F;overflow:hidden}
.foto-img img{width:100%;height:100%;object-fit:cover;display:block}
.scanline{position:absolute;left:0;right:0;height:30%;background:linear-gradient(180deg,transparent,rgba(147,180,255,.45),transparent);animation:scan 1.6s linear infinite}
@keyframes scan{0%{top:-30%}100%{top:100%}}
.foto-info{padding:8px 10px}
.foto-info b{display:block;font-size:12.5px}
.foto-info small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--suave);font-size:11.5px;line-height:1.4;margin-top:2px}
.foto-rodape{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:6px;font-size:12px}
.foto-status{color:var(--suave);font-size:11.5px}
.foto-status.scan{color:var(--acento-texto);font-weight:600}
.marc{display:flex;align-items:center;gap:2px;font-weight:600}
.marc .dot{width:8px;height:8px;margin:0 2px 0 6px}.marc .dot:first-child{margin-left:0}
.legenda-ia{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--suave);margin:14px 0}
.modal{border:0;border-radius:16px;padding:0;max-width:1000px;width:calc(100% - 32px);box-shadow:0 30px 80px rgba(0,0,0,.35);background:var(--card);color:var(--texto)}
.modal::backdrop{background:rgba(10,16,32,.6);backdrop-filter:blur(3px)}
.modal-corpo{position:relative;padding:22px}
.modal-x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:26px;cursor:pointer;color:var(--suave)}
.modal-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.modal-grid img{width:100%;border-radius:12px;display:block;background:#000}
.modal-grid h3{margin-bottom:8px}
.modal-grid label{margin-top:10px}
.barras{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.barra{display:grid;grid-template-columns:150px 1fr 32px;align-items:center;gap:10px;font-size:12.5px}
.barra>div{height:8px;background:var(--chip);border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px}
.barra i.ok{background:linear-gradient(90deg,#38BDF8,var(--verde))}.barra i.warn{background:var(--amarelo)}.barra i.bad{background:var(--vermelho)}
.barra i.info{background:linear-gradient(90deg,var(--a1),var(--a2))}
.barra b{text-align:right}
.lista-marc{margin:8px 0;padding-left:22px;font-size:12.5px;color:var(--texto-2)}.lista-marc li{margin-bottom:3px}
.processando{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(10,16,32,.86);backdrop-filter:blur(6px);color:#fff}
.processando-box{text-align:center;max-width:420px;padding:20px}
.processando h2{margin:22px 0 16px;color:#fff}
.processando ul{list-style:none;padding:0;margin:0 0 14px;text-align:left;display:inline-block}
.processando li{padding:5px 0 5px 28px;position:relative;color:#9AA1AE}
.processando li::before{content:"";position:absolute;left:4px;top:11px;width:10px;height:10px;border-radius:50%;border:2px solid #4B5263}
.processando li.ativo{color:#fff}.processando li.ativo::before{border-color:var(--ciano);border-top-color:transparent;animation:gira .8s linear infinite}
.processando li.feito{color:#9BE8B6}.processando li.feito::before{background:var(--verde);border-color:var(--verde)}
@keyframes gira{to{transform:rotate(360deg)}}
.scanner{width:150px;height:150px;margin:0 auto;border-radius:50%;border:2px solid rgba(147,180,255,.5);position:relative;overflow:hidden;
  background:radial-gradient(circle,rgba(147,180,255,.15),transparent 70%)}
.scanner div{position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 300deg,rgba(147,180,255,.8) 360deg);animation:gira 1.6s linear infinite}
/* resultado da análise */
.resultado-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.col-principal,.col-lateral,.card-plano,.plano-form{min-width:0}
.resultado-topo{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.tabela-class{border-collapse:collapse;flex:1;min-width:240px;background:var(--card-2);border-radius:12px;overflow:hidden}
.tabela-class td{padding:8px 14px;font-size:13px;color:var(--texto-2)}
.tabela-class td b{color:var(--texto)}
.indicadores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;text-align:center}
.indicadores>div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--texto-2)}
.mapeamento{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.mapeamento>img{width:100%;border-radius:12px;display:block;background:#000}
.legenda-vert{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:12px}
.legenda-vert li{display:grid;grid-template-columns:18px 1fr}
.legenda-vert b{font-size:13px}.legenda-vert small{grid-column:2;color:var(--suave);font-size:12px}
.legenda-vert .dot{margin-top:5px}
.miniaturas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.miniaturas button{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:#000;aspect-ratio:4/3}
.miniaturas button:hover{border-color:var(--a1)}
.miniaturas img{width:100%;height:100%;object-fit:cover;display:block}
.texto p{color:var(--texto-2);line-height:1.65}
.regioes-achados,.hipoteses{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px}
.regioes-achados>div,.hipoteses>div{background:var(--card-2);border:1px solid var(--linha-2);border-radius:10px;padding:12px 14px}
.regioes-achados p,.hipoteses p{margin:4px 0 0;font-size:13px;color:var(--texto-2)}
.hipoteses b{display:block;margin-top:6px}
.resumo{color:var(--texto-2);line-height:1.65;margin-top:10px}
.evolucao-box{border-left:3px solid var(--a1);background:var(--a-claro);padding:10px 14px;border-radius:0 10px 10px 0;margin-top:12px}
.evolucao-box p{margin:4px 0 0;font-size:13px}
.evol-melhora{border-color:var(--ok);background:var(--ok-claro)}.evol-piora{border-color:var(--erro);background:var(--erro-claro)}
.lista-check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.lista-check li{display:grid;grid-template-columns:22px 1fr;gap:6px;font-size:13px;color:var(--texto-2)}
.lista-check .ic{width:18px;height:18px;color:var(--acento-texto)}
/* painel do Trico */
.card-cta{display:flex;gap:14px;align-items:center;border:0;color:var(--sobre-a);background:linear-gradient(135deg,var(--a1),var(--a2));
  box-shadow:0 10px 26px color-mix(in srgb,var(--a2) 30%,transparent)}
.card-cta:hover{text-decoration:none;filter:brightness(1.05)}
.card-cta .ic{width:34px;height:34px}
.card-cta h3,.card-cta b{display:block;font-size:15px;color:var(--sobre-a)}
.card-cta small,.card-cta .muted{color:inherit;opacity:.85}
.card-marca{border:0;color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:180px;
  background:radial-gradient(80% 120% at 0% 100%,color-mix(in srgb,var(--a1) 35%,transparent),transparent 60%),linear-gradient(135deg,var(--menu-2),var(--menu))}
.card-marca h3{color:#C9D6FF;font-size:18px}.card-marca p{color:#D5DAE4}
.lista-retorno{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.lista-retorno li{display:flex;justify-content:space-between;align-items:center;gap:8px}
/* ficha da cliente: evolução, comparativo e galeria */
.evol-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}
.evol-grid h4{margin-top:0}
.comparativo{margin-bottom:22px}
.comp-par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.comp-par figure,.galeria-grade a{margin:0}
.comp-par img{width:100%;border-radius:10px;display:block;aspect-ratio:4/3;object-fit:cover;background:#000}
.comp-par figcaption{font-size:12.5px;color:var(--suave);margin-top:6px}
.galeria-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.galeria-grade a{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--linha);color:var(--texto-2)}
.galeria-grade img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#000}
.galeria-grade span{display:block;padding:6px 10px;font-size:12px}
/* modo captura em tela cheia (sempre escuro) */
body.modo-imersivo{overflow:hidden}
.imersivo{position:fixed;inset:0;z-index:500;background:#000;color:#fff;font-family:var(--fonte);user-select:none}
.imersivo video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .2s}
.im-vinheta{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%),
  linear-gradient(180deg,rgba(0,0,0,.55),transparent 18%,transparent 78%,rgba(0,0,0,.7))}
.im-mira{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border:1.5px solid rgba(147,180,255,.75);border-radius:50%;
  pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.im-mira::before,.im-mira::after{content:"";position:absolute;background:rgba(147,180,255,.75)}
.im-mira::before{left:50%;top:-18px;bottom:-18px;width:1.5px}
.im-mira::after{top:50%;left:-18px;right:-18px;height:1.5px}
.im-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.im-flash.on{animation:flash .35s ease-out}
.im-topo{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:22px 28px;pointer-events:none}
.im-topo>*{pointer-events:auto}
.im-regiao small{display:block;color:var(--ciano);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.im-regiao b{display:block;font-size:34px;line-height:1.15;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.im-regiao span{display:block;max-width:560px;margin-top:6px;color:#E9ECF2;font-size:14px;line-height:1.45;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.im-topo-dir{display:flex;gap:10px;align-items:center}
.im-pilula{padding:6px 14px;border-radius:99px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:600;backdrop-filter:blur(6px)}
.im-bt-redondo{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:#fff;font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(6px)}
.im-bt-redondo:hover{background:rgba(255,255,255,.15)}
.im-mapa{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:170px;padding:12px;border-radius:16px;background:rgba(10,16,32,.6);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.im-roteiro{margin-top:8px;display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:#C3C9D6}
.im-roteiro b{color:#fff;font-size:13px;margin-bottom:2px}
.im-roteiro span::before{content:"○ "}
.im-roteiro span.ok{color:#86EFAC}.im-roteiro span.ok::before{content:"● "}
.im-roteiro span.atual{color:#fff;font-weight:700}.im-roteiro span.atual::before{content:"▶ ";color:var(--vermelho)}
.im-anuncio{position:absolute;left:50%;top:22%;transform:translate(-50%,-10px);padding:12px 26px;border-radius:99px;background:rgba(10,16,32,.82);
  border:1px solid rgba(255,255,255,.2);font-size:20px;font-weight:600;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;backdrop-filter:blur(6px)}
.im-anuncio.on{opacity:1;transform:translate(-50%,0)}
.im-anuncio.ok{border-color:rgba(34,197,94,.7)}.im-anuncio.erro{border-color:rgba(239,68,68,.85);background:rgba(80,10,10,.85)}.im-anuncio.aviso{border-color:rgba(250,204,21,.7)}
.im-base{position:absolute;left:0;right:0;bottom:92px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;padding:0 28px}
.im-esq{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.im-nitidez{display:grid;grid-template-columns:auto 160px auto;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;background:rgba(0,0,0,.55);font-size:12.5px;backdrop-filter:blur(6px)}
.im-nitidez>div{height:8px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.im-nitidez i{display:block;height:100%;border-radius:99px;transition:width .2s}
.im-nitidez i.ok{background:linear-gradient(90deg,#38BDF8,var(--verde))}.im-nitidez i.warn{background:var(--amarelo)}.im-nitidez i.bad{background:var(--vermelho)}
.im-nitidez b{min-width:74px}
.im-voz{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.55);
  color:#E9ECF2;font:inherit;font-size:13px;cursor:pointer;max-width:420px;backdrop-filter:blur(6px)}
.im-voz span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-mic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.im-mic svg{width:18px;height:18px}
.im-voz.on{border-color:rgba(239,68,68,.7);color:#fff}
.im-voz.on .im-mic{background:var(--vermelho);animation:pulso-mic 1.6s ease-out infinite}
@keyframes pulso-mic{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}100%{box-shadow:0 0 0 14px rgba(239,68,68,0)}}
.im-centro{display:flex;flex-direction:column;align-items:center;gap:10px}
.im-centro small{color:#E9ECF2;font-size:13px;text-shadow:0 1px 4px #000;white-space:nowrap}
.im-disparo{width:86px;height:86px;border-radius:50%;border:4px solid #fff;background:transparent;padding:6px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.im-disparo span{display:block;width:100%;height:100%;border-radius:50%;background:#fff;transition:transform .12s,background .12s}
.im-disparo:hover span{background:var(--ciano)}
.im-disparo:active span,.im-disparo.pulso span{animation:disparo .35s ease-out}
@keyframes disparo{0%{transform:scale(.8);background:var(--ciano)}100%{transform:scale(1)}}
.im-dir{display:flex;justify-content:flex-end}
.im-miniaturas{display:flex;gap:8px}
.im-miniaturas figure{position:relative;margin:0;width:92px;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.35);background:#111}
.im-miniaturas figure.ruim{border-color:var(--vermelho)}
.im-miniaturas img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.im-miniaturas figcaption{font-size:10.5px;padding:3px 6px;background:rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-miniaturas i{position:absolute;top:4px;right:4px;font-style:normal;font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px}
.im-miniaturas i.ok{background:var(--verde);color:#052E16}.im-miniaturas i.ruim{background:var(--vermelho)}
.im-miniaturas i.scan{width:12px;height:12px;padding:0;border:2px solid var(--ciano);border-top-color:transparent;animation:gira .8s linear infinite}
.im-ferramentas{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:16px;
  background:rgba(10,16,32,.7);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.im-ferramentas button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:54px;padding:5px 8px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:#E9ECF2;font:inherit;cursor:pointer}
.im-ferramentas button b{font-size:15px}.im-ferramentas button span{font-size:10.5px;color:#AEB4C2}
.im-ferramentas button:hover{background:rgba(255,255,255,.08)}
.im-ferramentas button.on{border-color:rgba(147,180,255,.7);color:var(--ciano)}
.im-sel select{width:auto;padding:5px 8px;font-size:12px;background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.im-sel option{color:#000}
.im-sep{width:1px;height:30px;background:rgba(255,255,255,.15);margin:0 4px}
.im-ajuda-painel{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.im-ajuda-painel>div{width:min(760px,92vw);padding:26px 28px;border-radius:18px;background:#141A2A;border:1px solid rgba(255,255,255,.15)}
.im-ajuda-painel h3{font-size:20px;margin-bottom:14px;color:#fff}
.im-ajuda-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.im-ajuda-painel h4{color:var(--ciano);margin:0 0 8px}
.im-ajuda-painel ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:#E9ECF2}
.im-ajuda-painel kbd{background:rgba(255,255,255,.15);color:#fff;border-color:transparent}
.im-ajuda-painel p{margin:16px 0}
@media (max-width:1280px){.im-miniaturas figure:nth-child(n+3){display:none}}
/* avisos rápidos (app.js) */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{padding:12px 18px;border-radius:12px;background:var(--menu-2);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:380px;transition:opacity .4s,transform .4s}
.toast-ok{border-left:4px solid var(--verde)}
.toast-erro{background:#7F1D1D}
.toast.sai{opacity:0;transform:translateY(10px)}

/* ============================== Gestão do salão e Relacionamento ============================== */
.agenda-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.ag-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--linha)}
.ag-item:last-child{border-bottom:0}
.ag-hora{font-weight:700;min-width:96px;font-variant-numeric:tabular-nums}
.ag-status{font-size:12px}
.ag-cancelado,.ag-faltou{opacity:.5;text-decoration:line-through}

/* agenda: selos do agendamento online (Fase 5c) */
.ag-selos{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.ag-pendente{border-left:3px solid var(--laranja);padding-left:8px}
.ag-item.ag-atencao{opacity:1;text-decoration:none;border-left:3px solid var(--erro);padding-left:8px}   /* pago após o prazo */
.link-url{font-weight:600;color:var(--acento-texto);overflow-wrap:anywhere;word-break:break-all}
.codigo-longo{word-break:break-all;white-space:normal}
.fotos-ficha{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.foto-mini{position:relative;display:block;width:96px;height:96px;border-radius:10px;overflow:hidden;border:1px solid var(--linha);background:var(--card-2)}
.foto-mini img{width:100%;height:100%;object-fit:cover;display:block}
.foto-mini span{position:absolute;left:0;right:0;bottom:0;padding:2px 6px;font-size:11px;font-weight:600;color:#fff;background:rgba(10,16,32,.62)}

/* ============================== Agendamento online — página PÚBLICA no endereço do salão (Fase 5c) ============================== */
.agendar-corpo{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.agendar-topo{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 16px;color:#fff;
  background:radial-gradient(70% 120% at 100% 0%,color-mix(in srgb,var(--a2) 30%,transparent),transparent 65%),linear-gradient(160deg,var(--menu),var(--menu-2))}
.agendar-topo .logo-salao{max-height:64px;max-width:min(260px,80vw);object-fit:contain}
.agendar-topo b{font-size:20px;letter-spacing:-.01em;text-align:center;overflow-wrap:anywhere}
.agendar{width:100%;max-width:720px;margin:0 auto;padding:24px 16px 40px;flex:1;min-width:0}
.agendar-cab{margin-bottom:16px}
.agendar-cab h1{font-size:24px}
.agendar-cab p{color:var(--suave);margin:6px 0 0}
.agendar-sub{font-size:15px;margin:4px 0 10px}
.passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;list-style:none;padding:0;margin:0 0 18px}
.passos li{padding:8px 6px;border-radius:10px;background:var(--chip);color:var(--suave);font-size:12.5px;font-weight:600;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.passos li.ativo{background:linear-gradient(135deg,var(--a1),var(--a2));color:var(--sobre-a)}
.passos li.feito{background:var(--a-claro);color:var(--acento-texto)}
.escolhido{margin:0 0 14px;color:var(--texto-2);overflow-wrap:anywhere}
.agendar-opcoes{display:grid;gap:10px}
.agendar-opcao{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--linha);border-radius:var(--raio-sm);
  background:var(--card);color:var(--texto);box-shadow:var(--sombra);min-width:0;overflow-wrap:anywhere}
.agendar-opcao:hover{border-color:color-mix(in srgb,var(--a1) 55%,var(--linha));text-decoration:none}
.agendar-opcao b{font-size:15px}
.agendar-opcao span{color:var(--acento-texto);font-weight:600;font-size:13px}
.agendar-dias{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.agendar-dia{flex:none;display:flex;flex-direction:column;align-items:center;min-width:58px;padding:8px 6px;border:1px solid var(--linha);
  border-radius:12px;background:var(--card);color:var(--texto)}
.agendar-dia b{font-size:18px;line-height:1.2}
.agendar-dia small{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.agendar-dia:hover{text-decoration:none;border-color:var(--a1)}
.agendar-dia.sel{background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent;color:var(--sobre-a)}
.agendar-dia.sel small{color:inherit}
.agendar-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.agendar-hora{padding:10px 0;text-align:center;border:1px solid var(--linha);border-radius:10px;background:var(--card);color:var(--texto);
  font-weight:600;font-variant-numeric:tabular-nums}
.agendar-hora:hover{text-decoration:none;border-color:var(--a1);color:var(--acento-texto)}
.agendar-rodape{padding:18px 16px 26px;text-align:center;font-size:12px;color:var(--suave)}
/* campo armadilha (anti-robô): fora da tela, não "display:none" (robô que lê CSS simples ainda preenche) */
.armadilha{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0}
.politica{margin:0;padding:12px 14px;border-radius:10px;background:var(--aviso-claro);color:var(--texto-2);font-size:13px}
.pix{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0}
.pix img{width:220px;height:220px;max-width:100%;background:#fff;padding:8px;border-radius:12px}
.pix-valor{font-size:16px;margin:0}
.pix-copia{width:100%}
.pix-copia textarea{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all}

/* ============================== Celular e telas médias ============================== */
@media (max-width:1200px){
  .resultado-grid,.dash-grid{grid-template-columns:1fr}
}
@media (max-width:980px){
  .captura-grid,.modal-grid,.mapeamento,.evol-grid{grid-template-columns:1fr}
  .indicadores{grid-template-columns:repeat(3,minmax(0,1fr))}
  .im-mapa{display:none}
  .im-base{grid-template-columns:1fr;justify-items:center;bottom:90px}
  .im-dir,.im-esq{display:none}
  .im-regiao b{font-size:24px}
}
@media (max-width:900px){
  .menu{transform:translateX(-100%);transition:transform .22s ease;box-shadow:none}
  body.menu-aberto .menu{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.4)}
  body.menu-aberto .veu{display:block;position:fixed;inset:0;z-index:35;background:rgba(10,16,32,.45)}
  body.menu-aberto{overflow:hidden}
  .principal{margin-left:0}
  .btn-menu{display:block}
  .topo{padding:8px 16px;gap:8px}
  .conteudo{padding:18px 16px 40px}
  .seletor-salao select{min-width:0;max-width:44vw}
  .esconde-cel{display:none}
  .form-grid,.anamnese-grid{grid-template-columns:1fr}
  .form-grid .col-2,.form-grid .col-3{grid-column:auto}
  .busca input{min-width:0;width:100%}
  .busca{flex:1;min-width:0}
  .conh-etapas{grid-template-columns:1fr}
  .previa-marca{grid-template-columns:1fr}
  h1{font-size:22px}
  .dados-2{grid-template-columns:1fr}
  .dados-2 dt{margin-top:6px}
}
@media (max-width:560px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi b{font-size:20px}
  .indicadores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barra{grid-template-columns:110px 1fr 28px}
  .cam-acoes{flex-direction:column}
  .regiao-seletor{grid-template-columns:1fr}
  .mapa-box{max-width:170px;margin:0 auto}
  .card{padding:16px}
  .publico .card{padding:22px 18px}
  .im-ajuda-grid{grid-template-columns:1fr}
  .comp-par{grid-template-columns:1fr}
}
@media print{
  .menu,.topo,.veu,.btn-menu{display:none!important}
  .principal{margin-left:0}
  body{background:#fff}
}