/* Console Aseyo — sistema visual derivado do brandbook v1.1, com tema duplo.
   Claro = modo clean/conversacional (padrão). Escuro = modo institucional.
   Tokens semânticos trocam por [data-theme]; componentes nunca usam hex cru.
   Marca preservada: Syne (display) + Outfit (body), dourado, ponto da logo, glass. */

:root{
  /* ── Constantes de marca (iguais nos dois temas) ── */
  --gold-bright:#f3c65f; --gold-dark:#de9800; --gold-deep:#a87f4f;
  --gold-grad:linear-gradient(135deg,#f3c65f 0%,#de9800 100%);
  --font-display:"Syne",sans-serif; --font-body:"Outfit",sans-serif;
  --radius-lg:26px; --radius-md:18px; --radius-sm:12px;
  --ring:0 0 0 3px rgba(222,152,0,.35);

  /* ── Tema CLARO (padrão) ── */
  --gold-primary:#c2890a;                 /* dourado legível p/ texto sobre claro */
  --bg:#eceee9; --bg-dark:#eceee9;        /* fundo da página (alias legado) */
  --bg-surface:#ffffff; --bg-elevated:#fafaf8;
  --text-main:#191919; --text-muted:#56565e; --text-dim:#8c8c93;
  --line:rgba(17,17,17,.07); --line-strong:rgba(17,17,17,.13);
  --glass-bg:#ffffff; --glass-gold-bg:rgba(222,152,0,.09); --glass-gold-border:rgba(222,152,0,.26);
  --ok:#1f9d57; --warn:#b9860b; --bad:#cf5b40;
  --shadow:0 1px 2px rgba(20,20,20,.04), 0 6px 18px rgba(20,20,20,.05);
  --shadow-lg:0 18px 50px rgba(20,20,20,.12);
  --orb-opacity:.10;
}

[data-theme="dark"]{
  --gold-primary:#f3c65f;
  --bg:#050505; --bg-dark:#050505; --bg-surface:#0c0c0d; --bg-elevated:#141416;
  --text-main:#f5f5f5; --text-muted:#a1a1aa; --text-dim:#6c6c75;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.15);
  --glass-bg:#ffffff06; --glass-gold-bg:rgba(222,152,0,.07); --glass-gold-border:rgba(222,152,0,.22);
  --ok:#5fd38a; --warn:#f3c65f; --bad:#e07a5f;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --orb-opacity:.14;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text-main);
  font-family:var(--font-body);font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow:hidden;position:relative;
  transition:background-color .35s ease,color .25s ease;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--font-display);letter-spacing:-.03em;font-weight:700;line-height:1.1}
button{font-family:var(--font-body);cursor:pointer}
input,textarea,select{font-family:var(--font-body)}
svg{display:block}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

/* Surfaces que reagem ao tema com transição suave */
.card,.sidebar,.topbar,.login-card,.list-item,.composer,.norte{
  transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease;
}

/* Atmosfera (glow dourado sutil) */
.glow-orb{filter:blur(130px);z-index:0;pointer-events:none;opacity:var(--orb-opacity);border-radius:50%;position:fixed}
.orb-1{background:var(--gold-bright);width:560px;height:560px;top:-14%;left:-12%}
.orb-2{background:var(--gold-dark);width:480px;height:480px;bottom:-18%;right:-12%;opacity:calc(var(--orb-opacity) * .8)}

/* Logo */
.logo{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;display:inline-flex;align-items:baseline;line-height:1}
.logo-dot{color:var(--gold-primary);margin-left:.02em}

@keyframes pulse-status{
  0%,100%{transform:scale(.92);box-shadow:0 0 0 0 rgba(222,152,0,.45)}
  50%{transform:scale(1);box-shadow:0 0 0 .3em rgba(222,152,0,0)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:99px;font-weight:600;font-size:.9rem;border:1px solid transparent;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--gold-grad);color:#1a1300;box-shadow:0 6px 18px rgba(222,152,0,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(222,152,0,.34)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:var(--glass-bg);color:var(--text-main);border-color:var(--line-strong);box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--gold-deep)}
.btn-outline{background:transparent;border-color:var(--gold-deep);color:var(--gold-primary)}
.btn-outline:hover{background:var(--glass-gold-bg)}

/* Ícone-botão circular (toggle de tema, ações) */
.icon-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-surface);border:1px solid var(--line);color:var(--text-muted);box-shadow:var(--shadow);transition:.2s}
.icon-btn:hover{color:var(--gold-primary);border-color:var(--glass-gold-border);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}

