/* ═══════════════════════════════════════════════════════════════════════════
   or-dark.css — Dark mode do SITE público (MÓDULO PORTÁVEL OneRank).
   Carregado APÓS o custom.css → vence a cascata. Tudo escopado a
   [data-bs-theme="dark"] / html.dark → o tema CLARO fica byte-idêntico.

   3 CAMADAS (da mais portável para a mais específica):
     1) Padrão Bootstrap 5.3 `[data-bs-theme=dark]` — inverte card/form/modal/accordion
        (já vem no template; nada a escrever aqui além de acionar o atributo).
     2) CORE PORTÁVEL — contrato de tokens semânticos + overrides que valem em QUALQUER
        template Bootstrap-5 (utilitárias fixas + componentes .or-* + acento da marca).
     3) ADAPTER do template atual (Canvas 7) — bloco ISOLADO; trocar de template = reescrever só ele.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Contrato de tokens semânticos de superfície (claro) ── */
:root {
    --or-surface:    #ffffff;
    --or-surface-2:  #f6f8fb;
    --or-text:       #212529;
    --or-text-muted: #6c757d;
    --or-border:     rgba(0, 0, 0, .08);
    --or-elev:       0 2px 12px rgba(0, 0, 0, .06);
    --or-brand-accent: var(--marca-primaria, #0B3D91);
    /* Estrela de avaliacao (site/includes/entity-reviews.php). Token proprio porque amarelo NAO
       flipa junto com superficie/texto: no claro ele precisa escurecer para ter contraste sobre
       branco, no escuro precisa clarear. Nao usar --marca-destaque aqui: o dourado da marca tem
       lista FECHADA de 6 usos (custom.css BLOCO 0.5) e estrela de review nao esta nela. */
    --or-estrela:    #b8860b;
}

/* ── O "flip" no ESCURO (fonte única do dark) ── */
[data-bs-theme="dark"] {
    --or-surface:    #15171c;
    --or-surface-2:  #1c1f26;
    --or-text:       #e6e8ec;
    --or-text-muted: #9aa0ab;
    --or-border:     rgba(255, 255, 255, .10);
    --or-elev:       0 2px 16px rgba(0, 0, 0, .5);
    --or-brand-accent: color-mix(in srgb, var(--marca-primaria, #0B3D91), white 35%);
    --or-estrela:    #ffc107;
}

/* Remapeia os tokens do CLIENTE (Colors::toCssVars, inline em :root DEPOIS deste arquivo).
   Usa html[data-bs-theme=dark] (0,1,1) para VENCER o :root (0,1,0) do <style> inline. */
html[data-bs-theme="dark"] {
    --texto-principal:  var(--or-text);
    --texto-secundario: var(--or-text-muted);
    --texto-link:       var(--or-brand-accent);
    --fundo-site:       var(--or-surface);
    --fundo-card:       var(--or-surface);
    --fundo-secao-alt:  var(--or-surface-2);
}

/* ═══ CAMADA 2 — CORE PORTÁVEL (qualquer template Bootstrap-5) ═══ */

/* Genéricos (baixa especificidade via :where — fácil de sobrepor por seletor específico) */
[data-bs-theme="dark"] :where(body) { background-color: var(--or-surface); color: var(--or-text); }
[data-bs-theme="dark"] :where(h1, h2, h3, h4, h5, h6) { color: var(--or-text); }

/* Utilitárias Bootstrap de RGB fixo (NÃO adaptam nem com data-bs-theme) */
[data-bs-theme="dark"] .bg-white { background-color: var(--or-surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--or-surface-2) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--or-text) !important; }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom { border-color: var(--or-border) !important; }

/* Componentes .or-* dos partials versionados (custom.css hardcoda #ffffff neles) */
[data-bs-theme="dark"] .or-service-card,
[data-bs-theme="dark"] .or-testimonial,
[data-bs-theme="dark"] .or-indicador-card,
[data-bs-theme="dark"] .or-timeline-content,
[data-bs-theme="dark"] .or-blog-card,
[data-bs-theme="dark"] .or-download-card,
[data-bs-theme="dark"] .or-etapa-card {
    background-color: var(--or-surface) !important;
    border-color: var(--or-border) !important;
    box-shadow: var(--or-elev);
    color: var(--or-text);
}
[data-bs-theme="dark"] .or-parceiro-logo {
    background-color: var(--or-surface-2) !important;
    border-color: var(--or-border) !important;
}
[data-bs-theme="dark"] .or-social-link,
[data-bs-theme="dark"] .or-team-card .team-socials a {
    background-color: var(--or-surface-2) !important;
    color: var(--or-text) !important;
    border-color: var(--or-border) !important;
}
/* Linha da timeline / divisórias claras */
[data-bs-theme="dark"] .or-timeline::before { background: var(--or-border) !important; }

/* Reviews (entity-reviews.php usa a classe .or-review-item — ver partial) */
[data-bs-theme="dark"] .or-review-item {
    background: rgba(255, 255, 255, .05) !important;
    border-color: var(--or-border) !important;
}

/* Acento da marca clareado no escuro (ícones/valores/FAQ ativo — seletores reais do custom.css) */
[data-bs-theme="dark"] .or-service-card .or-icon,
[data-bs-theme="dark"] .or-indicador-card .indicador-icon,
[data-bs-theme="dark"] .or-indicador-card .indicador-valor,
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    color: var(--or-brand-accent) !important;
}

/* Foco de campo (azul #86b7fe fixo do Bootstrap) → marca clareada */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--or-brand-accent);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--or-brand-accent), transparent 75%);
}

