/* ============================================================
   BLACKOS THEMES v4 — 02/08/2026
   Pedido do Abel: layout com RESPIRO, clean, e o USUÁRIO escolhe a
   paleta dentro da ferramenta. 8 temas (Limão + 7 paletas que ele
   mandou do Pinterest), todos claros, contraste calculado:
   - o acento de AÇÃO de cada tema tem texto com ≥4,5:1 garantido
   - texto colorido sobre fundo claro usa a versão ESCURA do acento
   Referências de linguagem: Quixotic/Vizora/Finnova (cantos grandes,
   sombras suaves, muito branco, números fortes, densidade baixa).
   Carregada DEPOIS do styles.css — vence por ordem.
   ============================================================ */

/* ---------- TEMA PADRÃO: LIMÃO SEVEN ---------- */
:root{
  --acc:#B4F04A;            /* acento de ação */
  --acc-2:#D3FB86;          /* claro do degradê */
  --acc-d:#8FCB2E;          /* escuro do degradê */
  --acc-text:#0B1005;       /* texto SOBRE o acento (14:1) */
  --acc-ink:#35651A;        /* acento como TEXTO sobre claro (6,9:1) */
  --ink:#0A0D07;            /* chassi sidebar */
  --ink-2:#131A11;
  --ink-text:rgba(244,248,238,.92);
  --bg-a:#F6F7F3;           /* gradiente do fundo */
  --bg-b:#EDEFE9;
  --halo:180,240,74;        /* rgb do halo de atmosfera */
  --surface:#FFFFFF;
  --surface2:#F3F5F0;
  --border:rgba(20,26,14,.08);
  --border2:rgba(20,26,14,.14);
  --text:#171C12;
  --text2:#5A6352;
  --text3:#98A18E;
  --card:#FFFFFF; --bg2:#F3F5F0;  /* fallbacks dos módulos */
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(15,20,8,.04),0 10px 30px -12px rgba(15,20,8,.10);
  --shadow-md:0 2px 6px rgba(15,20,8,.05),0 18px 44px -14px rgba(15,20,8,.16);
  --accent:var(--acc); --accent-dark:var(--acc-d); --accent-text:var(--acc-text);
  --accent-glow:rgba(var(--halo),.35);
}

