/**
 * 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):not(.cat-wa__lk):not(.waf) {
  color: #60a5fa !important;
}
[data-theme="dark"] a:not(.btn):not(.nav__cta):not(.nav__logo):not(.related__c):not(.cat-wa__lk):not(.waf):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;
}

/* ── Variables CSS no aplican → overrides explícitos para var(--blanco)/var(--gl)/var(--dark) ── */

/* Superficies blancas → oscuras */
[data-theme="dark"] .related,
[data-theme="dark"] aside.related { background: #162032 !important; }

[data-theme="dark"] .related__c { background: #1e293b !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .related__h,
[data-theme="dark"] .related__title,
[data-theme="dark"] .related__t { color: #f1f5f9 !important; }
[data-theme="dark"] .related__d { color: #94a3b8 !important; }

/* Elementos con color:var(--dark) no cubiertos por h1-h4/p/li */
[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .breadcrumb__inner a { color: #64748b !important; }
[data-theme="dark"] .art__meta,
[data-theme="dark"] .article__meta,
[data-theme="dark"] .art__meta strong,
[data-theme="dark"] .art-meta { color: #64748b !important; }
[data-theme="dark"] strong { color: inherit; }

/* Links dentro del body del artículo */
[data-theme="dark"] .art-body a,
[data-theme="dark"] .article__body a { color: #60a5fa !important; }

/* Nav links en header.nav de artículos */
[data-theme="dark"] header.nav .nav__links a { color: #e2e8f0 !important; }
[data-theme="dark"] header.nav .nav__links a:hover { color: #fff !important; }
[data-theme="dark"] header.nav { background: rgba(6,13,24,.95) !important; }

/* Breadcrumb del blog (sección nav.breadcrumb) */
[data-theme="dark"] nav.breadcrumb { background: #0f172a !important; border-bottom-color: rgba(255,255,255,.06) !important; }

/* Info/warn boxes */
[data-theme="dark"] .info-box { background: #0f2540 !important; border-left-color: #3b82f6 !important; }
[data-theme="dark"] .warn-box { background: #1c1006 !important; border-left-color: #d97706 !important; }

/* Tabla de precios (.pt) */
[data-theme="dark"] .pt { background: #1e293b !important; }
[data-theme="dark"] .pt th { background: #1e3a5f !important; color: #e2e8f0 !important; }
[data-theme="dark"] .pt td { background: #1e293b !important; color: #cbd5e1 !important; }

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

/* ── Trust bar (.tb) — mantener fondo oscuro en dark (var(--dark) se vuelve claro) ── */
[data-theme="dark"] .tb { background: #111827 !important; }
[data-theme="dark"] .tb__i { color: rgba(255,255,255,.75) !important; }

/* ── Chip claro — texto oscuro sobre fondo menta ── */
[data-theme="dark"] .chip { color: #0f172a !important; }

/* ── Chip oscuro — hacer visible en dark mode ── */
[data-theme="dark"] .chip--dk {
  color: #AAF0D1 !important;
  border-color: rgba(170,240,209,.55) !important;
  background: rgba(170,240,209,.15) !important;
}

/* ── WAF (botón flotante WhatsApp) — forzar blanco ── */
[data-theme="dark"] .waf { color: #fff !important; }
[data-theme="dark"] .waf svg { fill: white !important; }

/* ── cat-wa__lk (botón WhatsApp catálogo — no tiene clase .btn) ── */
[data-theme="dark"] .cat-wa__lk { color: #fff !important; }
[data-theme="dark"] .cat-wa__lk svg { fill: white !important; }

/* ── Botones btn--wa y btn--wlg — forzar blanco (por si hay override) ── */
[data-theme="dark"] .btn--wa,
[data-theme="dark"] .btn--wlg { color: #fff !important; }

/* ── Breadcrumb inline (dentro de .art-hero) — sin fondo oscuro ── */
[data-theme="dark"] .art-hero nav.breadcrumb,
[data-theme="dark"] .art-hero .breadcrumb { background: transparent !important; }

/* ── Hero Badge — banda estilo trust bar en el hero ── */
.hero__badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .85rem;
  background: rgba(170,240,209,.15);
  border: 1px solid rgba(170,240,209,.45);
  border-radius: 8px;
  padding: .5rem 1.1rem;
  font-size: .74rem;
  font-weight: 700;
  color: #3d8a6a;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero__badge__sep { opacity: .28; color: #3d8a6a; }
[data-theme="dark"] .hero__badge {
  background: rgba(170,240,209,.1) !important;
  border-color: rgba(170,240,209,.35) !important;
  color: #AAF0D1 !important;
}
[data-theme="dark"] .hero__badge__sep { color: #AAF0D1 !important; }

/* ── CTA Trust Strip — colores fijos porque .cta siempre tiene fondo oscuro ── */
.cta__badge {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .3rem 1.4rem;
  background: rgba(170,240,209,.12);
  border: 1px solid rgba(170,240,209,.38);
  border-radius: 8px;
  padding: .65rem 1.5rem;
  margin-bottom: 1.6rem;
  font-size: .76rem;
  font-weight: 700;
  color: #AAF0D1 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cta__badge span { color: #AAF0D1 !important; }
.cta__badge__sep { opacity: .3; }

/* ── 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;
}