/* =========================================================
   Tema azul (modelo) — carregado DEPOIS do style.css
   Fundo azul-noite contínuo, cards translúcidos e bordas claras.
   Para ativar no site principal: adicionar este <link> no index.php
   e a classe "tema-azul" no <body>. Para desativar: remover os dois.
   ========================================================= */

body.tema-azul {
  --abyss: #0B1A2E;
  --noite-2: #0F2440;
  --ink: #E8F1F8;
  --ink-2: #9FB4C8;
  --line: rgba(255, 255, 255, .10);
  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .07);
  --azul-claro: #5FB3E6;
  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0, 0, 0, .18);
  --shadow-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0, 0, 0, .35);

  background: var(--abyss);
  color: var(--ink);
}

/* Brilho de fundo suave que acompanha a página inteira */
body.tema-azul main {
  background:
    radial-gradient(1100px 700px at 100% 18%, rgba(5, 96, 141, .22), transparent 70%),
    radial-gradient(900px 700px at 0% 52%, rgba(5, 96, 141, .16), transparent 70%),
    radial-gradient(900px 600px at 100% 82%, rgba(5, 96, 141, .14), transparent 70%);
}

/* Cabeçalho ao rolar */
.tema-azul .site-header.is-scrolled,
.tema-azul .site-header.is-open {
  background: rgba(11, 26, 46, .82);
  box-shadow: 0 1px 0 var(--line);
  color: #fff;
}
.tema-azul .menu-mobile { background: var(--noite-2); color: var(--ink); border-top-color: var(--line); }
.tema-azul .skip { background: var(--noite-2); color: #fff; }

/* Hero: sem a "onda branca" de transição */
.tema-azul .hero { background:
    radial-gradient(60% 50% at 78% 30%, rgba(5, 96, 141, .55), transparent 70%),
    radial-gradient(50% 60% at 0% 0%, rgba(5, 96, 141, .35), transparent 70%),
    transparent; }
.tema-azul .hero-waves .w3 { fill: transparent; }
.tema-azul .hero-waves .w2 { opacity: .04; }

.tema-azul .readout,
.tema-azul .toast-alert {
  background: rgba(15, 36, 64, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--ink);
  border: 1px solid var(--line);
}
.tema-azul .toast-alert { border-left: 3px solid var(--amber); }
.tema-azul .toast-icon { background: rgba(233, 162, 59, .15); color: var(--amber); }
.tema-azul .readout-list li { border-bottom-color: var(--line); }
.tema-azul .readout-list li b { color: #fff; }
.tema-azul .readout-list li b.tick { color: var(--azul-claro); }
.tema-azul .readout-list li em { color: #7F95A7; }
.tema-azul .readout-foot span { color: #6FD3AA; }

.tema-azul .facts {
  background: var(--glass);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1);
}
.tema-azul .facts dt { color: var(--azul-claro); }

/* Sistemas */
.tema-azul .system-card { border-color: var(--line); }
.tema-azul .system-eta { background: linear-gradient(180deg, rgba(95,179,230,.10), rgba(255,255,255,.03)); }
.tema-azul .system-ete { background: linear-gradient(180deg, #12406A 0%, #0F2A48 100%); border-color: rgba(95,179,230,.18); }
.tema-azul .system-top p,
.tema-azul .system-ete .system-top p { color: var(--ink-2); }
.tema-azul .ticks li { color: #D3E2EE; }
.tema-azul .ticks .ic { background: rgba(47,163,122,.2); color: #6FD3AA; }

/* Como funciona */
.tema-azul .how { background: linear-gradient(180deg, transparent, rgba(15,36,64,.6) 20%, rgba(15,36,64,.6) 80%, transparent); }
.tema-azul .how-note { background: var(--glass); border-color: var(--line); }
.tema-azul .how-note .ic { color: var(--azul-claro); }
.tema-azul .how-note strong { color: #fff; }
.tema-azul .node { background: var(--glass-2); border-color: var(--line); box-shadow: var(--shadow-1); }
.tema-azul .node-center { background: linear-gradient(160deg, #0B5E8E, #0A3A5E); border-color: rgba(95,179,230,.3); }
.tema-azul .node-center > span:last-child { color: #BFD6E8; }
.tema-azul .node-icon .ic { color: #fff; }
.tema-azul .tag-local { background: rgba(47,163,122,.16); color: #6FD3AA; }
.tema-azul .tag-web { background: rgba(95,179,230,.14); color: var(--azul-claro); }
.tema-azul .ln-web { stroke: var(--azul-claro); }

/* Recursos */
.tema-azul .feature-col { background: var(--glass); border-color: var(--line); }
.tema-azul .feature-col h3 { border-bottom-color: var(--line); }
.tema-azul .feature-col h3 .ic { background: rgba(95,179,230,.12); color: var(--azul-claro); }
.tema-azul .feature-col li { border-bottom-color: rgba(255,255,255,.07); }
.tema-azul .feature-col li strong { color: #fff; }

.tema-azul .spotlight {
  background: linear-gradient(160deg, #12406A 0%, #0F2A48 100%);
  border: 1px solid rgba(95,179,230,.18);
}

/* Normas */
.tema-azul .norms { background: rgba(255,255,255,.025); border-color: var(--line); }
.tema-azul .norms li { background: var(--glass-2); border-color: var(--line); color: var(--ink); }

/* Telas (seção hoje oculta, mantida pronta) */
.tema-azul .viewer-tabs button { background: var(--glass); border-color: var(--line); color: var(--ink-2); }
.tema-azul .viewer-tabs button:hover { color: #fff; background: var(--glass-2); }
.tema-azul .viewer-tabs button[aria-selected="true"] { background: var(--tecla); border-color: var(--tecla); color: #fff; }
.tema-azul .browser { border-color: var(--line); }

/* Relatórios */
.tema-azul .reports { background: transparent; }
.tema-azul .report-groups > div { background: var(--glass); border-color: var(--line); }
.tema-azul .report-groups h3 { color: #fff; }

/* Aplicativo */
.tema-azul .app { background:
    radial-gradient(50% 60% at 85% 40%, rgba(5, 96, 141, .45), transparent 70%),
    linear-gradient(180deg, transparent, rgba(15,36,64,.7) 25%, rgba(15,36,64,.7) 75%, transparent); }
.tema-azul .app-list .ic { background: rgba(95,179,230,.12); color: var(--azul-claro); }

/* Implantação e suporte */
.tema-azul .step-list li { background: var(--glass); border-color: var(--line); }
.tema-azul .step-n { background: rgba(233,162,59,.14); color: var(--amber); }
.tema-azul .step-list li:not(:last-child)::after { background: var(--line); }
.tema-azul .support { background: linear-gradient(120deg, rgba(95,179,230,.12), rgba(255,255,255,.03)); border-color: var(--line); }
.tema-azul .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.tema-azul .btn-outline:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); }

/* Dúvidas */
.tema-azul .faq-head a { color: var(--amber); }
.tema-azul .faq-list summary { color: #fff; }
.tema-azul .faq-list summary .ic { color: var(--azul-claro); }

/* CTA final */
.tema-azul .cta-inner {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(233,162,59,.16), transparent 70%),
    linear-gradient(135deg, #0B5E8E, #0F2A48);
  border: 1px solid rgba(95,179,230,.2);
}

/* Rodapé */
.tema-azul .site-footer { background: #081322; border-top: 1px solid var(--line); }

/* Lightbox */
.tema-azul .lightbox { background: rgba(6, 14, 26, .94); }