/* Tags */
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:99px;font-size:.72rem;font-family:var(--font-display);letter-spacing:.03em;font-weight:600}
.tag-glass{background:var(--glass-gold-bg);border:1px solid var(--line);color:var(--text-muted);background:transparent;border-color:var(--line-strong)}
.tag-gold{background:var(--glass-gold-bg);border:1px solid var(--glass-gold-border);color:var(--gold-primary)}
.tag .dot{width:6px;height:6px;border-radius:50%}
.tag-gold .dot{background:var(--gold-dark);animation:pulse-status 2.6s infinite}
.tag-glass .dot{background:var(--text-dim)}
.eyebrow{font-family:var(--font-display);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-primary);display:inline-flex;align-items:center;gap:11px;font-weight:600}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--gold-deep)}

/* ── LOGIN ── */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;padding:24px}
#login .theme-toggle-corner{position:absolute;top:26px;right:30px}
.login-card{position:relative;z-index:2;width:100%;max-width:418px;background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:46px 44px;animation:fadein .4s ease;box-shadow:var(--shadow-lg)}
.login-card .logo{font-size:2.1rem;margin-bottom:8px}
.login-card .sub{color:var(--text-muted);font-size:.92rem;margin-bottom:32px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-display);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;font-weight:600}
.field input{width:100%;background:var(--bg-elevated);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:13px 16px;color:var(--text-main);font-size:.95rem;transition:border-color .2s}
.field input:focus{outline:none;border-color:var(--gold-deep);box-shadow:var(--ring)}
.login-card .btn-primary{width:100%;justify-content:center;margin-top:10px}
.login-err{color:var(--bad);font-size:.85rem;min-height:20px;margin-top:12px}
.login-hint{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:.78rem;color:var(--text-dim);line-height:1.7}
.login-hint b{color:var(--text-muted);font-weight:600}

/* ── APP SHELL ── */
#app{display:none;height:100%;position:relative;z-index:2}
#app.active{display:grid;grid-template-columns:252px 1fr}