/* ---------- ROXO REAL ---------- */
:root[data-tema="roxo"]{
  --acc:#6E3482; --acc-2:#A56ABD; --acc-d:#49225B; --acc-text:#FFFFFF; --acc-ink:#5A2A6E;
  --ink:#2E1240; --ink-2:#49225B; --ink-text:rgba(248,240,252,.92);
  --bg-a:#F8F1FB; --bg-b:#EFE2F6; --halo:165,106,189;
  --surface:#FFFFFF; --surface2:#F5EBFA;
  --border:rgba(73,34,91,.10); --border2:rgba(73,34,91,.18);
  --text:#2A1233; --text2:#6B5578; --text3:#A691B2;
  --card:#FFFFFF; --bg2:#F5EBFA;
}
/* ---------- VINHO ROSÉ ---------- */
:root[data-tema="vinho"]{
  --acc:#854F6C; --acc-2:#DFB6B2; --acc-d:#522B5B; --acc-text:#FFFFFF; --acc-ink:#6E3F5A;
  --ink:#190019; --ink-2:#2B124C; --ink-text:rgba(251,236,228,.92);
  --bg-a:#FBEFE7; --bg-b:#F4DFD5; --halo:223,182,178;
  --surface:#FFFFFF; --surface2:#FBE4D8;
  --border:rgba(43,18,76,.10); --border2:rgba(43,18,76,.18);
  --text:#2B124C; --text2:#6F5A72; --text3:#A9929F;
  --card:#FFFFFF; --bg2:#FBE4D8;
}
/* ---------- MEIA-NOITE ROSA ---------- */
:root[data-tema="noite-rosa"]{
  --acc:#0E1B48; --acc-2:#87A7D0; --acc-d:#0E1F2F; --acc-text:#FFFFFF; --acc-ink:#27425D;
  --ink:#0E1F2F; --ink-2:#27425D; --ink-text:rgba(240,244,250,.92);
  --bg-a:#F6EDF3; --bg-b:#EADCE5; --halo:193,141,180;
  --surface:#FFFFFF; --surface2:#F2E6EE;
  --border:rgba(14,31,47,.10); --border2:rgba(14,31,47,.18);
  --text:#14213D; --text2:#5D6579; --text3:#9BA2B3;
  --card:#FFFFFF; --bg2:#F2E6EE;
}
/* ---------- OCEANO ---------- */
:root[data-tema="oceano"]{
  --acc:#0077B6; --acc-2:#00B4D8; --acc-d:#03045E; --acc-text:#FFFFFF; --acc-ink:#02629A;
  --ink:#03045E; --ink-2:#023E8A; --ink-text:rgba(235,248,253,.92);
  --bg-a:#EFF9FC; --bg-b:#DCF1F8; --halo:0,180,216;
  --surface:#FFFFFF; --surface2:#E8F6FA;
  --border:rgba(3,4,94,.09); --border2:rgba(3,4,94,.16);
  --text:#082A4A; --text2:#4E6377; --text3:#8FA3B4;
  --card:#FFFFFF; --bg2:#E8F6FA;
}
/* ---------- SÁLVIA ---------- */
:root[data-tema="salvia"]{
  --acc:#375534; --acc-2:#6B9071; --acc-d:#0F2A1D; --acc-text:#FFFFFF; --acc-ink:#2E4A2B;
  --ink:#0F2A1D; --ink-2:#375534; --ink-text:rgba(240,248,236,.92);
  --bg-a:#F2F6EB; --bg-b:#E3EED4; --halo:107,144,113;
  --surface:#FFFFFF; --surface2:#EDF4E2;
  --border:rgba(15,42,29,.10); --border2:rgba(15,42,29,.17);
  --text:#14291B; --text2:#586a55; --text3:#96A491;
  --card:#FFFFFF; --bg2:#EDF4E2;
}
/* ---------- JEANS ---------- */
:root[data-tema="jeans"]{
  --acc:#3F6593; --acc-2:#80AAD3; --acc-d:#1B3554; --acc-text:#FFFFFF; --acc-ink:#2F4D73;
  --ink:#000F22; --ink-2:#1B3554; --ink-text:rgba(236,244,252,.92);
  --bg-a:#F0F7FD; --bg-b:#DDEDFA; --halo:128,170,211;
  --surface:#FFFFFF; --surface2:#EAF3FB;
  --border:rgba(0,15,34,.09); --border2:rgba(0,15,34,.16);
  --text:#0B1E33; --text2:#51647A; --text3:#93A4B6;
  --card:#FFFFFF; --bg2:#EAF3FB;
}
/* ---------- VERDE-ÁGUA ---------- */
:root[data-tema="verde-agua"]{
  --acc:#0C6478; --acc-2:#09D1C7; --acc-d:#213A58; --acc-text:#FFFFFF; --acc-ink:#0C6478;
  --ink:#213A58; --ink-2:#15919B; --ink-text:rgba(235,250,247,.92);
  --bg-a:#EDFBF6; --bg-b:#D9F4EC; --halo:70,223,177;
  --surface:#FFFFFF; --surface2:#E7F8F2;
  --border:rgba(33,58,88,.09); --border2:rgba(33,58,88,.16);
  --text:#12303C; --text2:#4E6A70; --text3:#8FA9AC;
  --card:#FFFFFF; --bg2:#E7F8F2;
}

/* ============================================================
   A PELE — mesma pra todos os temas, só bebe das variáveis
   ============================================================ */

/* Fundo com halo discreto do tema */
body{
  background:
    radial-gradient(1000px 480px at 85% -8%, rgba(var(--halo),.14), transparent 60%),
    radial-gradient(800px 520px at -10% 110%, rgba(var(--halo),.08), transparent 60%),
    linear-gradient(180deg,var(--bg-a),var(--bg-b));
  color:var(--text);
}

