/* ============================================================= temas
   5 temas selecionáveis (persistidos em localStorage, ver dashboard.html):
   preto, branco, azul, verde, vermelho. "preto" é o padrão em :root; os
   outros sobrescrevem via [data-tema="..."] na tag <html>. Cada tema define
   fundo/superfícies/texto/acento -- os status (sucesso/perigo/alerta) ficam
   fixos entre temas de propósito, pra sempre significarem a mesma coisa. */

:root {
  --bg: #000000;
  --bg-realce: radial-gradient(1200px 600px at 15% -10%, rgba(10,132,255,.10), transparent 60%);
  --superficie: #121214;
  --superficie-2: #1c1c1f;
  --linha: #2a2a2e;
  --texto: #f5f5f7;
  --cinza: #98989d;
  --acento: #0a84ff;
  --acento-2: #5e5ce6;
  --acento-rgb: 10,132,255;
  --acento-contraste: #ffffff;
  --sombra: rgba(0,0,0,.45);

  --exito: #30d158;
  --exito-rgb: 48,209,88;
  --perigo: #ff6961;
  --perigo-rgb: 255,105,97;
  --alerta: #f0b429;
  --alerta-rgb: 240,180,41;
}

/* tema padrão do OS DataClean: azul-marinho + verde-água da marca */
html[data-tema="dataclean"] {
  --bg: #011a30;
  --bg-realce: radial-gradient(1200px 600px at 15% -10%, rgba(4,154,151,.18), transparent 60%);
  --superficie: #052640;
  --superficie-2: #0a3352;
  --linha: #134468;
  --texto: #eaf6f8;
  --cinza: #8fb3c4;
  --acento: #1fb8b0;
  --acento-2: #3fd6c8;
  --acento-rgb: 31,184,176;
  --acento-contraste: #01202e;
  --sombra: rgba(0,10,25,.5);
}

html[data-tema="branco"] {
  --bg: #eef0f4;
  --bg-realce: radial-gradient(1200px 600px at 15% -10%, rgba(37,99,235,.08), transparent 60%);
  --superficie: #ffffff;
  --superficie-2: #f4f5f8;
  --linha: #e1e3e9;
  --texto: #1a1c22;
  --cinza: #676b76;
  --acento: #2563eb;
  --acento-2: #7c3aed;
  --acento-rgb: 37,99,235;
  --acento-contraste: #ffffff;
  --sombra: rgba(30,35,50,.12);
}

html[data-tema="azul"] {
  --bg: #050e1c;
  --bg-realce: radial-gradient(1200px 600px at 15% -10%, rgba(58,160,255,.14), transparent 60%);
  --superficie: #0c1c33;
  --superficie-2: #12294a;
  --linha: #1e3a5f;
  --texto: #e8f1ff;
  --cinza: #8ca8ca;
  --acento: #3aa0ff;
  --acento-2: #7c5cff;
  --acento-rgb: 58,160,255;
  --acento-contraste: #051426;
  --sombra: rgba(0,10,30,.5);
}

html[data-tema="verde"] {
  --bg: #04120b;
  --bg-realce: radial-gradient(1200px 600px at 15% -10%, rgba(34,197,94,.14), transparent 60%);
  --superficie: #0b2016;
  --superficie-2: #113321;
  --linha: #1e4a30;
  --texto: #e9fff2;
  --cinza: #8fc4a8;
  --acento: #22c55e;
  --acento-2: #0ea5a5;
  --acento-rgb: 34,197,94;
  --acento-contraste: #04150c;
  --sombra: rgba(0,20,10,.5);
}

html[data-tema="vermelho"] {
  --bg: #180606;
  --bg-realce: radial-gradient(1200px 600px at 15% -10%, rgba(239,68,68,.16), transparent 60%);
  --superficie: #290d0d;
  --superficie-2: #3a1414;
  --linha: #522020;
  --texto: #ffedec;
  --cinza: #d59d9a;
  --acento: #ef4444;
  --acento-2: #f97316;
  --acento-rgb: 239,68,68;
  --acento-contraste: #1a0505;
  --sombra: rgba(20,0,0,.5);
}

/* ============================================================== base */

* { box-sizing: border-box; }
html { color-scheme: dark; }
html[data-tema="branco"] { color-scheme: light; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  background: var(--bg-realce), var(--bg);
  background-attachment: fixed;
  color: var(--texto);
  transition: background-color .2s, color .2s;
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .marca { display: flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 600; font-size: 17px; }
.topbar .marca-hex {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--acento), var(--acento-2));
  color: var(--acento-contraste);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  font-size: 11px; font-weight: 700; letter-spacing: -0.5px;
}
.topbar a.sair { color: var(--perigo); font-size: 14px; }

