/* =====================================================================
   Agente de Vendas IA · visual da escala (AV-03)
   Tokens COPIADOS de MAQUINA-CONTEUDO/app/public/escala.css (o layout escala do Painel CS, shadcn em CSS puro) e a casca (topo, lateral, entrada)
   do desenho aprovado (produto/telas/gerador/html/telas.css), sem as anotações do desenho (bolinhas e quadros de estado).
   SEM modo escuro (decisão do Rodrigo, 29/09): só o tema claro, e o navegador é avisado (color-scheme). Cabe em 390 px sem rolagem lateral.
   Roxo só em foco, seleção e ação de destaque. Verde, âmbar e vermelho só para estado.
   ===================================================================== */
:root{
  color-scheme:light;
  --background:#FFFFFF; --foreground:#170722; --page:#FAF9FB;
  --card:#FFFFFF; --popover:#FFFFFF;
  --primary:#170722; --primary-foreground:#FBF9FD;
  --secondary:#F4F2F6; --muted:#F4F2F6; --muted-foreground:#6F6579;
  --accent:#F3ECF9; --accent-foreground:#5D2784; --brand:#5D2784;
  --border:#E7E3EC; --input:#E2DDE8; --ring:#5D2784; --radius:.5rem;
  --crit:#DC2626; --crit-text:#B91C1C; --crit-bg:#FEF2F2; --crit-border:#FECACA;
  --aten:#D97706; --aten-text:#A15C07; --aten-bg:#FFFBEB; --aten-border:#FDE68A;
  --saud:#16A34A; --saud-text:#15803D; --saud-bg:#F0FDF4; --saud-border:#BBF7D0;
  --font-sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,Arial,sans-serif;
  --font-display:'Bricolage Grotesque','IBM Plex Sans',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --shadow-sm:0 1px 2px rgba(23,7,34,.05); --shadow-lg:0 10px 30px -8px rgba(23,7,34,.18);
}
*{box-sizing:border-box}
html,body{background:var(--page)}
body{margin:0;color:var(--foreground);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand)}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.oculto{display:none!important}
.mudo{color:var(--muted-foreground)}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- topo ---------- */
.top{background:var(--background);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
.top .in{max-width:1392px;margin:0 auto;padding:0 24px;min-height:60px;display:flex;align-items:center;gap:14px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--foreground)}
.marca img{height:22px;width:auto;display:block}
.produto{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.vsep{width:1px;height:24px;background:var(--border)}
.painel{display:contents}
.nav{display:flex;gap:2px}
.nav a{font-size:14px;font-weight:500;color:var(--muted-foreground);padding:7px 11px;border-radius:var(--radius);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.nav a:hover{color:var(--foreground);background:var(--muted)}
.nav a.on{color:var(--foreground);background:var(--muted)}
.nav a .cnt{background:var(--crit-bg);color:var(--crit-text);border:1px solid var(--crit-border);border-radius:999px;font-size:11px;font-weight:600;padding:0 6px;line-height:16px}   /* AV-22a: alertas abertos ao lado de "Saúde" */
.nav a .f3t{border:1px dashed var(--input);color:var(--muted-foreground);border-radius:999px;font-size:11px;font-weight:600;padding:0 6px;line-height:16px}
.dir{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted-foreground);min-width:0}
.cli-uso{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted-foreground);margin:0;min-width:0}
.cli-uso .rot{font-weight:500;white-space:nowrap}
.cli-uso.sem{font-style:italic}
.cli-uso select{display:block;width:auto;max-width:210px;height:32px;margin:0;border:1px solid var(--input);border-radius:var(--radius);background:var(--background);padding:0 8px;font-size:13px;color:var(--foreground)}
.eu{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--muted-foreground);min-width:0}
.eu .nome{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eu:hover .nome{color:var(--foreground)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-foreground);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.sair{font-size:13px;font-weight:500;color:var(--muted-foreground);background:none;border:0;padding:6px 8px;border-radius:var(--radius);cursor:pointer}
.sair:hover{background:var(--muted);color:var(--foreground)}
.menu-bt{display:none;margin-left:auto;align-items:center;gap:6px;border:0;background:none;padding:0;border-radius:999px;cursor:pointer;color:var(--muted-foreground)}

/* ---------- casca ---------- */
.crumb{max-width:1392px;margin:0 auto;padding:14px 24px 0;font-size:13px;color:var(--muted-foreground)}
.crumb a{color:var(--muted-foreground);text-decoration:none}
.crumb a:hover{color:var(--foreground);text-decoration:underline}
.crumb b{color:var(--foreground);font-weight:600}
.shell{max-width:1392px;margin:0 auto;padding:16px 24px 40px;display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;align-items:start}
.shell.solo{grid-template-columns:minmax(0,1fr)}
.side{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 2px);padding:14px 10px;min-width:0}
.side .cli{padding:2px 8px 12px;border-bottom:1px solid var(--border);margin-bottom:8px}
.side .cli b{display:block;font-size:14px}
.side .cli small{display:block;color:var(--muted-foreground);font-size:12.5px;line-height:1.45}
.side .troca{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:8px 0 0;border:1px solid var(--input);border-radius:var(--radius);padding:6px 9px;font-size:13px;font-weight:500;cursor:pointer;background:var(--background)}
.side h4{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);padding:10px 8px 4px}
.side a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:calc(var(--radius) - 2px);font-size:13.5px;color:var(--foreground);text-decoration:none}
.side a:hover{background:var(--muted)}
.side a.on{background:var(--accent);color:var(--accent-foreground);font-weight:600}
.side a.f3{color:var(--muted-foreground)}
.side .vazio-lat{display:block;padding:6px 8px;font-size:13px;color:var(--muted-foreground)}
.side select,.sel-cel select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:16px}
.sel-cel{display:none;position:relative;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--input);border-radius:var(--radius);padding:8px 10px;font-size:13.5px;font-weight:600;background:#fff;cursor:pointer}
.sel-cel small{font-weight:400;color:var(--muted-foreground)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:#A39CAB}
.dot.ok{background:var(--saud)} .dot.off{background:#CFC8D6}
.main{min-width:0}

/* ---------- cabeçalho de página ---------- */
.pg-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin:4px 0 18px}
.pg-h>div:first-child{min-width:0;flex:1 1 420px}
.pg-h h1{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.025em;line-height:1.15;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pg-h .sub{font-size:13.5px;color:var(--muted-foreground);margin-top:6px}

/* ---------- peças ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 2px);box-shadow:var(--shadow-sm);min-width:0}
.card-b{padding:18px 20px}
.esqueleto .card-b{display:grid;gap:10px;justify-items:start}
.esqueleto p{color:var(--muted-foreground);font-size:13.5px}
.esqueleto p b{color:var(--foreground);font-weight:600}
.sem-acesso .card-b{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 20px}
.sem-acesso h1{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em}
.sem-acesso p{color:var(--muted-foreground);max-width:56ch}
.sem-acesso .btn{margin-top:8px}
.ic{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-foreground);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.ic-mudo{background:var(--muted);color:var(--muted-foreground)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--radius);font-size:13.5px;font-weight:500;border:1px solid var(--input);background:var(--background);color:var(--foreground);white-space:nowrap;text-decoration:none;cursor:pointer}
.btn-pri{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.btn-pri:hover{background:#2a1238}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-cheio{width:100%}
.btn-link{background:none;border:0;color:var(--brand);font-weight:500;font-size:13px;text-decoration:none;white-space:nowrap;cursor:pointer;padding:0}
.btn-link:hover{text-decoration:underline}

.badge{display:inline-flex;align-items:center;gap:5px;border-radius:calc(var(--radius) - 2px);padding:1px 8px;font-size:12px;font-weight:600;line-height:18px;border:1px solid transparent;white-space:nowrap;background:var(--secondary);color:var(--muted-foreground)}
.b-brand{background:var(--accent);color:var(--accent-foreground)}
.b-ok{background:var(--saud-bg);color:var(--saud-text);border-color:var(--saud-border)}
.b-f3{background:#fff;color:var(--muted-foreground);border:1px dashed var(--input)}

/* avisos e erro */
.aviso{display:grid;grid-template-columns:16px minmax(0,1fr);gap:2px 10px;border:1px solid #E2D3EF;border-radius:var(--radius);padding:12px 14px;background:var(--accent);font-size:13.5px}
.aviso>svg{margin-top:2px;color:var(--brand)}
.erro{background:var(--crit-bg);color:var(--crit-text);border:1px solid var(--crit-border);border-radius:var(--radius);font-size:13px;padding:9px 12px}

/* ---------- campos ---------- */
label{display:block;font-size:13px;font-weight:500;color:var(--foreground)}
input[type=text],input[type=email],input[type=password]{display:block;width:100%;height:38px;margin-top:5px;border:1px solid var(--input);border-radius:var(--radius);background:var(--background);padding:0 12px;font-size:14px;color:var(--foreground)}
input:focus-visible,select:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}
.campo{min-width:0}

/* ---------- entrar (L0) e as irmãs ---------- */
.entrar{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px;gap:18px}
.entrar .caixa{width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 2px);box-shadow:var(--shadow-sm);padding:26px;display:grid;gap:14px}
.entrar h1{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:35px}
.entrar .pe{font-size:12px}
.marca-caixa{display:flex;align-items:center;gap:10px}
.marca-caixa img{height:24px;width:auto;display:block}
.sub-caixa{margin-top:6px;font-size:13.5px}
.fluxo{display:contents}
.fluxo .btn-link{justify-self:start}
.regras{display:grid;gap:2px}
.regra{font-size:12.5px;color:var(--muted-foreground)}
.regra.ok{color:var(--saud-text)}
.regra.ok:before{content:'✓ '} .regra:not(.ok):before{content:'· '}
.miudo{font-size:12.5px}
.aviso-cx{margin:0}

/* ---------- celular ---------- */
@media (max-width:720px){
  .top .in{padding:10px 16px;min-height:54px;position:relative}
  .vsep{display:none}
  .produto{font-size:14px}
  .menu-bt{display:inline-flex}
  .painel{display:none;position:absolute;left:12px;right:12px;top:calc(100% + 6px);z-index:40;flex-direction:column;align-items:stretch;gap:10px;
    background:var(--popover);border:1px solid var(--border);border-radius:calc(var(--radius) + 2px);box-shadow:var(--shadow-lg);padding:12px}
  .top.aberto .painel{display:flex}
  .nav{flex-direction:column;gap:2px}
  .nav a{padding:9px 10px}
  .dir{flex-direction:column;align-items:stretch;gap:10px;margin:0;padding-top:10px;border-top:1px solid var(--border)}
  .cli-uso{display:grid;gap:4px}
  .cli-uso select{width:100%;max-width:none;height:38px}
  .eu{justify-content:space-between;padding:4px 0}
  .eu .nome{max-width:none;color:var(--foreground);font-weight:600}
  .sair{text-align:left;padding:8px}
  .crumb{padding:12px 16px 0;font-size:12.5px}
  .shell{grid-template-columns:minmax(0,1fr);padding:12px 16px 32px;gap:14px}
  .side{padding:12px}
  .side h4,.side a,.side .vazio-lat{display:none}
  .side .cli{border-bottom:0;margin:0;padding:0 0 10px}
  .sel-cel{display:flex}
  .pg-h{margin-bottom:14px}
  .pg-h>div:first-child{flex-basis:100%}
  .pg-h h1{font-size:22px}
  .card-b{padding:14px}
  .so-pc{display:none!important}
}

/* aviso curto no canto (trocar de cliente que não deu, sair que não deu) */
.toast{position:fixed;right:16px;bottom:18px;z-index:60;background:var(--background);color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:11px 16px;font-size:13.5px;max-width:calc(100vw - 32px)}

/* o seletor de seção e de agente é um <select> transparente por cima da caixa desenhada: o foco do teclado aparece na caixa */
.sel-cel:focus-within,.side .troca:focus-within{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}

/* =====================================================================
   E2 · Cadastro do cliente (AV-04b): peças copiadas do desenho aprovado (produto/telas/gerador/html/telas.css), sem as anotações (bolinhas roxas
   e quadros de estado). Nenhum "style=" dentro das páginas (a política de segurança não aceita): tudo aqui.
   ===================================================================== */
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mt{margin-top:16px}
.mono{font-family:var(--font-mono)}
.card-h{padding:16px 20px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px 14px;flex-wrap:wrap}
.card-h h2{font-size:15px;font-weight:600;letter-spacing:-.01em}
.card-h p{font-size:13px;color:var(--muted-foreground);margin-top:3px;max-width:76ch}
.card-h>div{min-width:0}
.e2 .card-b{padding:14px 20px 18px}
.g75{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start}
.dica{font-size:12.5px;color:var(--muted-foreground)}
.b-aten{background:var(--aten-bg);color:var(--aten-text);border-color:var(--aten-border)}
.fase{display:inline-flex;align-items:center;gap:6px;font:600 11px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brand);border:1.5px dashed #CDB8E3;border-radius:999px;padding:2px 10px;background:#fff;white-space:nowrap}

/* listas que viram cartões no celular */
.lst{display:grid}
.lst .lh,.lst .lr{display:grid;gap:12px;align-items:center;padding:11px 20px}
.lst .lh{font-size:12.5px;font-weight:500;color:var(--muted-foreground);border-bottom:1px solid var(--border);padding-top:8px;padding-bottom:8px}
.lst .lr{border-bottom:1px solid var(--border)}
.lst .lr:last-child{border-bottom:0}
.lst .lr>div{min-width:0}
.lst .lr b{font-weight:600}
.lst .lr small{display:block;color:var(--muted-foreground);font-size:12.5px;line-height:1.45}
.lst .lr.lsel{background:var(--accent)}
.lst .rc{display:none;color:var(--muted-foreground);font-size:12.5px;margin-right:4px}
.lst.l-chaves .lh,.lst.l-chaves .lr{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.3fr) 98px}
.lst.l-cc .lh,.lst.l-cc .lr{grid-template-columns:.4fr minmax(0,2fr) minmax(0,1fr)}
.lst .lr .acoes{display:flex;gap:12px;justify-content:flex-end;align-items:center}
.lst .lr .lin-msg{grid-column:1 / -1;font-size:13px;border-radius:var(--radius);padding:8px 12px}
.lst .lr .lin-msg.ok{background:var(--saud-bg);color:var(--saud-text);border:1px solid var(--saud-border)}
.lst .lr .lin-msg.erro{background:var(--crit-bg);color:var(--crit-text);border:1px solid var(--crit-border)}
.lst .lr .lin-erro{display:block;margin-top:4px;color:var(--crit-text);font-size:12.5px}
.lst .lr.testando .btn-link{opacity:.45;pointer-events:none}

