/* ==========================================================================
   SISTEMA DE TEMAS CON CONTRASTE GARANTIZADO (WCAG AA)
   --------------------------------------------------------------------------
   Causa raíz de los problemas de contraste:
     1. El encabezado solo era "claro" para una lista fija de temas; Clínico
        (fondo blanco) recibía un encabezado NEGRO con letras azul oscuro.
     2. El tema "Abismo" no tenía colores definidos (mezclaba tarjetas oscuras
        con letras oscuras).
     3. Muchos componentes tenían colores fijos pensados solo para fondo oscuro
        (blanco translúcido, verde/rojo claro, dorado claro sobre blanco...).
   Solución: cada tema define un juego completo de "tokens" (fondo, superficie,
   texto, texto secundario, acento, texto-sobre-acento, encabezado). Todos los
   componentes clave leen esos tokens. Contrastes de texto ≥ 4.5:1.
   Se carga al final; no modifica los archivos base.
   ========================================================================== */

/* ---------- 0. Valores por defecto: derivados del propio tema ----------
   (cubre temas antiguos guardados en el navegador: lavanda, matcha, etc.) */
body {
    --t-bg: var(--paper, #0a0a0a);
    --t-surface: var(--paper-dark, #161412);
    --t-surface-2: var(--paper-dark, #1f1c19);
    --t-border: var(--card-border, rgba(128,128,128,0.2));
    --t-ink: var(--ink, #f5f2ec);
    --t-muted: var(--muted, #c9c3b8);
    --t-accent: var(--gold, #d4af37);
    --t-accent-ink: #111;
    --t-accent-soft: rgba(184, 151, 90, 0.14);
    --t-header-bg: var(--paper, #0a0a0c);
    --t-header-ink: var(--ink, #f5f2ec);
    --t-header-muted: var(--muted, #c9c3b8);
    --t-hover: rgba(128, 128, 128, 0.14);
    --t-red: #f87171;
    --t-green: #4ade80;
    --t-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* ---------- 1. Paletas por tema ---------- */

/* Por defecto (Planeta), "light" sin clase y Blanco: claro + dorado de marca */
body.planeta-theme,
body.white-theme,
body:not([class*="-theme"]) {
    --t-bg: #ffffff;
    --t-surface: #ffffff;
    --t-surface-2: #f4f2ee;
    --t-border: rgba(20, 17, 13, 0.13);
    --t-ink: #14110d;
    --t-muted: #57524a;
    --t-accent: #8a6a22;
    --t-accent-ink: #ffffff;
    --t-accent-soft: rgba(138, 106, 34, 0.10);
    --t-header-bg: rgba(255, 255, 255, 0.97);
    --t-header-ink: #14110d;
    --t-header-muted: #4a463f;
    --t-hover: rgba(20, 17, 13, 0.06);
    --t-red: #b42318;
    --t-green: #18794e;
    --t-shadow: 0 2px 12px rgba(20, 17, 13, 0.07);
}

/* Clínico: blanco + azul petróleo */
body.clinico-theme {
    --t-bg: #ffffff;
    --t-surface: #f6f9fc;
    --t-surface-2: #eaf2f8;
    --t-border: #d3e1ec;
    --t-ink: #0b2a45;
    --t-muted: #3f5a72;
    --t-accent: #0b7480;
    --t-accent-ink: #ffffff;
    --t-accent-soft: rgba(11, 116, 128, 0.10);
    --t-header-bg: rgba(255, 255, 255, 0.97);
    --t-header-ink: #0b2a45;
    --t-header-muted: #3f5a72;
    --t-hover: rgba(11, 42, 69, 0.06);
    --t-red: #b42318;
    --t-green: #18794e;
    --t-shadow: 0 2px 12px rgba(11, 52, 86, 0.07);
}

/* Oscuro: el de referencia (ya se veía bien), solo se formaliza */
body.dark-theme {
    --t-bg: #0a0a0a;
    --t-surface: #161412;
    --t-surface-2: #201d1a;
    --t-border: rgba(255, 255, 255, 0.10);
    --t-ink: #f5f2ec;
    --t-muted: #c9c3b8;
    --t-accent: #d4af37;
    --t-accent-ink: #14110d;
    --t-accent-soft: rgba(212, 175, 55, 0.14);
    --t-header-bg: rgba(10, 10, 12, 0.97);
    --t-header-ink: #f5f2ec;
    --t-header-muted: #c9c3b8;
    --t-hover: rgba(255, 255, 255, 0.07);
    --t-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* Sepia: papel envejecido + marrón */
body.sepia-theme {
    --t-bg: #f4ecd8;
    --t-surface: #faf4e6;
    --t-surface-2: #ebdfc2;
    --t-border: rgba(60, 40, 10, 0.18);
    --t-ink: #2a1f0e;
    --t-muted: #5a4628;
    --t-accent: #7a561a;
    --t-accent-ink: #ffffff;
    --t-accent-soft: rgba(122, 86, 26, 0.12);
    --t-header-bg: rgba(239, 228, 200, 0.97);
    --t-header-ink: #2a1f0e;
    --t-header-muted: #4f3d22;
    --t-hover: rgba(60, 40, 10, 0.07);
    --t-red: #9f2a17;
    --t-green: #2f6b2a;
    --t-shadow: 0 2px 12px rgba(60, 40, 10, 0.10);
}

/* Atardecer: durazno + terracota */
body.sunset-theme {
    --t-bg: #fcece3;
    --t-surface: #fff6f0;
    --t-surface-2: #f5dccd;
    --t-border: rgba(80, 30, 10, 0.16);
    --t-ink: #2e1208;
    --t-muted: #6b3a2a;
    --t-accent: #a3401f;
    --t-accent-ink: #ffffff;
    --t-accent-soft: rgba(163, 64, 31, 0.10);
    --t-header-bg: rgba(251, 230, 218, 0.97);
    --t-header-ink: #2e1208;
    --t-header-muted: #5e3123;
    --t-hover: rgba(80, 30, 10, 0.06);
    --t-red: #a3201f;
    --t-green: #2f6b2a;
    --t-shadow: 0 2px 12px rgba(80, 30, 10, 0.09);
}

/* Bosque: verde profundo + dorado */
body.forest-theme {
    --t-bg: #10241c;
    --t-surface: #173329;
    --t-surface-2: #1e3e32;
    --t-border: rgba(200, 230, 210, 0.14);
    --t-ink: #eef7f1;
    --t-muted: #b8d2c4;
    --t-accent: #e0bd4e;
    --t-accent-ink: #10241c;
    --t-accent-soft: rgba(224, 189, 78, 0.14);
    --t-header-bg: rgba(13, 30, 23, 0.97);
    --t-header-ink: #eef7f1;
    --t-header-muted: #b8d2c4;
    --t-hover: rgba(238, 247, 241, 0.07);
    --t-shadow: 0 6px 24px rgba(0, 0, 0, 0.40);
}

/* Abismo: azul noche + lavanda (antes sin definir) */
body.abyss-theme {
    --ink: #e8ebf7;
    --paper: #05070e;
    --paper-dark: #0d1222;
    --muted: #a9b1d6;
    --t-bg: #05070e;
    --t-surface: #0d1222;
    --t-surface-2: #151b31;
    --t-border: rgba(150, 165, 230, 0.16);
    --t-ink: #e8ebf7;
    --t-muted: #a9b1d6;
    --t-accent: #9aa8ff;
    --t-accent-ink: #05070e;
    --t-accent-soft: rgba(154, 168, 255, 0.14);
    --t-header-bg: rgba(6, 9, 18, 0.97);
    --t-header-ink: #e8ebf7;
    --t-header-muted: #a9b1d6;
    --t-hover: rgba(232, 235, 247, 0.07);
    --t-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* ---------- 2. Variables heredadas sincronizadas con los tokens ----------
   (todo el CSS antiguo que usa --ink, --gold, etc. queda coherente) */
body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
body.clinico-theme, body.dark-theme, body.sepia-theme,
body.sunset-theme, body.forest-theme, body.abyss-theme {
    --ink: var(--t-ink);
    --paper: var(--t-bg);
    --paper-dark: var(--t-surface-2);
    --muted: var(--t-muted);
    --gold: var(--t-accent);
    --gold-dark: var(--t-accent);
    --gold-light: var(--t-accent);
    --gold-bg: var(--t-accent-soft);
    --gold-border: color-mix(in srgb, var(--t-accent) 35%, transparent);
    --card-bg: var(--t-surface);
    --card-border: var(--t-border);
    --card-hover-border: color-mix(in srgb, var(--t-accent) 55%, transparent);
    background-color: var(--t-bg) !important;
    color: var(--t-ink) !important;
}

/* El texto con sombra de "vidrio" se veía borroso en temas claros */
body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
body.clinico-theme, body.sepia-theme, body.sunset-theme {
    --glass-shadow: none;
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: 1px solid var(--t-border);
}

/* ---------- 3. Encabezado ---------- */
body[class] .main-header-editorial {
    background: var(--t-header-bg) !important;
    border-bottom: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow) !important;
}
body[class] .brand-name { color: var(--t-header-ink) !important; }
body[class] .brand-tagline { color: var(--t-accent) !important; }
body[class] .mobile-menu-btn { color: var(--t-header-ink) !important; }

body[class] .subnav-item { color: var(--t-header-muted); }
body[class] .subnav-item:hover { color: var(--t-header-ink); background: var(--t-hover); }
body[class] .subnav-item.active { color: var(--t-accent); background: var(--t-accent-soft); }
body[class] .subnav-highlight-red { color: var(--t-red) !important; }
body[class] .subnav-highlight-green { color: var(--t-green) !important; }
body[class] .subnav-highlight-gold { color: var(--t-accent) !important; }
body[class] .subnav-highlight-red:hover,
body[class] .subnav-highlight-green:hover,
body[class] .subnav-highlight-gold:hover { filter: brightness(1.12); }
body[class] .subnav-sep { background: var(--t-border); }
@media (min-width: 901px) {
    body[class] .subnav-container {
        background: var(--t-hover);
        border: 1px solid var(--t-border);
    }
}
@media (max-width: 900px) {
    /* Menú lateral del celular: fondo sólido del tema */
    body[class] .header-subnav {
        background: var(--t-bg) !important;
        border-right: 1px solid var(--t-border) !important;
    }
    body[class] .subnav-item { background: var(--t-hover); color: var(--t-ink); }
}

body[class] .header-search-bar {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
}
body[class] .header-search-bar:focus-within {
    border-color: var(--t-accent) !important;
    box-shadow: 0 0 0 3px var(--t-accent-soft) !important;
}
body[class] .header-search-input,
body[class] #mobile-search-input { color: var(--t-ink) !important; text-shadow: none !important; }
body[class] .header-search-input::placeholder,
body[class] #mobile-search-input::placeholder { color: var(--t-muted) !important; opacity: 1; }
body[class] .header-search-btn { color: var(--t-header-muted); }
body[class] .header-search-btn:hover { color: var(--t-accent); }

body[class] .header-action-link { color: var(--t-header-muted); }
body[class] .header-action-link:hover { color: var(--t-header-ink); background: var(--t-hover); }
body[class] .focus-action {
    color: var(--t-accent) !important;
    background: var(--t-accent-soft) !important;
    border: 1px solid color-mix(in srgb, var(--t-accent) 40%, transparent) !important;
}

/* ---------- 4. Barra de categorías ---------- */
body[class] .categories-carousel-wrapper {
    background: var(--t-bg) !important;
    border-bottom: 1px solid var(--t-border) !important;
}
body[class] .categories-carousel .category-pill:not(.active) {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-ink) !important;
}
body[class] .categories-carousel .category-pill:not(.active):hover {
    border-color: var(--t-accent) !important;
}
body[class] .categories-carousel .category-pill.active,
body[class] .categories-carousel .category-pill.active:nth-child(n) {
    background: var(--t-accent) !important;
    color: var(--t-accent-ink) !important;
}
body[class] .categories-carousel .category-pill.pill-ver-todas:not(.active) {
    background: transparent !important;
    border: 1px dashed var(--t-accent) !important;
    color: var(--t-accent) !important;
}
body[class] .cat-nav-arrow { color: var(--t-ink); }

/* ---------- 5. Catálogo y tarjetas ---------- */
body[class] .catalogo-header-title { color: var(--t-ink) !important; }
body[class] .custom-select-catalog {
    background: var(--t-surface-2) !important;
    color: var(--t-ink) !important;
    border: 1px solid var(--t-border) !important;
}
body[class] .book-card {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow) !important;
}
body[class] .book-card:hover { border-color: var(--t-accent) !important; }
body[class] .book-card-title { color: var(--t-ink) !important; }
body[class] .book-card-author { color: var(--t-muted) !important; opacity: 1 !important; }
body[class] .book-card-year,
body[class] .author-label { color: var(--t-muted) !important; }
body[class] .book-cat-tag {
    background: var(--t-accent-soft) !important;
    color: var(--t-accent) !important;
    border: 1px solid color-mix(in srgb, var(--t-accent) 30%, transparent) !important;
    box-shadow: none !important;
}
body[class] .btn-read-book {
    background: var(--t-accent) !important;
    color: var(--t-accent-ink) !important;
}
body[class] .btn-read-book:hover { filter: brightness(1.08); }
body[class] .btn-open-pdf {
    color: var(--t-accent) !important;
    border-color: color-mix(in srgb, var(--t-accent) 40%, transparent) !important;
    background: var(--t-accent-soft) !important;
}
body[class] .carousel-section-title { color: var(--t-ink); }
body[class] .btn-ver-todo { color: var(--t-accent); }
body[class] .carousel-arrow {
    background: var(--t-surface) !important;
    color: var(--t-ink) !important;
    border: 1px solid var(--t-border) !important;
}
body[class] .carousel-arrow:hover {
    background: var(--t-accent) !important;
    color: var(--t-accent-ink) !important;
}
body[class] .empty-state-catalogo { color: var(--t-ink); }
body[class] .categoria-intro {
    background: var(--t-surface) !important;
    border-color: var(--t-border) !important;
}

/* ---------- 6. Lector ---------- */
body[class] .lector-top-header {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
}
body[class] .lector-book-info h1 { color: var(--t-ink) !important; }
body[class] .icon-btn { color: var(--t-ink); border-color: var(--t-border); }
body[class] .icon-btn:hover { color: var(--t-accent); border-color: var(--t-accent); background: var(--t-accent-soft); }
@media (max-width: 600px) {
    body[class] .lector-actions-wrapper {
        background: var(--t-header-bg) !important;
        border-top: 1px solid var(--t-border) !important;
    }
}
body[class] .lector-companion-card {
    background: var(--t-surface) !important;
    border-color: var(--t-border) !important;
    color: var(--t-ink) !important;
}
body[class] .lector-companion-card h3 { color: var(--t-ink) !important; }
body[class] .lector-companion-card p.desc { color: var(--t-muted) !important; }
body[class] .lector-textarea-notas {
    background: var(--t-surface-2) !important;
    color: var(--t-ink) !important;
    border-color: var(--t-border) !important;
}
body[class] .lector-textarea-notas::placeholder { color: var(--t-muted) !important; }

/* ---------- 7. Botones del panel de Apariencia ---------- */
body[class] .btn-speed.active {
    background: var(--t-accent) !important;
    color: var(--t-accent-ink) !important;
    border-color: var(--t-accent) !important;
}
/* Tema activo marcado en el selector */
#menu-lectura .btn-speed.tema-activo {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}

/* ==========================================================================
   8. ALTO CONTRASTE PARA TEMAS CLAROS (Blanco / Planeta por defecto)
   --------------------------------------------------------------------------
   Causa de las letras "opacas": varios textos e íconos tenían opacidad
   (0.55–0.85) heredada del diseño oscuro + grises medios. Sobre blanco eso
   se ve lavado. Aquí: tinta casi negra, gris secundario oscuro (≥ 10:1),
   dorado más profundo (≥ 7:1) y opacidad 1 en textos e íconos.
   ========================================================================== */
body.planeta-theme,
body.white-theme,
body:not([class*="-theme"]) {
    --t-ink: #0a0a0a;
    --t-muted: #2e2a24;
    --t-accent: #6b4f12;
    --t-accent-soft: rgba(107, 79, 18, 0.10);
    --t-border: rgba(10, 10, 10, 0.18);
    --t-header-bg: #ffffff;
    --t-header-ink: #0a0a0a;
    --t-header-muted: #1c1a17;
    --t-hover: rgba(10, 10, 10, 0.07);
    --t-red: #a01c12;
    --t-green: #0f6b42;
}

/* Quitar opacidades que "lavan" textos e íconos en TODOS los temas claros */
body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
body.clinico-theme, body.sepia-theme, body.sunset-theme {
    -webkit-font-smoothing: antialiased;
}
:is(body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
    body.clinico-theme, body.sepia-theme, body.sunset-theme)
:is(.subnav-item [data-lucide], .subnav-item svg,
    .header-action-link svg, .header-search-btn svg,
    .categories-carousel .category-pill svg,
    .categories-carousel .category-pill i[data-lucide],
    .category-pill .pill-count, .cat-nav-badge, .cat-nav-arrow,
    .book-card-author, .book-card-year, .continuar-autor,
    .lector-companion-card p.desc, .categoria-intro p,
    .icon-btn svg, .carousel-arrow svg) {
    opacity: 1 !important;
}

/* Etiquetas de navegación, acciones y pestañas: más peso = más legibles */
:is(body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
    body.clinico-theme, body.sepia-theme, body.sunset-theme)
:is(.subnav-item, .header-action-link, .btn-ver-todo, .category-pill) {
    font-weight: 600;
}
:is(body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
    body.clinico-theme, body.sepia-theme, body.sunset-theme)
:is(.subnav-item, .header-action-link, .icon-btn, .carousel-arrow,
    .category-pill, .header-search-btn) svg {
    stroke-width: 2.25;
}

/* Contadores y categorías vacías: legibles sin perder la jerarquía */
:is(body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
    body.clinico-theme, body.sepia-theme, body.sunset-theme)
.category-pill .pill-count {
    background: var(--t-hover) !important;
    color: var(--t-ink) !important;
}
:is(body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
    body.clinico-theme, body.sepia-theme, body.sunset-theme)
.category-pill.active .pill-count {
    background: rgba(255, 255, 255, 0.22) !important;
    color: var(--t-accent-ink) !important;
}
:is(body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
    body.clinico-theme, body.sepia-theme, body.sunset-theme)
.category-pill.pill-vacia {
    opacity: 1 !important;
    color: var(--t-muted) !important;
    border-style: dashed !important;
}
:is(body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
    body.clinico-theme, body.sepia-theme, body.sunset-theme)
:is(.cat-nav-badge) {
    background: var(--t-hover) !important;
    color: var(--t-ink) !important;
}

/* Textos secundarios con el gris oscuro del tema (no grises fijos claros) */
:is(body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
    body.clinico-theme, body.sepia-theme, body.sunset-theme)
:is(.book-card-year, .continuar-autor, .categoria-intro p, .author-label) {
    color: var(--t-muted) !important;
}
:is(body.planeta-theme, body.white-theme, body:not([class*="-theme"]),
    body.clinico-theme, body.sepia-theme, body.sunset-theme)
:is(.book-card-title, .carousel-section-title, .catalogo-header-title,
    .continuar-titulo, .categoria-intro h2, .categoria-intro h3) {
    color: var(--t-ink) !important;
    text-shadow: none !important;
}