.conteudo { max-width: 1300px; margin: 0 auto; padding: 32px 24px 80px; }

.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card {
  position: relative;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px -12px var(--sombra);
  overflow: hidden;
}
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--acento), var(--acento-2));
  opacity: .8;
}
.stat-card .rotulo { font-size: 12px; color: var(--cinza); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.stat-card .valor { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.stat-card .sub { font-size: 12px; color: var(--cinza); margin-top: 4px; }

.barra-fundo { height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin-top: 10px; }
.barra-preenchida { height: 100%; border-radius: 999px; transition: width .3s; }
.cor-ok { background: linear-gradient(90deg, var(--exito), color-mix(in srgb, var(--exito) 70%, white)); }
.cor-alerta { background: linear-gradient(90deg, var(--alerta), color-mix(in srgb, var(--alerta) 70%, white)); }
.cor-critico { background: linear-gradient(90deg, var(--perigo), color-mix(in srgb, var(--perigo) 70%, white)); }

h1 { letter-spacing: -.02em; }
h2 { font-size: 18px; color: var(--texto); margin: 32px 0 14px; letter-spacing: -.01em; }

.grid-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.app-card {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px; padding: 20px;
  box-shadow: 0 8px 24px -12px var(--sombra);
  transition: transform .15s, box-shadow .15s;
}
.app-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -14px var(--sombra); }
.app-card .topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.app-card .nome { font-weight: 600; font-size: 16px; }
.app-card .porta { font-size: 12px; color: var(--cinza); margin-bottom: 14px; }

.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-active { background: rgba(var(--exito-rgb),.15); color: var(--exito); }
.badge-inactive, .badge-failed { background: rgba(var(--perigo-rgb),.15); color: var(--perigo); }

.acoes-app { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--linha);
  background: var(--superficie-2); color: var(--texto); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: var(--linha); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn-primario {
  background: linear-gradient(135deg, var(--acento), var(--acento-2));
  color: var(--acento-contraste); border-color: transparent;
  box-shadow: 0 6px 18px -8px rgba(var(--acento-rgb),.6);
}
.btn-primario:hover { filter: brightness(1.08); }
.btn-perigo { color: var(--perigo); }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-realce), var(--bg); }
.login-box {
  background: var(--superficie); border: 1px solid var(--linha); padding: 40px; border-radius: 20px; width: 340px;
  box-shadow: 0 24px 60px -20px var(--sombra);
}
.login-box h1 { text-align: center; font-size: 20px; margin-bottom: 4px; }
.login-box .sub { text-align: center; color: var(--cinza); font-size: 13px; margin-bottom: 24px; }
.login-box .campo { margin-bottom: 16px; }
.login-box label { display: block; font-size: 13px; margin-bottom: 6px; }
.login-box input {
  width: 100%; padding: 11px 12px; background: var(--superficie-2); border: 1px solid var(--linha);
  border-radius: 10px; color: var(--texto); font-size: 14px;
}
.login-box input:focus { outline: none; border-color: var(--acento); }
.login-box .btn { width: 100%; justify-content: center; margin-top: 8px; padding: 12px; }
.erro { background: rgba(var(--perigo-rgb),.12); color: var(--perigo); border: 1px solid rgba(var(--perigo-rgb),.35); padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; }

.logs-pre {
  background: color-mix(in srgb, var(--bg) 80%, black);
  border: 1px solid var(--linha); border-radius: 14px; padding: 16px;
  font-family: "Cascadia Code", "Consolas", monospace; font-size: 12px; line-height: 1.55; white-space: pre-wrap;
  word-break: break-all; max-height: 70vh; overflow-y: auto;
}

/* ------------------------------------------------------- shell "desktop" */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--superficie) 0%, var(--bg) 140%);
  border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; transition: width .18s ease;
  overflow-x: hidden; white-space: nowrap;
}
.shell.recolhido .sidebar { width: 68px; }

.sidebar-topo {
  display: flex; align-items: center; gap: 10px; padding: 20px 16px;
  border-bottom: 1px solid var(--linha); min-height: 30px;
}
.sidebar-topo .marca-texto { font-weight: 700; color: var(--texto); font-size: 15px; letter-spacing: -.01em; }
.shell.recolhido .sidebar-topo .marca-texto { display: none; }

