/* ============================================================
   curso.css — CSS compartilhado do curso "Auditoria de Ablacao"
   Carregar DEPOIS do Tailwind CDN e DEPOIS de learn.css.
   Contem: base v1, topicos expansiveis, bordas suavizadas no dark,
   adaptacao de SVG ao tema claro, pulso dos diagramas e o bloco
   COMPLETO de light mode (base + 5 acentos + especiais + nav).
   ============================================================ */

body { font-family: 'Inter', sans-serif; }
.dark body { background-color: #111827; }

.topic-explanation { display: none; }
.topic-explanation.active { display: block; }

/* alvos de ancora nao podem ficar sob o nav sticky */
[id^="topico-"], [id^="modulo-"], h2, h3, .topic-item { scroll-margin-top: 5rem; }

/* Erro #15 — bordas e divisores suaves no dark */
.dark .border-dark-600 { border-color: #374151; }
.dark .divide-dark-600 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }

/* SVG futurista: conter a intensidade no tema claro */
html:not(.dark) svg[role="img"] { filter: saturate(0.82) brightness(0.96); }

/* pulso dos nos paralelos dos diagramas */
@keyframes wf-pulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }
@media (prefers-reduced-motion: no-preference) {
  .wf-a { animation: wf-pulse 2.6s ease-in-out infinite; }
  .wf-a:nth-child(2){animation-delay:.25s} .wf-a:nth-child(3){animation-delay:.5s}
  .wf-a:nth-child(4){animation-delay:.75s} .wf-a:nth-child(5){animation-delay:1s}
}

/* bloco de codigo copiavel */
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code-box pre { white-space: pre-wrap; word-break: break-word; }