/* RESPIRO: densidade baixa em todo o ambiente de trabalho */
.p-content{padding:26px 34px 60px}
.card{padding:24px 26px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.card:hover{box-shadow:var(--shadow-md)}
.card-title{font-size:14px;margin-bottom:16px}
.topbar{padding:18px 34px;background:color-mix(in srgb, var(--bg-a) 72%, transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--border)}
.page-title{color:var(--text)}
.page-subtitle{color:var(--text3)}

/* Sidebar bebe do tom escuro da paleta */
.sidebar{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);border-right:1px solid var(--border)}
.nav-item{color:var(--ink-text);opacity:.72;border-radius:12px;padding:10px 13px}
.nav-item:hover{opacity:1;background:rgba(255,255,255,.07)}
.nav-item.active{opacity:1;background:linear-gradient(135deg,var(--acc),var(--acc-d) 140%);color:var(--acc-text);box-shadow:0 6px 18px -6px rgba(var(--halo),.55),inset 0 1px 0 rgba(255,255,255,.25)}
.nav-section{color:var(--ink-text);opacity:.42}
.logo-icon{background:linear-gradient(150deg,var(--acc-2),var(--acc) 55%,var(--acc-d));color:var(--acc-text);box-shadow:0 0 20px rgba(var(--halo),.4)}
.logo-text::after{color:var(--acc)}
.sidebar::after{background:linear-gradient(180deg,transparent 0%,var(--acc) 45%,var(--acc-d) 55%,transparent 100%)}
.user-avatar{background:var(--acc);color:var(--acc-text)}
.user-name{color:var(--ink-text)}

/* Botões: pílula, nunca genérico — primário sempre no acento do tema */
.btn{border-radius:999px;border:1.5px solid var(--border2);background:var(--surface);color:var(--text);font-weight:600;padding:9px 18px}
.btn:hover{border-color:var(--acc-d);box-shadow:0 6px 16px -8px rgba(var(--halo),.6);transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(180deg,var(--acc),var(--acc-d) 160%) !important;
  color:var(--acc-text) !important;border:1px solid var(--acc-2) !important;
  font-weight:750 !important;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px -10px rgba(var(--halo),.8) !important;
}
.btn-primary::after{content:'';position:absolute;top:0;left:-75%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .5s ease;pointer-events:none}
.btn-primary:hover::after{left:125%}
.btn-primary:hover{transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:var(--ink-text);border-color:var(--ink)}

/* KPIs estilo Vizora: número forte, label discreto, tudo do tema */
.kpi{border-left:none;position:relative}
.kpi::before{content:'';position:absolute;top:18px;right:18px;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px rgba(var(--halo),.6)}
.kpi-num,.kpi-v,.kpi-v2-num,.progress-num,.perf-num{font-family:var(--font-mono);font-weight:700;color:var(--text);-webkit-text-fill-color:currentColor;background:none}
.kpi-label,.kpi-v2-sub,.progress-key{color:var(--text2);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:10px}