.marca-logo { height: 26px; width: auto; flex-shrink: 0; }
/* Logo DataClean: versão branca nos temas escuros, colorida no tema claro (.logo-claro / .logo-escuro). */
.login-logo { display: block; height: 64px; width: auto; margin: 0 auto 18px; }
/* depois de .login-logo e mais específico, para o display:none vencer */
img.logo-claro, .login-logo.logo-claro { display: none; }
html[data-tema="branco"] img.logo-escuro, html[data-tema="branco"] .login-logo.logo-escuro { display: none; }
html[data-tema="branco"] img.logo-claro, html[data-tema="branco"] .login-logo.logo-claro { display: block; }

.marca-dagua {
  position: absolute;
  top: 50%;
  right: -4%;
  width: 40vw;
  max-width: 560px;
  aspect-ratio: 1059 / 739;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
  opacity: .035;
  pointer-events: none;
  z-index: 0;
}
html[data-tema="branco"] .marca-dagua { filter: invert(1); opacity: .05; }
.main > .topbar-os, .main > .conteudo-view { position: relative; z-index: 1; }
.main { position: relative; }

.btn-recolher {
  background: none; border: none; color: var(--cinza); cursor: pointer; font-size: 18px;
  padding: 4px 8px; border-radius: 8px; line-height: 1;
}
.btn-recolher:hover { background: var(--superficie-2); color: var(--texto); }

.nav-secao {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza);
  padding: 20px 16px 8px; font-weight: 600;
}
.shell.recolhido .nav-secao { opacity: 0; height: 0; padding: 8px 0 0; overflow: hidden; }

.nav-item {
  display: flex; align-items: center; gap: 12px; margin: 2px 10px; padding: 10px 12px; color: var(--texto);
  font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 10px;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--superficie-2); text-decoration: none; }
