/* ══════════════════════════════════════════════════════════════════════════
   TEMA RECEPÇÃO IA — camada visual do painel (marca própria, 09/10/2026)
   ──────────────────────────────────────────────────────────────────────────
   Só VISUAL. Não muda layout, lógica, nem esconde nada. Sobrescreve o tema
   escuro do crm.html (paleta Klaus) pela marca Recepção IA, direção C "Til":
   menu lateral Noite com acentos Céu, fundo Névoa, cartões brancos/Bruma,
   ação em Cobalto, Figtree. Fonte: SISTEMA EDSON/marca-recepcaoia/
   (01-identidade/IDENTIDADE.md e brandbook-previa/).

   Paleta (nunca verde de marca; Pêssego só em forma pequena, nunca texto):
     Noite #0A1A3F · Cobalto #2354E8 · Céu #8EB6FF · Bruma #E6EEFC
     Névoa #F6F9FE · Grafite #46536F · Pêssego #F4A98A
   Estados: sucesso usa um verde FUNCIONAL discreto (#15803D, 5,0:1 no branco)
   só onde a semântica exige (confirmou, compareceu, disponível); alerta âmbar
   escuro; erro vermelho. Raios do brandbook: 12 px botões/campos, 20 px
   balões/cartões, 28 px cartões grandes, círculo em avatares.

   Como ligar: no <head> do crm.html, DEPOIS do </style> principal:
     <link rel="stylesheet" href="/assets/tema-recepcaoia.css?v=1">
   Rollback: trocar a linha por /assets/tema-thata.css?v=2 (arquivo mantido).
   Os nomes --navy/--gold são do CRM original: --navy = superfície mais funda
   (sidebar), --gold = cor de ação (aqui COBALTO). Mantidos para não tocar no JS.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* Tokens da marca */
  --ri-noite:#0A1A3F; --ri-noite-2:#0F2250; --ri-noite-3:#1A3270;
  --ri-cobalto:#2354E8; --ri-cobalto-tinta:#1B45C9; --ri-ceu:#8EB6FF;
  --ri-bruma:#E6EEFC; --ri-nevoa:#F6F9FE; --ri-grafite:#46536F; --ri-pessego:#F4A98A;
  --ri-lat-texto:#AFC0E2;            /* item do menu sobre Noite: 9,6:1 */
  --ri-acao:#2354E8;                 /* botões chapados, como no brandbook */
  --ri-sombra:0 1px 2px rgba(10,26,63,.06),0 12px 32px -12px rgba(10,26,63,.16);
  --ri-sombra-g:0 2px 4px rgba(10,26,63,.06),0 28px 60px -24px rgba(10,26,63,.28);
  --ri-raio:12px; --ri-raio-cartao:20px; --ri-raio-g:28px;
  --ri-fonte:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ri-voz:'Newsreader',Georgia,serif;
  --ri-ease:cubic-bezier(.22,.7,.2,1);

  /* Variáveis do CRM remapeadas */
  --navy:#0A1A3F; --navy-2:#0F2250; --navy-3:#1A3270;
  --gold:#2354E8; --gold-hover:#1B45C9; --gold-ink:#1B45C9; --on-gold:#fff;
  --gold-soft:rgba(35,84,232,.09);
  --bg:#F6F9FE; --card:#FFFFFF; --text:#0A1A3F; --text-2:#46536F; --text-3:#5F6C88;
  --border:#DCE5F5; --r:12px;
  --bg-2:#EEF3FC; --surface-2:#EEF3FC; --bg2:#EEF3FC; --line:#DCE5F5; --text-1:#0A1A3F;
  --c-success:#15803D; --c-success-bg:rgba(21,128,61,.10); --c-success-borda:rgba(21,128,61,.30);
  --c-danger:#C62828;  --c-danger-bg:rgba(198,40,40,.08);
  --c-warning:#8A5300; --c-warning-bg:rgba(245,158,11,.14);
  --ok:#15803D; --danger:#C62828;
}

