/* ===========================================================
   REDESIGN (preview) — glassmorphism sobre os tokens.
   Estilo das refs: quase-preto com brilhos sutis, PAINÉIS DE VIDRO
   (blur + translucidez), muito espaço negativo e tipografia forte.
   Mantém identidade Azeha (laranja #F27711 + Inter/Spline Sans).
   Carregado por ÚLTIMO.
   =========================================================== */

/* ---- Canvas: preto neutro com um brilho quente (laranja) bem sutil.
   SEM tons azul/roxo — fundo neutro, como pedido. ---- */
[data-tema="escuro"] body {
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(242, 119, 17, .06), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* ---- Tipografia: PADRÃO do sistema (Spline Sans / Inter, pesos normais) ---- */
.pagina__sub { font-size: 14px; margin-top: 5px; }

/* ---- Espaço negativo: MUITO ar (respiro) ---- */
.conteudo { padding: 44px 52px 64px; }
.pagina { max-width: 1240px; }
/* Páginas com tabelas largas (ex.: Notas Fiscais, com muitos impostos por item)
   usam mais da largura disponível pra reduzir a rolagem horizontal. */
.pagina--largo { max-width: 1720px; }
.pagina__cab { margin-bottom: 40px; }
.grade-recorr, .grade-equipe { gap: 22px; }
.pagina__secao { margin-top: 60px; padding-top: 40px; border-top-color: rgba(255, 255, 255, .05); }

/* ---- PAINÉIS DE VIDRO (o coração do pedido) ---- */
.recorr-card, .eq-card,
.cert-row, .conh-row, .cofre-item, .cli-pasta, .cal-grade, .semana-col,
.recorr-card__corpo, .cofre-form, .modal, .sino-painel, .mencao-drop {
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .08);
}
/* brilho superior sutil no topo dos cards (borda de vidro) */
.recorr-card, .eq-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--sombra-card);
}

/* hover: borda de vidro mais clara, leve elevação */
.recorr-card:hover, .eq-card:hover,
.cert-row:hover, .conh-row:hover {
  border-color: rgba(255, 255, 255, .16);
  transform: translateY(-2px);
}
.recorr-card, .eq-card, .cert-row, .conh-row {
  transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

/* Cartão do kanban — vidro sobre a coluna */
.coluna {
  background: rgba(255, 255, 255, .022);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, .06);
}
.card {
  background: rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, .08);
}
.card:hover { border-color: rgba(255, 255, 255, .18); box-shadow: var(--sombra-md); }

/* ---- Sidebar: chrome de vidro fosco, FLUTUANTE (solta do canto) ---- */
.sidebar {
  background: rgba(16, 16, 18, .5);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .08);
}
@media (min-width: 981px) {
  .sidebar {
    margin: 16px;
    top: 16px;
    height: calc(100vh - 32px);
    border-radius: 22px;
    overflow: hidden;
  }
}
.nav-item { border-radius: var(--r-sm); font-size: 13.5px; }
.nav-item.ativo { background: rgba(242, 119, 17, .14); color: var(--accent-texto); }

/* ---- Topbar: vidro quase-preto ---- */
.topbar,
[data-tema="escuro"] .topbar {          /* vence o tema.css (especificidade) */
  background: transparent;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: none;                 /* topo limpo, sem faixa/sombra */
  height: 72px; padding: 0 52px;
}
.topbar__titulo { font-size: 16px; letter-spacing: -.01em; }
.busca {
  background: rgba(255, 255, 255, .05); border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .07);
}
.busca:focus-within { background: rgba(255, 255, 255, .08); }

/* ---- Botões ---- */
.btn { border-radius: var(--r-sm); }
.btn--primario { box-shadow: none; }
.btn--primario:hover { box-shadow: 0 8px 22px rgba(242, 119, 17, .30); }
.btn--secundario {
  background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn--secundario:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); }

/* ---- Modal: vidro forte sobre overlay borrado ---- */
.overlay { background: rgba(6, 6, 8, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal { background: rgba(22, 22, 25, .82); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); }
.modal__lateral { background: rgba(255, 255, 255, .03); }

/* ---- Login: cartão de vidro ---- */
.login {
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(242, 119, 17, .12), transparent 60%),
    var(--marca-bg);
}
.login__cartao {
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px; padding: 42px 38px;
}
.login__user {
  border-radius: 14px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.login__user:hover { background: rgba(255, 255, 255, .08); border-color: var(--accent); }
.login__titulo { font-size: 22px; letter-spacing: -.02em; }

/* ---- Scrollbar discreta no escuro ---- */
[data-tema="escuro"] *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); background-clip: content-box; }
[data-tema="escuro"] *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .18); background-clip: content-box; }

@media (max-width: 620px) {
  .conteudo { padding: 20px 16px; }
  .topbar { padding: 0 16px; }
}

/* ===========================================================
   MODO CLARO — o vidro/glow é feito p/ o escuro; aqui adaptamos.
   A barra lateral passa a ser CLARA (não fica mais escura) e os
   cards ganham superfície clara visível.
   =========================================================== */
html:not([data-tema="escuro"]) {
  /* chrome da marca (sidebar) em tons claros */
  --marca-bg: #FFFFFF;
  --marca-bg-2: #EEF1F6;
  --marca-border: rgba(0, 0, 0, .08);
  --marca-ink: #1B2430;
  --marca-ink-2: #5A6472;
  --marca-ink-3: #97A0AE;
}
/* fundo claro sem o glow escuro */
html:not([data-tema="escuro"]) body {
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(242, 119, 17, .07), transparent 55%),
    var(--bg);
}
/* Sidebar de vidro CLARO */
html:not([data-tema="escuro"]) .sidebar {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(0, 0, 0, .08);
}
html:not([data-tema="escuro"]) .nav-item.ativo { background: var(--accent-suave); color: var(--accent-texto); }

/* Cards / painéis de vidro CLARO (visíveis sobre o canvas claro) */
html:not([data-tema="escuro"]) .recorr-card,
html:not([data-tema="escuro"]) .eq-card,
html:not([data-tema="escuro"]) .cert-row,
html:not([data-tema="escuro"]) .conh-row,
html:not([data-tema="escuro"]) .cofre-item,
html:not([data-tema="escuro"]) .cli-pasta,
html:not([data-tema="escuro"]) .cal-grade,
html:not([data-tema="escuro"]) .semana-col,
html:not([data-tema="escuro"]) .modal {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(0, 0, 0, .07);
  box-shadow: 0 1px 2px rgba(20, 28, 44, .05);
}
html:not([data-tema="escuro"]) .coluna { background: rgba(0, 0, 0, .025); border-color: rgba(0, 0, 0, .06); }
html:not([data-tema="escuro"]) .card { background: #fff; border-color: rgba(0, 0, 0, .08); }
html:not([data-tema="escuro"]) .busca,
html:not([data-tema="escuro"]) .btn--secundario { background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .1); }
/* scrollbar clara */
html:not([data-tema="escuro"]) *::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .16); background-clip: content-box; }