.nav-item.ativo {
  background: linear-gradient(90deg, rgba(var(--acento-rgb),.22), rgba(var(--acento-rgb),.06));
  color: var(--texto); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento);
}
.nav-item .icone { width: 20px; text-align: center; flex-shrink: 0; }
.nav-item .rotulo-status { margin-left: auto; width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.rotulo-status.badge-active { background: var(--exito); box-shadow: 0 0 8px rgba(var(--exito-rgb),.7); }
.rotulo-status.badge-inactive, .rotulo-status.badge-failed { background: var(--perigo); }
.shell.recolhido .nav-item .texto-item { display: none; }
.shell.recolhido .nav-item .rotulo-status { display: none; }
.shell.recolhido .nav-item { justify-content: center; margin: 2px 8px; }

.seletor-tema { padding: 14px 16px; border-top: 1px solid var(--linha); }
.seletor-tema .rotulo-tema { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza); margin-bottom: 10px; font-weight: 600; }
.shell.recolhido .seletor-tema .rotulo-tema { display: none; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .12s, border-color .12s;
  flex-shrink: 0;
}
.swatch:hover { transform: scale(1.12); }
.swatch.ativo { border-color: var(--texto); }
.swatch-dataclean { background: linear-gradient(135deg, #022b4c, #049a97); }
.swatch-preto { background: #101012; }
.swatch-branco { background: #ffffff; }
.swatch-azul { background: linear-gradient(135deg, #3aa0ff, #7c5cff); }
.swatch-verde { background: linear-gradient(135deg, #22c55e, #0ea5a5); }
.swatch-vermelho { background: linear-gradient(135deg, #ef4444, #f97316); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar-os {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid var(--linha);
  background: color-mix(in srgb, var(--superficie) 60%, transparent);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 5;
}
.relogio-box { text-align: right; }
.relogio-hora { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.relogio-data { font-size: 12px; color: var(--cinza); }

.conteudo-view { padding: 28px; }
.conteudo-view[hidden] { display: none; }

.tabela-mon { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px -12px var(--sombra); }
.tabela-mon th, .tabela-mon td { padding: 13px 16px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--linha); }
.tabela-mon th { color: var(--cinza); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; background: var(--superficie-2); }
.tabela-mon tr:last-child td { border-bottom: none; }
.tabela-mon tr:hover td { background: rgba(var(--acento-rgb),.05); }
.tabela-mon .barra-fundo { width: 100px; display: inline-block; vertical-align: middle; margin-left: 8px; }

.app-detalhe-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.app-detalhe-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }

@media (max-width: 720px) {
  .sidebar { position: fixed; z-index: 10; height: 100vh; width: 220px; }
  .shell:not(.recolhido) .sidebar { box-shadow: 0 0 0 9999px rgba(0,0,0,.5); }
  .shell.recolhido .sidebar { width: 0; border: none; }
}

/* ---------- DataClean: acessos do site ---------- */
.dc-filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 16px; }
.dc-filtro label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--cinza); }
.dc-filtro input[type=date] { background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; font: inherit; color-scheme: dark light; }
.dc-atalhos { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-stats { grid-template-columns: repeat(4, 1fr); }
.dc-grafico-card { margin: 16px 0; }
.dc-legenda { float: right; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--cinza); }
.dc-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 12px; vertical-align: -1px; }
.dc-l-acessos { background: var(--acento); }
.dc-l-leads { background: var(--exito); border-radius: 50% !important; }
.dc-grafico { display: flex; align-items: stretch; gap: 3px; height: 190px; margin-top: 14px; overflow-x: auto; }
.dc-col { flex: 1 0 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 14px; }
.dc-barra { width: 100%; max-width: 34px; min-height: 2px; background: linear-gradient(180deg, var(--acento), rgba(var(--acento-rgb), .45)); border-radius: 5px 5px 2px 2px; position: relative; }
.dc-ponto { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); min-width: 18px; height: 18px; border-radius: 9px; background: var(--exito); color: #04120b; font-size: 10px; font-style: normal; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.dc-num { font-size: 10px; color: var(--cinza); min-height: 14px; }
.dc-dia { font-size: 10px; color: var(--cinza); margin-top: 6px; white-space: nowrap; min-height: 13px; }
.dc-duas { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.dc-tabela { width: 100%; margin-top: 8px; }
.dc-leads-lista { margin-top: 8px; max-height: 420px; overflow-y: auto; }
.dc-lead { border-bottom: 1px solid var(--linha); padding: 10px 0; }
.dc-lead summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.dc-lead summary .sub { margin-left: auto; font-size: 12px; }
.dc-lead div, .dc-lead p { font-size: 13px; margin: 8px 0 0 16px; white-space: pre-wrap; }
.dc-lead a { color: var(--acento); }
@media (max-width: 900px) { .dc-stats { grid-template-columns: 1fr 1fr; } .dc-duas { grid-template-columns: 1fr; } }
/* ---------- navegador de arquivos ---------- */
.arq-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.arq-trilha { font-size: 14px; margin: 6px 0 4px; word-break: break-word; }
.arq-resumo { font-size: 12px; margin-bottom: 10px; }
.arq-tabela td { vertical-align: top; }
.arq-tabela a { color: var(--texto); }
.arq-tabela a:hover { color: var(--acento); text-decoration: none; }
.arq-tabela .btn { padding: 6px 12px; font-size: 12px; }
#arq-corpo { transition: opacity .2s; }
#arq-corpo.arq-carregando { opacity: .45; }

/* ---------- animações (respeitam "reduzir movimento" do sistema) ---------- */
@keyframes os-entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes os-surgir { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes os-linha { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.conteudo-view:not([hidden]) { animation: os-entrar .35s cubic-bezier(.2, .8, .2, 1) both; }
.conteudo-view:not([hidden]) .stat-card,
.conteudo-view:not([hidden]) .app-card { animation: os-surgir .45s cubic-bezier(.2, .8, .2, 1) both; }
.conteudo-view:not([hidden]) .stat-card:nth-child(2), .conteudo-view:not([hidden]) .app-card:nth-child(2) { animation-delay: .05s; }
.conteudo-view:not([hidden]) .stat-card:nth-child(3), .conteudo-view:not([hidden]) .app-card:nth-child(3) { animation-delay: .1s; }
.conteudo-view:not([hidden]) .stat-card:nth-child(4), .conteudo-view:not([hidden]) .app-card:nth-child(4) { animation-delay: .15s; }
.conteudo-view:not([hidden]) .app-card:nth-child(n+5) { animation-delay: .2s; }
.arq-linha, .tabela-mon tbody tr { animation: os-linha .3s ease both; }
.app-card, .stat-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.app-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px var(--sombra); }
.btn { transition: transform .12s ease, background-color .2s, box-shadow .2s, color .2s; }
.btn:active { transform: scale(.97); }
.nav-item { transition: background-color .2s, color .2s, transform .15s; }
.nav-item:hover { transform: translateX(2px); }
.barra-preenchida { transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.login-box { animation: os-surgir .5s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.arq-abas .btn.arq-ativa { background: var(--acento); border-color: var(--acento); color: var(--acento-contraste); }