/* ── BASE ── */
html,body{font-family:var(--ri-fonte);font-size:15px;color:var(--text);background:var(--ri-nevoa)}
.app{background:transparent}
.btn,input,select,textarea,button{font-family:var(--ri-fonte)}
::selection{background:rgba(35,84,232,.18)}
:focus-visible{outline:2px solid var(--ri-cobalto);outline-offset:2px}

/* Títulos e números de destaque: Figtree 600/700 */
.topbar h1,.chart-title,.modal-title,.k-title,.cal-title,.perf-section-title,
.empty h3,.qual-cab-nome,.aut-title,.cc-nome,.hlp-col h4,
.kpi-val,.cc-stat-val,.score-num,.ag-kpi-v,.ag-mini-h,.ag-ev-nome{
  font-family:var(--ri-fonte);letter-spacing:-.01em;
}
.kpi-val,.cc-stat-val,.score-num,.ag-kpi-v{font-weight:700}
.topbar h1{font-size:20px;font-weight:700;color:var(--ri-noite)}
.chart-title,.perf-section-title{font-size:16px;font-weight:700;color:var(--ri-noite)}
.modal-title{font-size:19px;font-weight:700;color:var(--ri-noite)}

/* ── SIDEBAR: Noite, acentos Céu ── */
.sidebar{
  background:var(--ri-noite);
  margin:16px 0 16px 16px;border-radius:var(--ri-raio-g);
  box-shadow:0 18px 40px rgba(10,26,63,.22);
}
@media (min-width:769px){.sidebar{position:relative}}
.sidebar::before{ /* halo Cobalto discreto no topo, como a capa do brandbook */
  content:'';position:absolute;top:-70px;right:-60px;width:240px;height:200px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(35,84,232,.38),transparent);
}
.sb-logo,.sb-nav,.sb-foot{position:relative}
.sb-logo{border-bottom:1px solid rgba(142,182,255,.12);padding:22px 20px 16px}
.sb-marca{display:block;width:172px;max-width:100%;height:auto}
.sb-logo .crm-tag{font-family:var(--ri-fonte);font-size:11.5px!important;letter-spacing:.02em!important;text-transform:none;
  color:var(--ri-lat-texto);opacity:1;margin-top:10px;font-weight:500}