/* o estado de cada chave: três jeitos, só de estado */
.c3{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;white-space:nowrap;border-radius:999px;padding:1px 9px;border:1px solid}
.c3.ok{color:var(--saud-text);background:var(--saud-bg);border-color:var(--saud-border)}
.c3.at{color:var(--aten-text);background:var(--aten-bg);border-color:var(--aten-border)}
.c3.no{color:var(--crit-text);background:var(--crit-bg);border-color:var(--crit-border)}
.c3.na{color:var(--muted-foreground);background:#fff;border-color:var(--border);border-style:dashed}
.c3 svg.i{width:12px;height:12px}

/* o campo da chave: o texto fica mascarado (a chave é para colar, não para ler) */
.e2 input.chave{display:block;width:100%;height:38px;margin-top:6px;border:1px solid var(--input);border-radius:var(--radius);background:var(--background);padding:0 12px;font-size:14px;color:var(--foreground);-webkit-text-security:disc;text-security:disc;font-family:var(--font-mono)}
.e2 input.chave::placeholder{color:#A39CAB;font-family:var(--font-sans)}
.e2 .campo label .para{color:var(--accent-foreground);font-weight:600}
.e2 .campo .dica{margin-top:6px}
.e2 .aviso-cofre{margin:12px 20px 0}

@media (max-width:720px){
  .pg-h .acts{width:100%}
  .pg-h .acts .btn-pri{flex:1 1 100%}
  .card-h{padding:14px 14px 0}
  .e2 .card-b{padding:12px 14px 14px}
  .g75{grid-template-columns:minmax(0,1fr)}
  .lst .lh{display:none}
  .lst .lr,.lst.l-chaves .lr,.lst.l-cc .lr{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 14px}
  .lst .rc{display:inline}
  .lst .lr .acoes{justify-content:flex-start}
  .e2 .aviso-cofre{margin:12px 14px 0}
}