/* ─────────────────────────────────────────────────────────────────
   dark-mode.css — Modo oscuro para amvelazquez.com
   Estrategia: invertir superficies (blanco → oscuro), preservar
   los headers ya oscuros y los colores de acento de cada análisis.
   ────────────────────────────────────────────────────────────────── */


/* ── BOTÓN TOGGLE ─────────────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #1a3a5c;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 150;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  font-size: 1.15rem;
  line-height: 1;
  transition: background .15s, transform .15s;
}
.theme-toggle:hover { background: #15314e; transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid #1d4e7a; outline-offset: 3px; }
@media (max-width: 600px) {
  .theme-toggle {
    bottom: 1rem; left: 1rem;
    width: 2.5rem; height: 2.5rem;
    font-size: 1rem;
  }
}


/* ── DARK MODE — vars genéricas para uso en componentes nuevos ─ */
html[data-theme="dark"] {
  color-scheme: dark;
}


/* ────────────────────────────────────────────────────────────────
   MEDIA QUERY: prefers-color-scheme + override manual
   (sólo aplica cuando el usuario explícitamente eligió dark, o cuando
    su sistema está en dark y NO eligió light)
   ────────────────────────────────────────────────────────────── */

html[data-theme="dark"],
html[data-theme="auto"][data-system-prefers="dark"] {

  /* Variables raíz (afectan al home, sobre, metodología, temas, buscar, 404) */
  --bg: #0e1217 !important;
  --bg-mid: #161b22 !important;
  --bg-deep: #1c222b !important;
  --ink: #e6eaf0 !important;
  --ink-mid: #b1b9c5 !important;
  --ink-soft: #7b8492 !important;
  --border: #2a323e !important;
  --blue-light: #1e3a5f !important;

  /* Body backgrounds */
  background-color: #0e1217 !important;
}

html[data-theme="dark"] body,
html[data-theme="auto"][data-system-prefers="dark"] body {
  background-color: #0e1217 !important;
  color: #e6eaf0 !important;
}


/* ── ANALYSIS PAGES (article-body de cada análisis) ──────────── */
html[data-theme="dark"] .article-body,
html[data-theme="auto"][data-system-prefers="dark"] .article-body {
  background: transparent !important;
}

html[data-theme="dark"] body:has(.article-body),
html[data-theme="auto"][data-system-prefers="dark"] body:has(.article-body) {
  background: #0e1217 !important;
  color: #cdd5dd !important;
}

/* article-section borders */
html[data-theme="dark"] .article-section,
html[data-theme="auto"][data-system-prefers="dark"] .article-section {
  border-bottom-color: #2a323e !important;
}