.sidebar{border-right:1px solid var(--line);background:var(--bg-surface);display:flex;flex-direction:column;padding:22px 16px;height:100vh;gap:4px}
.sidebar .brand{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 20px;border-bottom:1px solid var(--line);margin-bottom:16px}
.sidebar .brand .logo{font-size:1.5rem}
.ws-switch{margin-bottom:16px}
.ws-switch label{font-family:var(--font-display);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:7px;padding-left:10px;font-weight:600}
.ws-switch select{width:100%;background:var(--bg-elevated);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text-main);font-size:.85rem;cursor:pointer}
.ws-switch select:focus{outline:none;border-color:var(--gold-deep)}
.nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-sm);color:var(--text-muted);font-size:.9rem;font-weight:500;transition:background .15s,color .15s;border:1px solid transparent;position:relative}
.nav a:hover{background:var(--glass-gold-bg);color:var(--text-main)}
.nav a.active{background:var(--glass-gold-bg);border-color:var(--glass-gold-border);color:var(--gold-primary);font-weight:600}
.nav a.active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--gold-grad);border-radius:0 3px 3px 0}
.nav a .ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.nav a .ico svg{width:19px;height:19px;stroke-width:1.8}
.nav .badge{margin-left:auto;font-size:.62rem;font-family:var(--font-display);background:var(--glass-gold-bg);color:var(--gold-primary);padding:2px 8px;border-radius:99px;border:1px solid var(--glass-gold-border)}
.sidebar .footer{padding-top:14px;border-top:1px solid var(--line);margin-top:8px}
.user-chip{display:flex;align-items:center;gap:11px;padding:8px 10px}
.user-chip .av{width:36px;height:36px;border-radius:50%;background:var(--gold-grad);color:#1a1300;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:.9rem;flex-shrink:0}
.user-chip .meta{overflow:hidden}
.user-chip .nm{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip .rl{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);font-family:var(--font-display);font-weight:600}
.logout{margin-top:8px;width:100%;background:transparent;border:1px solid var(--line);color:var(--text-dim);padding:9px;border-radius:var(--radius-sm);font-size:.78rem;font-weight:500;transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.logout:hover{color:var(--bad);border-color:var(--bad)}
.logout svg{width:15px;height:15px}

/* Main */
.main{height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid var(--line);background:var(--bg);backdrop-filter:blur(16px)}
.topbar .title .crumb{font-family:var(--font-display);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:5px;font-weight:600}
.topbar .title h1{font-size:1.5rem}
.topbar .status{display:flex;align-items:center;gap:12px}
.view{padding:32px;flex:1;animation:fadein .3s ease}

/* Cards */
.card{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow)}
.card.gold{border-left:2px solid var(--gold-dark)}
.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.stat{position:relative}
.stat .lbl{font-family:var(--font-display);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px;font-weight:600}
.stat .num{font-family:var(--font-display);font-size:2.5rem;font-weight:800;line-height:1;color:var(--text-main);font-variant-numeric:tabular-nums}
.stat .num.gold{color:var(--gold-primary)}
.stat .delta{font-size:.78rem;color:var(--text-muted);margin-top:9px}
.section-title{font-size:1.1rem;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}

/* Bento dashboard */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bento .span-2{grid-column:span 2}
.bento .span-3{grid-column:span 3}
.bento .span-4{grid-column:span 4}

/* Norte (hero tile) */
.norte{padding:28px 30px;background:linear-gradient(135deg,var(--glass-gold-bg),transparent 70%);border:1px solid var(--glass-gold-border);border-radius:var(--radius-md);box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center}
.norte .lbl{font-family:var(--font-display);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-primary);margin-bottom:14px;font-weight:600}
.norte .row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.norte .big{font-family:var(--font-display);font-size:3.2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.norte .of{color:var(--text-muted);font-size:1.05rem}
.bar{height:8px;background:var(--line-strong);border-radius:99px;margin-top:20px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--gold-grad);border-radius:99px;transition:width .6s ease}

/* Funil */
.funnel{display:flex;flex-direction:column;gap:9px}
.funnel .step{display:flex;align-items:center;gap:14px}
.funnel .step .nm{width:118px;font-size:.82rem;color:var(--text-muted);font-family:var(--font-display);letter-spacing:.03em;font-weight:500}
.funnel .step .track{flex:1;height:30px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.funnel .step .track > i{display:block;height:100%;background:var(--gold-grad);opacity:.85;border-radius:8px;transition:width .6s ease}
.funnel .step .val{width:54px;text-align:right;font-family:var(--font-display);font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums}

/* Tabela */
table{width:100%;border-collapse:collapse}
th{font-family:var(--font-display);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);text-align:left;padding:0 14px 14px;font-weight:600}
td{padding:14px;border-top:1px solid var(--line);font-size:.9rem;color:var(--text-main);vertical-align:middle}
tr:hover td{background:var(--glass-gold-bg)}
.pill{display:inline-block;padding:4px 12px;border-radius:99px;font-size:.72rem;font-family:var(--font-display);letter-spacing:.02em;font-weight:600;background:transparent;border:1px solid var(--line-strong);color:var(--text-muted)}
.pill.hot{background:var(--glass-gold-bg);border-color:var(--glass-gold-border);color:var(--gold-primary)}