.nav-section-label{font-family:var(--ri-fonte);font-size:10.5px;letter-spacing:.12em;font-weight:600;color:rgba(175,192,226,.8)}
.nav-item{border-radius:12px;color:var(--ri-lat-texto);font-weight:500}
.nav-item:hover{background:rgba(142,182,255,.08);color:#fff}
.nav-item.active{background:rgba(142,182,255,.16);color:#fff;font-weight:700;box-shadow:inset 0 0 0 1px rgba(142,182,255,.18)}
.nav-item.active .ni{color:var(--ri-ceu)}
.nav-badge{background:var(--ri-cobalto);color:#fff}
.sb-foot{border-top:0;padding:12px}
.sb-user{background:rgba(142,182,255,.07);border:1px solid rgba(142,182,255,.12);border-radius:16px;padding:10px}
.sb-name{color:#fff}
.sb-role{color:rgba(175,192,226,.78)}
.avatar-sm{background:var(--ri-cobalto);color:#fff}
.role-badge.admin{background:var(--ri-ceu);color:var(--ri-noite)}
#fila-viva-list [style*="rgba(255,255,255,.3)"]{color:rgba(175,192,226,.7)!important}
.sidebar [style*="color:var(--text-3)"]{color:rgba(175,192,226,.7)!important}

/* ── TOPBAR: cartão branco flutuante ── */
.topbar{
  background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:var(--ri-raio-cartao);
  margin:12px 16px 0;height:56px;box-shadow:var(--ri-sombra);
  backdrop-filter:blur(8px);
}
.notif-btn{border-radius:12px;background:#fff;color:var(--ri-grafite)}
.notif-btn:hover{background:var(--ri-bruma)}
/* Sino: contador em Pêssego com número em Noite (8,8:1), como no brandbook */
.notif-count{background:var(--ri-pessego);color:var(--ri-noite);box-shadow:0 0 0 2px #fff}
.notif-btn.tem-prazo .notif-count{background:var(--c-danger);color:#fff}
.notif-panel{border-radius:var(--ri-raio-cartao);box-shadow:var(--ri-sombra-g);border-color:var(--border)}
.notif-head{border-radius:var(--ri-raio-cartao) var(--ri-raio-cartao) 0 0}
.notif-head strong{color:var(--ri-noite);font-size:14px}
.notif-head button{color:var(--ri-cobalto-tinta)}
.notif-item:hover{background:var(--ri-nevoa)}
.content{padding:18px 16px 22px}
.sync-dot{background:var(--c-success)}
.sync-dot.syncing{background:#D97706}
.sync-dot.error{background:var(--c-danger)}

/* ── BOTÕES ── */
.btn{border-radius:var(--ri-raio);font-weight:600}
.btn-primary{background:var(--ri-acao);color:#fff;box-shadow:0 6px 16px -6px rgba(35,84,232,.55)}
.btn-primary:hover{background:var(--ri-cobalto-tinta)}
.btn-secondary{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--ri-bruma)}
.btn-ghost:hover{background:var(--ri-bruma)}
.btn-danger{background:var(--c-danger-bg);color:var(--c-danger);border-color:rgba(198,40,40,.28)}
/* .btn-success no painel = ação de contato (WhatsApp, link, reativar): Cobalto suave, não verde */
.btn-success{background:var(--ri-bruma);color:var(--ri-cobalto-tinta);border-color:rgba(35,84,232,.28)}
.btn-success:hover{background:#DCE6FB}
.lc-dias.fresh{background:var(--ri-bruma);color:var(--ri-cobalto-tinta)}
.btn-ia{border-radius:var(--ri-raio);border-color:var(--ri-cobalto);background:var(--ri-noite);color:var(--ri-ceu)}
.btn-ia:hover{background:var(--ri-cobalto);color:#fff}
.lc-mobile-wa{background:var(--ri-cobalto);border-radius:var(--ri-raio)}

/* ── CARTÕES ── */
.kpi,.chart-card,.card,.tbl-wrap,.list-filters,.cal-wrap,.ag-box,.perf-section,
.corretor-card,.aut-card,.jev-card,.fu-bloco,.unassigned-section,.lc-mobile{
  background:var(--card);border-color:var(--border);border-radius:var(--ri-raio-cartao);
  box-shadow:var(--ri-sombra);
}
.kpi::before{display:none}
.kpi-icon,.ag-kpi-ic,.aut-icon.gold{background:var(--ri-bruma);color:var(--ri-cobalto);border-radius:12px}
.kpi-lbl{color:var(--text-2)}
.kpi-val{color:var(--ri-noite)}
.kpi-sub.up,.perf-highlight{color:var(--c-success)!important}
.corretor-card:hover,.aut-card:hover{box-shadow:var(--ri-sombra-g)}
.aut-card.principal{border-color:var(--ri-cobalto)}

/* ── CHIPS / PÍLULAS ── */
.period-pill,.kcf-btn,.s-pill{border-radius:99px}
.period-pill{background:#fff;border-color:var(--border);color:var(--text-2)}
.period-pill:hover{border-color:var(--ri-cobalto);color:var(--ri-cobalto-tinta)}
.period-pill.active{background:var(--ri-cobalto);border-color:transparent;color:#fff;box-shadow:0 4px 12px -4px rgba(35,84,232,.5)}
.kcf-btn{background:#fff}
.tag,.status-badge,.temp-badge,.lc-dias,.presenca-badge,.fu-tag{border-radius:99px}

/* ── INPUTS ── */
.search-box,.fsel,.field input,.field select,.field textarea,.note-add input,
.cfg-sistema-field input,.cfg-score-num,.isel{
  background:#fff;border-color:var(--border);border-radius:var(--ri-raio);color:var(--text);
}
.field label{color:var(--text-2)}
.field input:focus,.field select:focus,.field textarea:focus,.note-add input:focus,
.cfg-sistema-field input:focus,.cfg-score-num:focus,.search-box:focus-within{
  border-color:var(--ri-cobalto);box-shadow:0 0 0 3px rgba(35,84,232,.16);background:#fff;
}
.isel:hover{border-color:var(--ri-cobalto)}
input[type=date],input[type=time],input[type=datetime-local]{color-scheme:light}
select option,select optgroup{background:#fff;color:var(--text)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--ri-cobalto)}

/* ── TABELAS ── */
th{background:var(--ri-nevoa);color:var(--text-3);border-bottom-color:var(--border)}
td{border-bottom-color:#E9EFF9}
tr:hover td{background:#F1F5FD}
th[onclick]:hover{background:var(--ri-bruma)}
.perf-table th{background:var(--ri-nevoa)}
.perf-table tbody tr:hover td{background:#F1F5FD}
.perf-section-hd{background:#fff}
@media (min-width:769px){
  #tbl-wrap .leads-table th:nth-child(1),#tbl-wrap .leads-table th:nth-child(2){background:var(--ri-nevoa)}
}

/* ── KANBAN ── */
.k-col{background:rgba(230,238,252,.55);border-color:var(--border);border-radius:var(--ri-raio-cartao)}
.k-col.drag-over{background:rgba(35,84,232,.07);outline-color:rgba(35,84,232,.45)}
.k-count{background:var(--ri-bruma);color:var(--ri-cobalto-tinta)}
.k-total{border-bottom-color:var(--border)}
.lead-card{border-radius:16px;box-shadow:var(--ri-sombra)}
.lead-card:hover{border-color:rgba(35,84,232,.45);box-shadow:var(--ri-sombra-g)}
.kanban-wrap,.tbl-wrap{scrollbar-color:#B8C6E3 rgba(142,182,255,.12)}
.kanban-wrap::-webkit-scrollbar-thumb,.tbl-wrap::-webkit-scrollbar-thumb{background:#B8C6E3;background-clip:padding-box}
.kanban-wrap::-webkit-scrollbar-thumb:hover,.tbl-wrap::-webkit-scrollbar-thumb:hover{background:#8796B5;background-clip:padding-box}
.kanban-wrap::-webkit-scrollbar-track,.tbl-wrap::-webkit-scrollbar-track{background:rgba(142,182,255,.12);background-clip:padding-box}
::-webkit-scrollbar-thumb{background:#C8D3EA}

/* ── MODAIS ── */
.overlay{background:rgba(10,26,63,.45)}
.modal{border-radius:var(--ri-raio-cartao);box-shadow:0 24px 60px rgba(10,26,63,.24)}
.d-tab.active,.cfg-tab.active{border-bottom-color:var(--ri-cobalto);color:var(--ri-noite)}
.d-tab:hover{color:var(--ri-noite)}

/* ── FICHA DO LEAD / LEITURA DA IA ── */
.qual-sec-title{color:var(--text-2)}
.jev-card{border-width:1px}
.jev-acao{background:var(--ri-bruma);color:var(--ri-noite);border-radius:12px}
.jev-prov{color:var(--c-warning);background:var(--c-warning-bg)}

/* ── AGENDA ── */
.cal-header{background:#fff}
.cal-day.other-month{background:#F3F6FC}
.cal-day.today .cal-dn{background:var(--ri-cobalto);color:#fff}
.cal-day.sel{background:rgba(35,84,232,.06);box-shadow:inset 0 0 0 2px var(--ri-cobalto)}
.cal-nav{border-radius:10px;background:#fff}
.ag-mini-d.hoje{box-shadow:inset 0 0 0 1.5px var(--ri-cobalto)}
.ag-mini-d.sel{background:var(--ri-cobalto);color:#fff;border-radius:99px}
.ag-mini-d.tem::after{background:var(--ri-cobalto)}
.ag-mini-d.sel.tem::after{background:#fff}
.ag-agenda,.ag-kpi,.ag-ev{border-radius:12px}
.ag-agenda.on{border-color:var(--ri-cobalto);box-shadow:inset 0 0 0 1px var(--ri-cobalto)}
.cal-meeting.confirmed{background:var(--c-success-bg);border-color:var(--c-success)}

/* ── CORES SEMÂNTICAS fixas no CSS original (claras demais sobre branco) ── */
.cfg-toggle.on{background:var(--ri-cobalto)}
.cfg-toggle.off{background:#C8D3EA}
.aut-status.inativo{background:#E9EFF9;color:#5B6885}
.btn-presenca.sim{background:var(--c-success-bg)}
.btn-presenca.sim,.cal-pb.sim,.cal-ps.ok,.perf-conv.good{color:var(--c-success)}
.perf-conv.good{background:var(--c-success-bg)}
.senha-box-title,.senha-val{color:var(--ri-cobalto-tinta)}
.cal-pb.sim{border-color:var(--c-success-borda)}
.lc-dias.warm,.lc-dias.hot,.presenca-badge.pending,.aut-status.pendente,.fu-aviso strong,.fu-tag.today,.perf-conv.mid{color:var(--c-warning)}
.fu-tag.overdue{color:var(--c-danger);background:var(--c-danger-bg)}
.fu-tag.today{background:var(--c-warning-bg)}
.fu-tag.soon{color:var(--c-success);background:var(--c-success-bg)}
.hlp-in{color:var(--ri-cobalto-tinta)}
.ic.lucide-circle-check{color:var(--c-success)}
.ic.lucide-triangle-alert{color:#B45309}
.lead-card.due-today{border-color:#F59E0B!important}
.senha-warn{color:var(--text-3)}
.admin-filter-wrap{background:var(--ri-bruma);border-color:rgba(35,84,232,.25)}
.admin-filter-wrap label{color:var(--text-2)}

/* Superfícies escuras que continuam escuras: texto Céu em vez de --gold-ink */
.corretor-avatar,.cc-avatar,.aut-step-n,.lc-mobile-ver,.bulk-count{color:var(--ri-ceu)}
.bulk-action-bar{background:var(--ri-noite);border-left-color:var(--ri-cobalto);border-radius:16px}

/* ── TOASTS: cartão Noite, marcador colorido à esquerda ── */
.toast{background:var(--ri-noite);color:#fff;border:1px solid rgba(142,182,255,.16);border-radius:14px;
  box-shadow:0 16px 36px -12px rgba(10,26,63,.45);font-family:var(--ri-fonte);font-size:13px}
.toast.ok{border-left:4px solid var(--ri-ceu)}   /* marcador (forma), não texto */
.toast.err{border-left:4px solid var(--ri-pessego)}
.toast button{color:var(--ri-lat-texto)!important}

/* Estilos inline herdados do tema escuro (escritos no JS) */
[style*="background:#1c1c38"],[style*="bg-2,#1c1c38"],[style*="bg2,#1c1c38"]{background:#EEF3FC!important}

/* ── LOGIN ── */
.auth-screen{background:var(--ri-noite);overflow:hidden}
.auth-screen::before{ /* halo Cobalto, como a capa do brandbook */
  content:'';position:absolute;top:-22vw;right:-16vw;width:62vw;height:62vw;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(35,84,232,.5),transparent);
}
.auth-screen::after{
  content:'';position:absolute;bottom:-26vw;left:-20vw;width:50vw;height:50vw;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(142,182,255,.14),transparent);
}
.auth-card{border-radius:var(--ri-raio-g);position:relative;z-index:1;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);padding:40px 34px 32px;max-width:380px}
.auth-logo{margin-bottom:26px}
.auth-marca{display:block;width:224px;max-width:80%;height:auto;margin:0 auto}
.auth-tag{font-family:var(--ri-fonte);font-size:12.5px;letter-spacing:.01em;text-transform:none;font-weight:500;
  color:var(--ri-grafite);opacity:1;margin-top:14px;display:inline-block;padding:5px 12px;border-radius:99px;background:var(--ri-bruma)}
.auth-sub{font-size:13px;color:var(--text-2);margin-top:12px;line-height:1.5}
.auth-card .field label{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ri-noite)}
.auth-card .field input{height:46px;font-size:15px}
#auth-btn{height:48px;font-size:15px}

/* ── AVATAR DA ASSISTENTE FLUTUANDO ── */
.assistente-flutua{
  position:fixed;right:22px;bottom:22px;z-index:40;display:flex;align-items:center;gap:10px;
  padding:6px 16px 6px 6px;border-radius:99px;border:1px solid rgba(142,182,255,.22);cursor:pointer;
  background:var(--ri-noite);color:#fff;font-family:var(--ri-fonte);
  box-shadow:0 14px 30px -10px rgba(10,26,63,.5);transition:transform .2s var(--ri-ease),box-shadow .2s var(--ri-ease);
}
.assistente-flutua:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(10,26,63,.55)}
.af-avatar{position:relative;width:38px;height:38px;border-radius:50%;background:var(--ri-bruma);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:16px;color:var(--ri-cobalto)}
.af-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center top;display:block}
.af-online{position:absolute;right:-1px;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--ri-pessego);border:2px solid var(--ri-noite)}
.af-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.af-txt b{font-size:13px}
.af-txt small{font-size:11px;color:var(--ri-lat-texto)}
@media (max-width:768px){.assistente-flutua{display:none}}
body:has(#atendimento-host[style*="display: block"]) .assistente-flutua,
body:has(#atendimento-host:not([style*="none"])) .assistente-flutua{display:none}

/* ── DASHBOARD / AGENDA (clínica) ── */
.dc-kpi .kpi-val{font-size:26px}
#agenda-clinica .cal-day{border-radius:10px}
#agenda-clinica .cal-day:hover{background:rgba(35,84,232,.05)}
#agenda-clinica .agc-tabela tr:hover td{background:#F1F5FD}

/* ── MOBILE ── */
.bottom-nav{background:rgba(255,255,255,.97);border-top-color:var(--border);box-shadow:0 -4px 18px rgba(10,26,63,.06)}
.bn-item .bn-lbl{color:var(--text-3)}
.bn-item.active .bn-lbl{color:var(--ri-cobalto-tinta)}
.bn-item.active .bn-icon{filter:none;color:var(--ri-cobalto)}
.bn-bdg{background:var(--ri-pessego);color:var(--ri-noite)}
.hbg span{background:var(--ri-noite)}

@media (max-width:1100px) and (min-width:769px){
  .sidebar{margin:12px 0 12px 12px}
  .topbar{margin:12px 12px 0}
}
@media (max-width:768px){
  .sidebar{margin:0;border-radius:0 var(--ri-raio-g) var(--ri-raio-g) 0}
  .topbar{margin:0;border-radius:0 0 18px 18px;border-top:0;background:rgba(255,255,255,.97)}
  .topbar h1{font-size:17px}
  .modal{border-radius:20px 20px 0 0!important}
  .overlay-center .modal{border-radius:18px!important}
  #tbl-wrap .leads-table th:nth-child(2){background:var(--ri-nevoa)}
  .auth-card{padding:32px 22px 26px}
}
@media (max-width:430px){
  .topbar h1{font-size:16px}
}