/* Swap de logo no dark — SÓ quando existe EMP_LOGO_SECUNDARIA (o header emite as 2 <img> dentro
   de <a class="or-logo-swap">). Escopado à classe marcadora: site sem logo alternativa mantém a
   logo única intocada no escuro (nunca regra global escondendo .logo-default). */
.or-logo-swap .logo-dark { display: none; }
[data-bs-theme="dark"] .or-logo-swap .logo-default { display: none; }
[data-bs-theme="dark"] .or-logo-swap .logo-dark { display: inline-block; }

/* ═══ CAMADA 3 — ADAPTER do template Canvas 7 (ISOLADO — trocar template = reescrever só isto) ═══
   O Canvas tem `.dark` nativo (invertendo --cnvs-*); acionamos via html.dark (setado pelo JS).
   Aqui tratamos os pontos que o .dark do Canvas não cobre / que o custom.css hardcodou. */

/* Header sticky: o data-sticky-class="not-dark" re-clareia no scroll → forçamos escuro */
html.dark #header,
html.dark #header-wrap,
html.dark #header.sticky-header,
html.dark #header.sticky-header.not-dark,
html.dark #header.not-dark #header-wrap {
    background-color: var(--or-surface) !important;
    border-color: var(--or-border) !important;
}
html.dark #header .menu-link,
html.dark #header.not-dark .menu-link,
html.dark #header .menu-link > div { color: var(--or-text); }
html.dark .primary-menu .dropdown-nav,
html.dark .primary-menu ul ul { background-color: var(--or-surface) !important; border-color: var(--or-border) !important; }

/* #page-title (fundo claro --cnvs-contrast-bg-offset nas páginas de detalhe) */
html.dark #page-title {
    background-color: var(--or-surface-2) !important;
    border-color: var(--or-border) !important;
}
html.dark #page-title h1,
html.dark #page-title .breadcrumb,
html.dark #page-title .breadcrumb a,
html.dark #page-title .breadcrumb-item.active { color: var(--or-text) !important; }

/* Seções alternadas do Canvas que usem cinza-claro fixo (garantia extra) */
html.dark .section:not([style*="marca-primaria"]) { background-color: var(--or-surface); color: var(--or-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   FAB — botão de tema (skin apenas; POSIÇÃO é da pilha .or-fab-stack — ver
   site/includes/fab-stack.php, fonte única do bottom/left/z-index de todo FAB).
   ═══════════════════════════════════════════════════════════════════════════ */
.or-theme-fab {
    width: var(--or-fab-size, 48px);
    height: var(--or-fab-size, 48px);
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--or-border);
    background: var(--or-surface);
    color: var(--or-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.or-theme-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.or-theme-fab:focus-visible { outline: 2px solid var(--or-brand-accent); outline-offset: 2px; }
.or-theme-fab .or-theme-ico { display: none; }
.or-theme-fab .or-theme-moon { display: block; }               /* claro → oferece a lua */
[data-bs-theme="dark"] .or-theme-fab .or-theme-moon { display: none; }
[data-bs-theme="dark"] .or-theme-fab .or-theme-sun { display: block; } /* escuro → oferece o sol */