:focus-visible { outline: 3px solid #38bdf8; outline-offset: 2px; }

/* ============================================================
   LIGHT MODE — Parte 1: base
   ============================================================ */
html:not(.dark) body { background-color: #f8fafc; }
html:not(.dark) .bg-dark-900 { background-color: #ffffff; }
html:not(.dark) .bg-dark-800 { background-color: #f9fafb; }
html:not(.dark) .bg-dark-700 { background-color: #f3f4f6; }
html:not(.dark) .bg-dark-600 { background-color: #e5e7eb; }
html:not(.dark) .bg-dark-800\/50 { background-color: rgba(249,250,251,0.8); }
html:not(.dark) .bg-dark-900\/40 { background-color: rgba(255,255,255,0.6); }
html:not(.dark) .bg-dark-700\/50 { background-color: rgba(243,244,246,0.8); }
html:not(.dark) .bg-dark-700\/30 { background-color: rgba(243,244,246,0.6); }
html:not(.dark) .text-neutral-100 { color: #111827; }
html:not(.dark) .text-neutral-300 { color: #4b5563; }
html:not(.dark) .text-neutral-400 { color: #6b7280; }
html:not(.dark) .text-neutral-500 { color: #9ca3af; }
html:not(.dark) .text-white { color: #111827; }
html:not(.dark) .border-dark-600 { border-color: #d1d5db; }
html:not(.dark) .border-dark-700 { border-color: #e5e7eb; }

/* ============================================================
   LIGHT MODE — Parte 2: acentos das 5 trilhas
   (todas as paginas carregam todas, porque o nav usa as 5)
   ============================================================ */

/* T1 Emerald #059669 */
html:not(.dark) .text-emerald-400 { color: #059669; }
html:not(.dark) .bg-emerald-500\/20 { background-color: rgba(5,150,105,0.12); }
html:not(.dark) .bg-emerald-500\/10 { background-color: rgba(5,150,105,0.08); }
html:not(.dark) .bg-emerald-900\/20 { background-color: rgba(5,150,105,0.07); }
html:not(.dark) .bg-emerald-900\/30 { background-color: rgba(5,150,105,0.07); }
html:not(.dark) .border-emerald-500\/30 { border-color: rgba(5,150,105,0.25); }
html:not(.dark) .hover\:bg-emerald-500\/30:hover { background-color: rgba(5,150,105,0.18); }
html:not(.dark) .hover\:text-emerald-400:hover { color: #059669; }
html:not(.dark) .hover\:bg-emerald-500\/10:hover { background-color: rgba(5,150,105,0.08); }
html:not(.dark) .hover\:border-emerald-500\/30:hover { border-color: rgba(5,150,105,0.25); }
html:not(.dark) .group:hover .group-hover\:text-emerald-400 { color: #059669; }
html:not(.dark) .bg-emerald-600 { background-color: #047857; }
html:not(.dark) .hover\:bg-emerald-500:hover { background-color: #059669; }

/* T2 Blue #2563eb */
html:not(.dark) .text-blue-400 { color: #2563eb; }
html:not(.dark) .bg-blue-500\/20 { background-color: rgba(37,99,235,0.12); }
html:not(.dark) .bg-blue-500\/10 { background-color: rgba(37,99,235,0.08); }
html:not(.dark) .bg-blue-900\/20 { background-color: rgba(37,99,235,0.07); }
html:not(.dark) .bg-blue-900\/30 { background-color: rgba(37,99,235,0.07); }
html:not(.dark) .border-blue-500\/30 { border-color: rgba(37,99,235,0.25); }
html:not(.dark) .hover\:bg-blue-500\/30:hover { background-color: rgba(37,99,235,0.18); }
html:not(.dark) .hover\:text-blue-400:hover { color: #2563eb; }
html:not(.dark) .hover\:bg-blue-500\/10:hover { background-color: rgba(37,99,235,0.08); }
html:not(.dark) .hover\:border-blue-500\/30:hover { border-color: rgba(37,99,235,0.25); }
html:not(.dark) .group:hover .group-hover\:text-blue-400 { color: #2563eb; }
html:not(.dark) .bg-blue-600 { background-color: #1d4ed8; }
html:not(.dark) .hover\:bg-blue-500:hover { background-color: #2563eb; }

/* T3 Purple #7c3aed */
html:not(.dark) .text-purple-400 { color: #7c3aed; }
html:not(.dark) .bg-purple-500\/20 { background-color: rgba(124,58,237,0.12); }
html:not(.dark) .bg-purple-500\/10 { background-color: rgba(124,58,237,0.08); }
html:not(.dark) .bg-purple-900\/20 { background-color: rgba(124,58,237,0.07); }
html:not(.dark) .bg-purple-900\/30 { background-color: rgba(124,58,237,0.07); }
html:not(.dark) .border-purple-500\/30 { border-color: rgba(124,58,237,0.25); }
html:not(.dark) .hover\:bg-purple-500\/30:hover { background-color: rgba(124,58,237,0.18); }
html:not(.dark) .hover\:text-purple-400:hover { color: #7c3aed; }
html:not(.dark) .hover\:bg-purple-500\/10:hover { background-color: rgba(124,58,237,0.08); }
html:not(.dark) .hover\:border-purple-500\/30:hover { border-color: rgba(124,58,237,0.25); }
html:not(.dark) .group:hover .group-hover\:text-purple-400 { color: #7c3aed; }
html:not(.dark) .bg-purple-600 { background-color: #6d28d9; }
html:not(.dark) .hover\:bg-purple-500:hover { background-color: #7c3aed; }

/* T4 Amber #92400e (amber-800: -600 fica intenso demais) */
html:not(.dark) .text-amber-400 { color: #92400e; }
html:not(.dark) .bg-amber-500\/20 { background-color: rgba(217,119,6,0.12); }
html:not(.dark) .bg-amber-500\/10 { background-color: rgba(217,119,6,0.08); }
html:not(.dark) .bg-amber-900\/20 { background-color: rgba(217,119,6,0.07); }
html:not(.dark) .bg-amber-900\/30 { background-color: rgba(217,119,6,0.07); }
html:not(.dark) .border-amber-500\/30 { border-color: rgba(217,119,6,0.25); }
html:not(.dark) .hover\:bg-amber-500\/30:hover { background-color: rgba(217,119,6,0.18); }
html:not(.dark) .hover\:text-amber-400:hover { color: #92400e; }
html:not(.dark) .hover\:bg-amber-500\/10:hover { background-color: rgba(217,119,6,0.08); }
html:not(.dark) .hover\:border-amber-500\/30:hover { border-color: rgba(217,119,6,0.25); }
html:not(.dark) .group:hover .group-hover\:text-amber-400 { color: #92400e; }
html:not(.dark) .bg-amber-600 { background-color: #b45309; }
html:not(.dark) .hover\:bg-amber-500:hover { background-color: #d97706; }

/* T5 Teal #0d9488 */
html:not(.dark) .text-teal-400 { color: #0d9488; }
html:not(.dark) .bg-teal-500\/20 { background-color: rgba(13,148,136,0.12); }
html:not(.dark) .bg-teal-500\/10 { background-color: rgba(13,148,136,0.08); }
html:not(.dark) .bg-teal-900\/20 { background-color: rgba(13,148,136,0.07); }
html:not(.dark) .bg-teal-900\/30 { background-color: rgba(13,148,136,0.07); }
html:not(.dark) .border-teal-500\/30 { border-color: rgba(13,148,136,0.25); }
html:not(.dark) .hover\:bg-teal-500\/30:hover { background-color: rgba(13,148,136,0.18); }
html:not(.dark) .hover\:text-teal-400:hover { color: #0d9488; }
html:not(.dark) .hover\:bg-teal-500\/10:hover { background-color: rgba(13,148,136,0.08); }
html:not(.dark) .hover\:border-teal-500\/30:hover { border-color: rgba(13,148,136,0.25); }
html:not(.dark) .group:hover .group-hover\:text-teal-400 { color: #0d9488; }
html:not(.dark) .bg-teal-600 { background-color: #0f766e; }
html:not(.dark) .hover\:bg-teal-500:hover { background-color: #0d9488; }

/* ============================================================
   LIGHT MODE — Parte 3: sem gradiente + cores especiais
   ============================================================ */
html:not(.dark) [class*="bg-gradient-to"] { background-image: none !important; }
html:not(.dark) .text-primary { color: #a16207; }
html:not(.dark) .bg-primary\/10 { background-color: rgba(161,98,7,0.08); }
html:not(.dark) .border-primary\/30 { border-color: rgba(161,98,7,0.25); }
html:not(.dark) .border-primary\/40 { border-color: rgba(161,98,7,0.25); }
html:not(.dark) .text-sky-400 { color: #0369a1; }
html:not(.dark) .text-yellow-400 { color: #a16207; }
html:not(.dark) .hover\:text-sky-300:hover { color: #0284c7; }
html:not(.dark) .hover\:text-yellow-300:hover { color: #854d0e; }
html:not(.dark) .text-red-400 { color: #b91c1c; }
html:not(.dark) .bg-red-900\/20 { background-color: rgba(185,28,28,0.07); }
html:not(.dark) .bg-red-500\/20 { background-color: rgba(185,28,28,0.10); }
html:not(.dark) .border-red-500\/30 { border-color: rgba(185,28,28,0.25); }

/* ============================================================
   LIGHT MODE — Parte 4: navbar
   ============================================================ */
html:not(.dark) .bg-dark-900\/95 { background-color: rgba(255,255,255,0.95); }