/**
 * dark.css — Brilla Cochecitos
 * Overrides para artículos del blog con estilos inline hardcodeados.
 * Complementa las variables CSS de styles.css para los 4 artículos con <style> inline.
 */

/* ── Botón toggle (todos los headers) ─────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1.5px solid rgba(0, 0, 0, .14);
  border-radius: 99px;
  cursor: pointer;
  font-size: .95rem;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, background .2s, transform .15s;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: #5FA8F5;
  background: rgba(162, 207, 254, .12);
  transform: scale(1.08);
}

/* Toggle dentro de site-header (artículos inline) */
header.site-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
header.site-header .theme-toggle {
  margin-left: auto;
}

/* Toggle dentro de .nav__inner (artículos tipo "nav header") */
header.nav .theme-toggle {
  margin-left: 1rem;
}

/* ── MODO OSCURO — variables base (catch-all para hardcoded) ─────────────── */

[data-theme="dark"] body {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] a:not(.btn):not(.nav__cta):not(.nav__logo):not(.related__c) {
  color: #60a5fa !important;
}
[data-theme="dark"] a:not(.btn):not(.nav__cta):not(.nav__logo):not(.related__c):hover {
  color: #93c5fd !important;
}

/* Headers de artículos */
[data-theme="dark"] header.site-header {
  background: #1e293b !important;
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}
[data-theme="dark"] header.site-header span {
  color: #f1f5f9 !important;
}
[data-theme="dark"] .nav {
  background: rgba(15, 23, 42, .92) !important;
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}
[data-theme="dark"] .nav__links a,
[data-theme="dark"] .nav__links a:hover {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .nav__cta {
  background: #2563eb !important;
  color: #fff !important;
}

/* Breadcrumb */
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .breadcrumb a:hover {
  color: #64748b !important;
}

/* Headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: #f1f5f9 !important;
}

/* Meta / texto muted */
[data-theme="dark"] .article-meta,
[data-theme="dark"] .article-meta strong {
  color: #64748b !important;
}

/* Lead */
[data-theme="dark"] .lead {
  color: #94a3b8 !important;
  border-left-color: #3b82f6 !important;
}

/* Párrafos y listas */
[data-theme="dark"] p,
[data-theme="dark"] li {
  color: #cbd5e1 !important;
}

/* Cajas de contenido */
[data-theme="dark"] .highlight-box {
  background: #0f2540 !important;
  border-color: rgba(96, 165, 250, .25) !important;
}
[data-theme="dark"] .highlight-box h3 {
  color: #93c5fd !important;
}

[data-theme="dark"] .value-box {
  background: #0f2540 !important;
  border-color: rgba(96, 165, 250, .25) !important;
}
[data-theme="dark"] .value-box h3 {
  color: #93c5fd !important;
}

[data-theme="dark"] .warning-box {
  background: #1c1006 !important;
  border-color: rgba(234, 179, 8, .3) !important;
  border-left-color: #d97706 !important;
}
[data-theme="dark"] .warning-box strong {
  color: #fbbf24 !important;
}

/* Related links */
[data-theme="dark"] .related-links {
  background: #1e293b !important;
}
[data-theme="dark"] .related-links h3 {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .related-links li::before {
  color: #60a5fa !important;
}

/* FAQ items */
[data-theme="dark"] .faq-item {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
[data-theme="dark"] .faq-item h3 {
  color: #60a5fa !important;
}
[data-theme="dark"] .faq-item p {
  color: #94a3b8 !important;
}

/* Steps list */
[data-theme="dark"] .steps-list li {
  border-bottom-color: rgba(255, 255, 255, .06) !important;
  color: #cbd5e1 !important;
}

/* Brand cards, tipo cards, symptom cards */
[data-theme="dark"] .brand-card,
[data-theme="dark"] .tipo-card,
[data-theme="dark"] .symptom-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
[data-theme="dark"] .brand-card h3 {
  color: #f1f5f9 !important;
}
[data-theme="dark"] .brand-card p,
[data-theme="dark"] .tipo-card p,
[data-theme="dark"] .symptom-card p {
  color: #94a3b8 !important;
}
[data-theme="dark"] .symptom-card h4 {
  color: #f87171 !important;
}

/* Tablas */
[data-theme="dark"] .comparison-table th,
[data-theme="dark"] .price-table th {
  background: #1e3a5f !important;
}
[data-theme="dark"] .comparison-table td,
[data-theme="dark"] .price-table td {
  background: #1e293b !important;
  border-bottom-color: rgba(255, 255, 255, .06) !important;
  color: #cbd5e1 !important;
}
[data-theme="dark"] .comparison-table tr:nth-child(even) td,
[data-theme="dark"] .price-table tr:nth-child(even) td {
  background: #162032 !important;
}

/* Botón toggle — modo oscuro activo */
[data-theme="dark"] .theme-toggle {
  border-color: rgba(255, 255, 255, .2) !important;
  color: #e2e8f0;
}
[data-theme="dark"] .theme-toggle:hover {
  border-color: #60a5fa !important;
  background: rgba(96, 165, 250, .12) !important;
}

/* Footer (ya es oscuro, solo ajustar levemente) */
[data-theme="dark"] footer.site-footer {
  background: #080f1a !important;
}

/* ── Topbar (landing + blog con styles.css) en dark ─────────────────────── */
[data-theme="dark"] .topbar {
  background: rgba(6, 13, 24, .95) !important;
  border-bottom-color: rgba(96, 165, 250, .12) !important;
}
[data-theme="dark"] .topbar .theme-toggle {
  border-color: rgba(255, 255, 255, .2) !important;
}
/* Solo la nav-list del topbar (ul.nav), no el header.nav de artículos */
[data-theme="dark"] ul.nav a {
  color: #94a3b8 !important;
}
[data-theme="dark"] ul.nav a:hover {
  color: #e2e8f0 !important;
}
/* Header tipo "nav" en artículos del blog */
[data-theme="dark"] header.nav {
  background: rgba(6, 13, 24, .95) !important;
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}
[data-theme="dark"] .nav__links a,
[data-theme="dark"] .nav__links a:hover {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .nav__cta {
  background: #2563eb !important;
  color: #fff !important;
}
[data-theme="dark"] .logo__t {
  color: #f1f5f9 !important;
}