/* Chat */
.chat{display:grid;grid-template-rows:1fr auto;height:calc(100vh - 79px)}
.chat-stream{overflow-y:auto;padding:30px 34px;display:flex;flex-direction:column;gap:20px}
.msg{max-width:760px;animation:fadein .3s ease}
.msg.user{align-self:flex-end}
.msg .who{font-family:var(--font-display);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;font-weight:600}
.msg.user .who{text-align:right;color:var(--gold-deep)}
.msg .bubble{padding:16px 20px;border-radius:var(--radius-md);font-size:.93rem;line-height:1.6;white-space:pre-wrap;box-shadow:var(--shadow)}
.msg.user .bubble{background:var(--glass-gold-bg);border:1px solid var(--glass-gold-border);border-bottom-right-radius:5px}
.msg.orch .bubble{background:var(--bg-surface);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg .bubble b,.msg .bubble strong{color:var(--gold-primary);font-weight:600}
.msg .bubble code{background:var(--bg-elevated);border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-size:.82em;color:var(--gold-primary)}
.msg .meta-row{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.chat-empty{margin:auto;text-align:center;color:var(--text-dim);max-width:480px}
.chat-empty .logo{font-size:2.4rem;margin-bottom:16px}
.chat-empty .suggest{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:24px}
.chat-empty .suggest button{background:var(--bg-surface);border:1px solid var(--line);color:var(--text-muted);padding:9px 16px;border-radius:99px;font-size:.82rem;transition:.15s;box-shadow:var(--shadow)}
.chat-empty .suggest button:hover{border-color:var(--glass-gold-border);color:var(--gold-primary);transform:translateY(-1px)}
.composer{border-top:1px solid var(--line);padding:18px 34px;background:var(--bg);display:flex;gap:12px;align-items:flex-end}
.composer textarea{flex:1;background:var(--bg-surface);border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:14px 18px;color:var(--text-main);font-size:.95rem;resize:none;max-height:160px;line-height:1.5;box-shadow:var(--shadow)}
.composer textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:var(--ring)}

/* Typing / spinner / status */
.typing{display:inline-flex;gap:5px;padding:4px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--gold-deep);animation:pulse-status 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.spinner{width:15px;height:15px;border:2px solid var(--line-strong);border-top-color:var(--gold-dark);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.st{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-family:var(--font-display);letter-spacing:.05em;padding:4px 11px;border-radius:99px;font-weight:600}
.st.queued{background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--line)}
.st.running{background:var(--glass-gold-bg);color:var(--gold-primary);border:1px solid var(--glass-gold-border)}
.st.done{background:rgba(31,157,87,.12);color:var(--ok)}
.st.failed{background:rgba(207,91,64,.14);color:var(--bad)}
.source-pill{font-size:.64rem;font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--line-strong);color:var(--text-dim);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.source-pill svg{width:12px;height:12px}
.source-pill.whatsapp{color:var(--ok);border-color:rgba(31,157,87,.35)}

/* listas/detalhe */
.kv{display:grid;grid-template-columns:160px 1fr;gap:10px 18px;font-size:.9rem}
.kv dt{color:var(--text-dim);font-family:var(--font-display);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding-top:2px;font-weight:600}
.kv dd{color:var(--text-main)}
.list-item{padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-surface);transition:.15s;box-shadow:var(--shadow)}
.list-item:hover{border-color:var(--glass-gold-border)}
.muted{color:var(--text-muted)}
.dim{color:var(--text-dim)}
.mt{margin-top:18px}.mb{margin-bottom:18px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}
.empty{padding:50px;text-align:center;color:var(--text-dim)}
.banner{padding:14px 20px;border-radius:var(--radius-md);background:var(--glass-gold-bg);border:1px solid var(--glass-gold-border);font-size:.85rem;color:var(--text-muted);display:flex;gap:12px;align-items:center;margin-bottom:22px}
.banner b{color:var(--gold-primary);font-weight:600}
.banner svg{width:18px;height:18px;color:var(--gold-dark);flex-shrink:0}

/* Responsivo */
@media (max-width:1080px){
  .grid-4,.bento{grid-template-columns:repeat(2,1fr)}
  .bento .span-3,.bento .span-4{grid-column:span 2}
  .bento .span-2{grid-column:span 2}
  .grid-3,.grid-2{grid-template-columns:1fr}
  #app.active{grid-template-columns:66px 1fr}
  .sidebar .label-text,.ws-switch label,.user-chip .meta,.nav .badge,.logout span,.sidebar .brand .logo span:not(.logo-dot){display:none}
  .sidebar .brand{justify-content:center}
}
@media (max-width:640px){
  .grid-4,.bento{grid-template-columns:1fr}
  .bento .span-2,.bento .span-3,.bento .span-4{grid-column:span 1}
  .view{padding:20px}
  .topbar{padding:16px 20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}