/* Section titles y números */
html[data-theme="dark"] .section-title,
html[data-theme="auto"][data-system-prefers="dark"] .section-title {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .section-intro,
html[data-theme="auto"][data-system-prefers="dark"] .section-intro {
  color: #a9b3c1 !important;
  border-left-color: #2a323e !important;
}

/* Prose */
html[data-theme="dark"] .prose,
html[data-theme="auto"][data-system-prefers="dark"] .prose {
  color: #cdd5dd !important;
}
html[data-theme="dark"] .prose strong,
html[data-theme="auto"][data-system-prefers="dark"] .prose strong {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .prose h3,
html[data-theme="auto"][data-system-prefers="dark"] .prose h3 {
  color: #f0f4f8 !important;
}

/* Summary list */
html[data-theme="dark"] .summary-list,
html[data-theme="auto"][data-system-prefers="dark"] .summary-list {
  background: #161b22 !important;
  border-color: #2a323e !important;
}
html[data-theme="dark"] .summary-list li,
html[data-theme="auto"][data-system-prefers="dark"] .summary-list li {
  color: #cdd5dd !important;
  border-top-color: #2a323e !important;
}
html[data-theme="dark"] .summary-list li strong,
html[data-theme="auto"][data-system-prefers="dark"] .summary-list li strong {
  color: #f0f4f8 !important;
}

/* Highlight / Valoración boxes */
html[data-theme="dark"] .highlight-box,
html[data-theme="auto"][data-system-prefers="dark"] .highlight-box {
  background: #14283e !important;
  color: #cfe1f5 !important;
}
html[data-theme="dark"] .highlight-box.amber,
html[data-theme="auto"][data-system-prefers="dark"] .highlight-box.amber {
  background: #2c2010 !important;
  color: #f6cf83 !important;
}
html[data-theme="dark"] .highlight-box.warn,
html[data-theme="auto"][data-system-prefers="dark"] .highlight-box.warn {
  background: #2a1414 !important;
  color: #ffb4ad !important;
}
html[data-theme="dark"] .valoracion-block,
html[data-theme="auto"][data-system-prefers="dark"] .valoracion-block {
  background: #2a1f10 !important;
  color: #d4cfc4 !important;
  border-color: #5a4220 !important;
}
html[data-theme="dark"] .valoracion-block strong,
html[data-theme="auto"][data-system-prefers="dark"] .valoracion-block strong {
  color: #f6e7c7 !important;
}

/* Accordions */
html[data-theme="dark"] .accordion-item,
html[data-theme="auto"][data-system-prefers="dark"] .accordion-item {
  background: #161b22 !important;
  border-color: #2a323e !important;
}
html[data-theme="dark"] .accordion-btn,
html[data-theme="auto"][data-system-prefers="dark"] .accordion-btn {
  background: #1c222b !important;
}
html[data-theme="dark"] .accordion-btn:hover,
html[data-theme="auto"][data-system-prefers="dark"] .accordion-btn:hover {
  background: #232b36 !important;
}
html[data-theme="dark"] .accordion-label,
html[data-theme="auto"][data-system-prefers="dark"] .accordion-label {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .accordion-icon,
html[data-theme="auto"][data-system-prefers="dark"] .accordion-icon {
  background: #2a323e !important;
  color: #a9b3c1 !important;
}
html[data-theme="dark"] .accordion-inner,
html[data-theme="auto"][data-system-prefers="dark"] .accordion-inner {
  color: #cdd5dd !important;
}
html[data-theme="dark"] .accordion-inner strong,
html[data-theme="auto"][data-system-prefers="dark"] .accordion-inner strong {
  color: #f0f4f8 !important;
}

/* Cards (actor-card, comp-card, related-card) */
html[data-theme="dark"] .actor-card,
html[data-theme="dark"] .comp-card,
html[data-theme="dark"] .related-card,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .suggest-card,
html[data-theme="dark"] .featured-card,
html[data-theme="auto"][data-system-prefers="dark"] .actor-card,
html[data-theme="auto"][data-system-prefers="dark"] .comp-card,
html[data-theme="auto"][data-system-prefers="dark"] .related-card,
html[data-theme="auto"][data-system-prefers="dark"] .topic-card,
html[data-theme="auto"][data-system-prefers="dark"] .result-card,
html[data-theme="auto"][data-system-prefers="dark"] .suggest-card,
html[data-theme="auto"][data-system-prefers="dark"] .featured-card {
  background: #161b22 !important;
  border-color: #2a323e !important;
}
html[data-theme="dark"] .actor-card h3,
html[data-theme="dark"] .comp-card h3,
html[data-theme="dark"] .related-card-title,
html[data-theme="dark"] .topic-card-title,
html[data-theme="dark"] .result-card-title,
html[data-theme="dark"] .suggest-card-title,
html[data-theme="auto"][data-system-prefers="dark"] .actor-card h3,
html[data-theme="auto"][data-system-prefers="dark"] .comp-card h3,
html[data-theme="auto"][data-system-prefers="dark"] .related-card-title,
html[data-theme="auto"][data-system-prefers="dark"] .topic-card-title,
html[data-theme="auto"][data-system-prefers="dark"] .result-card-title,
html[data-theme="auto"][data-system-prefers="dark"] .suggest-card-title {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .actor-card ul,
html[data-theme="dark"] .comp-card p,
html[data-theme="dark"] .related-card-desc,
html[data-theme="dark"] .topic-card-desc,
html[data-theme="dark"] .result-card-desc,
html[data-theme="auto"][data-system-prefers="dark"] .actor-card ul,
html[data-theme="auto"][data-system-prefers="dark"] .comp-card p,
html[data-theme="auto"][data-system-prefers="dark"] .related-card-desc,
html[data-theme="auto"][data-system-prefers="dark"] .topic-card-desc,
html[data-theme="auto"][data-system-prefers="dark"] .result-card-desc {
  color: #a9b3c1 !important;
}

/* Bio wrap (footer del análisis) */
html[data-theme="dark"] .bio-wrap,
html[data-theme="auto"][data-system-prefers="dark"] .bio-wrap {
  background: #161b22 !important;
  border-color: #2a323e !important;
}
html[data-theme="dark"] .bio-wrap p,
html[data-theme="dark"] .bio-wrap h2,
html[data-theme="dark"] .bio-wrap h3,
html[data-theme="auto"][data-system-prefers="dark"] .bio-wrap p,
html[data-theme="auto"][data-system-prefers="dark"] .bio-wrap h2,
html[data-theme="auto"][data-system-prefers="dark"] .bio-wrap h3 {
  color: #cdd5dd !important;
}

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="auto"][data-system-prefers="dark"] footer {
  background: #0a0d12 !important;
  border-top-color: #2a323e !important;
}
html[data-theme="dark"] .footer-link,
html[data-theme="auto"][data-system-prefers="dark"] .footer-link {
  color: #b1b9c5 !important;
}
html[data-theme="dark"] .footer-link:hover,
html[data-theme="auto"][data-system-prefers="dark"] .footer-link:hover {
  color: #93c5fd !important;
}

/* Share section, hallazgo cards, etc. */
html[data-theme="dark"] .share-section,
html[data-theme="auto"][data-system-prefers="dark"] .share-section {
  background: #161b22 !important;
  border-color: #2a323e !important;
}
html[data-theme="dark"] .share-section-text,
html[data-theme="auto"][data-system-prefers="dark"] .share-section-text {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .share-btn,
html[data-theme="auto"][data-system-prefers="dark"] .share-btn {
  background: #1c222b !important;
  border-color: #2a323e !important;
  color: #cdd5dd !important;
}
html[data-theme="dark"] .share-btn:hover,
html[data-theme="auto"][data-system-prefers="dark"] .share-btn:hover {
  background: #232b36 !important;
  color: #93c5fd !important;
  border-color: #1d4e7a !important;
}

/* Search box */
html[data-theme="dark"] .search-box,
html[data-theme="auto"][data-system-prefers="dark"] .search-box {
  background: #161b22 !important;
  border-color: #2a323e !important;
}
html[data-theme="dark"] .search-input,
html[data-theme="auto"][data-system-prefers="dark"] .search-input {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .search-input::placeholder,
html[data-theme="auto"][data-system-prefers="dark"] .search-input::placeholder {
  color: #7b8492 !important;
}
html[data-theme="dark"] .search-clear,
html[data-theme="auto"][data-system-prefers="dark"] .search-clear {
  background: #1c222b !important;
  border-color: #2a323e !important;
  color: #b1b9c5 !important;
}
html[data-theme="dark"] .suggestion-chip,
html[data-theme="dark"] .topic-jump,
html[data-theme="auto"][data-system-prefers="dark"] .suggestion-chip,
html[data-theme="auto"][data-system-prefers="dark"] .topic-jump {
  background: #161b22 !important;
  border-color: #2a323e !important;
  color: #b1b9c5 !important;
}

/* Coming soon */
html[data-theme="dark"] .coming-soon,
html[data-theme="auto"][data-system-prefers="dark"] .coming-soon {
  border-color: #2a323e !important;
  color: #7b8492 !important;
}

/* Reading progress bar (mantener pero con shadow más sutil) */
html[data-theme="dark"] .reading-progress-bar,
html[data-theme="auto"][data-system-prefers="dark"] .reading-progress-bar {
  background: linear-gradient(90deg, #38bdf8 0%, #1d4e7a 100%) !important;
}

/* Anchor links */
html[data-theme="dark"] .anchor-link,
html[data-theme="auto"][data-system-prefers="dark"] .anchor-link {
  color: #93c5fd !important;
}

/* Page-header NO se invierte: ya es oscuro */

/* Stats row */
html[data-theme="dark"] .stats-row,
html[data-theme="auto"][data-system-prefers="dark"] .stats-row {
  background: #0a0d12 !important;
}

/* Site nav */
html[data-theme="dark"] .nav-bar,
html[data-theme="auto"][data-system-prefers="dark"] .nav-bar {
  background: #0c1e2e !important;
}

/* Ajustes para tarjeta del home (tarjetas de análisis) */
html[data-theme="dark"] .card-seq,
html[data-theme="auto"][data-system-prefers="dark"] .card-seq {
  color: rgba(240,244,248,0.05) !important;
}
html[data-theme="dark"] .featured-card h2,
html[data-theme="auto"][data-system-prefers="dark"] .featured-card h2 {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .featured-card p,
html[data-theme="auto"][data-system-prefers="dark"] .featured-card p {
  color: #a9b3c1 !important;
}

/* Section labels */
html[data-theme="dark"] .section-label,
html[data-theme="auto"][data-system-prefers="dark"] .section-label {
  color: #93c5fd !important;
}
html[data-theme="dark"] .section-desc,
html[data-theme="auto"][data-system-prefers="dark"] .section-desc {
  color: #b1b9c5 !important;
  border-left-color: #2a323e !important;
}

/* Topic page extras */
html[data-theme="dark"] .topic-section,
html[data-theme="auto"][data-system-prefers="dark"] .topic-section {
  border-bottom-color: #2a323e !important;
}
html[data-theme="dark"] .topic-title,
html[data-theme="auto"][data-system-prefers="dark"] .topic-title {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .topic-count,
html[data-theme="auto"][data-system-prefers="dark"] .topic-count {
  background: #1c222b !important;
  border-color: #2a323e !important;
  color: #b1b9c5 !important;
}
html[data-theme="dark"] .topic-desc,
html[data-theme="auto"][data-system-prefers="dark"] .topic-desc {
  color: #a9b3c1 !important;
}

/* CTA explore */
html[data-theme="dark"] .cta-explore,
html[data-theme="auto"][data-system-prefers="dark"] .cta-explore {
  background: #161b22 !important;
  border-color: #2a323e !important;
}
html[data-theme="dark"] .cta-explore-title,
html[data-theme="auto"][data-system-prefers="dark"] .cta-explore-title {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .cta-explore-desc,
html[data-theme="auto"][data-system-prefers="dark"] .cta-explore-desc {
  color: #b1b9c5 !important;
}

/* Value cards / principle cards */
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .principle-card,
html[data-theme="auto"][data-system-prefers="dark"] .value-card,
html[data-theme="auto"][data-system-prefers="dark"] .principle-card {
  background: #161b22 !important;
  border-color: #2a323e !important;
}
html[data-theme="dark"] .value-card-title,
html[data-theme="dark"] .principle-card-title,
html[data-theme="auto"][data-system-prefers="dark"] .value-card-title,
html[data-theme="auto"][data-system-prefers="dark"] .principle-card-title {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .value-card-desc,
html[data-theme="dark"] .principle-card-desc,
html[data-theme="auto"][data-system-prefers="dark"] .value-card-desc,
html[data-theme="auto"][data-system-prefers="dark"] .principle-card-desc {
  color: #a9b3c1 !important;
}

/* Step list (metodología) */
html[data-theme="dark"] .step-title,
html[data-theme="auto"][data-system-prefers="dark"] .step-title {
  color: #f0f4f8 !important;
}
html[data-theme="dark"] .step-desc,
html[data-theme="auto"][data-system-prefers="dark"] .step-desc {
  color: #b1b9c5 !important;
}

/* Sources list */
html[data-theme="dark"] .sources-list li,
html[data-theme="dark"] .audience-list li,
html[data-theme="auto"][data-system-prefers="dark"] .sources-list li,
html[data-theme="auto"][data-system-prefers="dark"] .audience-list li {
  color: #b1b9c5 !important;
}

/* Prose body */
html[data-theme="dark"] .prose-body,
html[data-theme="auto"][data-system-prefers="dark"] .prose-body {
  color: #b1b9c5 !important;
}
html[data-theme="dark"] .prose-body strong,
html[data-theme="auto"][data-system-prefers="dark"] .prose-body strong {
  color: #f0f4f8 !important;
}

/* Mark (highlights de búsqueda) — más legible en dark */
html[data-theme="dark"] mark,
html[data-theme="auto"][data-system-prefers="dark"] mark {
  background: #5b3a06 !important;
  color: #fde68a !important;
}

/* Hallazgos (ya son oscuras, dejar) — sólo ajustar si necesario */
html[data-theme="dark"] .hallazgo-card,
html[data-theme="auto"][data-system-prefers="dark"] .hallazgo-card {
  background: #1c222b !important;
}

/* Asegurarse que en dark NO se aplique back-to-top oculto */
html[data-theme="dark"] .back-to-top,
html[data-theme="auto"][data-system-prefers="dark"] .back-to-top {
  background: #1d4e7a !important;
}
html[data-theme="dark"] .back-to-top:hover,
html[data-theme="auto"][data-system-prefers="dark"] .back-to-top:hover {
  background: #2872a8 !important;
}

/* Print: ignorar dark en impresión */
@media print {
  html[data-theme="dark"], html[data-theme="auto"][data-system-prefers="dark"] {
    background: #fff !important;
    color: #000 !important;
  }
  .theme-toggle { display: none !important; }
}