/* Chips/pílulas seguem o tema */
.badge,.temp-tag,.score-tag,.obj-tag,.ticket-tag,.fu-pill,.step-pill,.filter-pill{border-radius:999px}
.badge-accent,.badge-m{background:color-mix(in srgb,var(--acc) 16%,#fff);color:var(--acc-ink)}
.filter-pill{background:var(--surface);border:1.5px solid var(--border2);color:var(--text2)}
.filter-pill:hover{border-color:var(--acc-d);color:var(--text)}
.filter-pill.active{background:linear-gradient(180deg,var(--acc),var(--acc-d) 170%) !important;border-color:var(--acc-2) !important;color:var(--acc-text) !important;box-shadow:0 4px 14px -7px rgba(var(--halo),.8)}
.kanban-count{background:color-mix(in srgb,var(--acc) 18%,#fff);color:var(--acc-ink);border-radius:999px;font-family:var(--font-mono)}

/* Formulários com foco no acento */
.form-input:focus,.form-select:focus,.search-input:focus{border-color:var(--acc-d) !important;box-shadow:0 0 0 3px rgba(var(--halo),.25) !important}

/* Progress/funil */
.progress-val,.funil-bar{background:linear-gradient(90deg,var(--acc-d),var(--acc)) !important}
.funil-pct{color:var(--acc-ink);font-family:var(--font-mono)}

/* Modais/drawers: claros, cantos grandes, sombra funda e suave */
.modal,.drawer{background:var(--surface);border-radius:20px;border:1px solid var(--border);box-shadow:0 30px 90px -20px rgba(15,20,8,.35);color:var(--text)}
.modal-overlay,.drawer-overlay{background:rgba(10,14,6,.32);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}

/* Tabelas com respiro */
th{color:var(--text3) !important;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:10px !important}
td,th{padding:12px 14px !important}
tbody tr:hover{background:color-mix(in srgb,var(--acc) 5%,transparent)}

/* Login acompanha o tema */
.login-overlay{background:radial-gradient(900px 480px at 75% 10%, rgba(var(--halo),.18), transparent 58%),linear-gradient(180deg,var(--bg-a),var(--bg-b))}
.login-box{background:var(--surface);border:1px solid var(--border);box-shadow:0 34px 90px -24px rgba(15,20,8,.4)}

/* Scrollbar do tema */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--halo),.35);border-radius:99px;border:2px solid transparent;background-clip:content-box}

/* Estados herdados fracos (auditados) */
.check-na{color:#4b5563 !important}
.temp-morto{color:#4b5563 !important}

/* ---------- Seletor de aparência (injetado pelo themes.js) ---------- */
.tema-fab{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 10px;border-radius:12px;color:var(--ink-text);opacity:.75;font-size:12.5px;font-weight:600}
.tema-fab:hover{opacity:1;background:rgba(255,255,255,.07)}
.tema-dot{width:16px;height:16px;border-radius:50%;background:conic-gradient(var(--acc),var(--acc-2),var(--acc-d),var(--acc));box-shadow:0 0 8px rgba(var(--halo),.6);flex-shrink:0}
.tema-pop{position:fixed;left:16px;bottom:74px;z-index:300;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 70px -18px rgba(15,20,8,.4);padding:16px;width:248px;display:none}
.tema-pop.open{display:block}
.tema-pop-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:12px;font-family:var(--font-mono)}
.tema-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;cursor:pointer;border:1.5px solid transparent}
.tema-opt:hover{background:var(--surface2)}
.tema-opt.on{border-color:var(--acc-d);background:color-mix(in srgb,var(--acc) 8%,#fff)}
.tema-opt-nome{font-size:13px;font-weight:600;color:var(--text)}
.tema-sw{display:flex;gap:3px;flex-shrink:0}
.tema-sw i{width:13px;height:13px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.08)}

/* Chips de ícone (aba Diagnósticos e afins) */
.ico-chip{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acc) 20%,#fff);border:1px solid var(--border2)}
.ico-chip svg{stroke:var(--acc-ink);width:17px;height:17px}

/* ============================================================
   RESPIRO v2 (02/08) — Abel: "melhora os respiros e o descanso
   visual, aumenta um pouquinho a escala da fonte".
   A escala subiu 1 grau nos arquivos; aqui vem o espaço em volta
   dela: linha mais alta, blocos mais separados, ar nas laterais.
   ============================================================ */
body{font-size:15px;line-height:1.62}

/* Respiro do quadro geral */
.p-content{padding:30px 40px 72px}
.topbar{padding:22px 40px}
.page-title{font-size:25px;letter-spacing:-.015em}
.page-subtitle{margin-top:3px}

/* Cards: mais ar dentro e entre eles */
.card{padding:28px 30px;margin-bottom:0}
.card-title{margin-bottom:18px;line-height:1.35}
.card + .card{margin-top:18px}

/* Linhas de lista: altura confortável (era apertado demais) */
.lead-row,.hoje-row{padding:15px 18px;gap:14px}
.timeline-item{padding-bottom:20px}
td,th{padding:15px 16px !important}

/* Navegação com mais folga */
.nav{padding:10px 14px}
.nav-item{padding:11px 14px;margin-bottom:3px}
.nav-section{padding:18px 10px 8px;letter-spacing:.15em}
.logo{padding:24px 22px 18px}

/* KPIs: número respira do label */
.kpi-num,.kpi-v,.kpi-v2-num{line-height:1.15;margin-top:6px;letter-spacing:-.02em}
.kpi-label{line-height:1.5}

/* Formulários mais confortáveis de usar */
.form-group{margin-bottom:18px}
.form-input,.form-select,.search-input{padding:12px 15px}
.form-label{margin-bottom:7px;display:block}

/* Botões acompanham a escala nova */
.btn{padding:11px 20px}
.btn-sm{padding:8px 15px}

/* Modais e drawers com margem interna maior */
.modal-body{padding:28px}
.modal-header,.modal-footer{padding:22px 28px}
.drawer-body{padding:26px}

/* Descanso visual: seções separadas por ar, não por linha */
.hoje-bloco{margin-bottom:20px}
.hoje-bloco-header{padding:16px 20px}
.kanban-col{padding:16px}
.kanban-card{padding:15px 16px;margin-bottom:10px}

/* Chips com toque a mais de altura */
.badge,.temp-tag,.score-tag,.filter-pill{padding:4px 12px;line-height:1.5}

@media (max-width:900px){
  .p-content{padding:20px 18px 90px}
  .topbar{padding:16px 18px}
  .card{padding:20px 18px}
  .page-title{font-size:21px}
}

/* Escala maior fez números largos quebrarem em 2 linhas: o número
   se adapta à largura do card em vez de partir. */
.kpi-num,.kpi-v,.kpi-v2-num{
  font-size:clamp(21px, 2.4vw, 30px) !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi-label,.kpi-v2-sub{line-height:1.4;min-height:2.8em;display:flex;align-items:flex-start}
.kpi{display:flex;flex-direction:column;justify-content:space-between}

/* ---- Mobile: a escala maior exige menos colunas ---- */
@media (max-width:820px){
  /* grids de 3+ colunas viram 2 — número inteiro cabe, nada de "R$ 1..." */
  .p-content [style*="repeat(3,1fr)"],.p-content [style*="repeat(3, 1fr)"],
  .p-content [style*="repeat(4,1fr)"],.p-content [style*="repeat(4, 1fr)"],
  .p-content [style*="repeat(6,1fr)"],.p-content [style*="repeat(6, 1fr)"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .kpi-num,.kpi-v,.kpi-v2-num{font-size:clamp(19px,6vw,26px) !important}
  .kpi-label,.kpi-v2-sub{min-height:0}
  /* topbar: título inteiro numa linha própria, botões embaixo */
  .topbar{flex-wrap:wrap;gap:12px}
  .topbar > div:first-child{flex:1 1 100%}
  .topbar-right{flex:1 1 100%;justify-content:flex-start}
  .page-title{white-space:normal}
}

/* ---- Menu que rola até o fim (02/08) ----
   O .nav tinha flex:1 sem overflow, e o .sidebar overflow:hidden — em tela
   baixa os últimos itens ficavam inalcançáveis. min-height:0 é o que permite
   um filho flex encolher e ganhar sua própria barra de rolagem. */
.sidebar{overflow:hidden}
.nav{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding-bottom:26px;              /* suspiro no fim da lista */
  scrollbar-width:thin;scrollbar-color:rgba(var(--halo),.35) transparent;
  overscroll-behavior:contain;       /* não arrasta a página junto */
}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:rgba(var(--halo),.28);border-radius:99px}
.nav::-webkit-scrollbar-thumb:hover{background:rgba(var(--halo),.5)}
/* rodapé (Aparência + usuário) sempre visível, nunca espremido */
.sidebar-footer{flex:0 0 auto;padding:14px 20px 16px}
/* dica visual de que há mais conteúdo abaixo */
.nav{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);
     mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}