/**
 * ============================================================================
 * RELATANDO.COM — v11.6.1 · TEMA CLARO/OSCURO EN TODA LA WEB
 * ----------------------------------------------------------------------------
 * El tema (🕯️ sepia / 🌑 oscuro) deja de ser exclusivo de los relatos: ahora
 * vale en la portada, archivos, bestiario, páginas y 404. Aquí va lo que hace
 * legible el "cromo" del sitio en modo claro: cabecera, navegación, dock,
 * buscador, pie y la barra flotante de lectura + Mi grimorio (que hasta ahora
 * se quedaban oscuros a propósito).
 * Especificidad 0,4,x (clase repetida 4 veces) para batir sin `!important`
 * masivo a las reglas `!important` de 2+ clases del tema.
 * ============================================================================
 */

/* ---------- 1. SELECTOR DE TEMA SEGMENTADO (moderno y evidente) ---------- */
.rel-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rel-ts {
    position: relative;
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* el pulgar que se desliza (3 posiciones: Auto · Claro · Oscuro) */
.rel-ts-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    height: calc(100% - 6px);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.95), rgba(139, 90, 19, 0.9));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transform: translate3d(0, 0, 0);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

/* El pulgar lo mueve la elección REAL (atributo del envoltorio), no el tema
   pintado: en "Auto" el <html> lleva el tema del sistema, pero el pulgar se
   queda en el primer segmento. */
#rel-theme-switch[data-rel-choice="sepia"] .rel-ts-thumb {
    transform: translate3d(100%, 0, 0);
}

#rel-theme-switch[data-rel-choice="negro"] .rel-ts-thumb {
    transform: translate3d(200%, 0, 0);
}

.rel-ts-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 74px;
    padding: 6px 12px;
    border: 0;
    background: none;
    border-radius: 999px;
    color: rgba(230, 237, 233, 0.62);
    font: 700 0.72rem/1 "Cinzel", serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.25s ease;
}

.rel-ts-btn[aria-pressed="true"] {
    color: #22190f;
}

.rel-ts-btn:hover {
    color: #fff;
}

.rel-ts-btn:focus-visible {
    outline: 2px solid var(--color-accent, #00ff88);
    outline-offset: 3px;
}

.rel-ts-ico {
    font-size: 0.95rem;
    line-height: 1;
}

/* En móvil, solo los iconos (la cabecera va justa: logo + idioma + menú) */
.rel-ts-label {
    display: none;
}

@media (max-width: 560px) {
    .rel-theme-switch .rel-ts-btn {
        min-width: 0;
        padding: 5px 9px;
        gap: 0;
    }
    .rel-theme-switch .rel-ts-btn .rel-ts-ico {
        font-size: 0.9rem;
    }
}

@media (min-width: 561px) {
    .rel-ts-label {
        display: inline;
    }
}

/* En modo claro el interruptor va en papel */
html.rel-theme-sepia .rel-ts {
    background: rgba(139, 90, 19, 0.1);
    border-color: rgba(139, 90, 19, 0.4);
    box-shadow: none;
}

html.rel-theme-sepia .rel-ts-thumb {
    box-shadow: 0 2px 8px rgba(90, 60, 20, 0.28);
}

html.rel-theme-sepia .rel-ts-btn {
    color: rgba(43, 33, 24, 0.62);
}

html.rel-theme-sepia .rel-ts-btn[aria-pressed="true"] {
    color: #22190f;
}

html.rel-theme-sepia .rel-ts-btn:hover {
    color: #2b2118;
}

@media (prefers-reduced-motion: reduce) {
    .rel-ts-thumb {
        transition: none;
    }
}

/* ---------------------------------------------------------------- *
   2. CROMO DEL SITIO EN MODO PAPEL (cabecera, nav, dock, buscador, pie)
 * ---------------------------------------------------------------- */

/* Cabecera de cristal: papel translúcido + tinta marrón */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .global-glass-header,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .site-header,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .main-navigation,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .resizable-nav,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body [class*="floating-dock"],
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .crypt-minimal-command-bar {
    background: rgba(246, 237, 218, 0.9) !important;
    background-image: none !important;
    border-color: rgba(139, 90, 19, 0.28) !important;
    box-shadow: 0 6px 24px rgba(90, 60, 20, 0.14) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
}

/* Todo el texto e iconos de la cabecera/nav a tinta */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .global-glass-header *,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .site-header *,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .main-navigation *,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .resizable-nav *,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body [class*="floating-dock"] *,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .crypt-minimal-command-bar * {
    color: #2b2118 !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    border-color: rgba(139, 90, 19, 0.22) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .global-glass-header a,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .main-navigation a,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .resizable-nav a {
    color: #6b4a12 !important;
    -webkit-text-fill-color: #6b4a12 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .global-glass-header a:hover,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .main-navigation a:hover,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .main-navigation .current-menu-item > a {
    color: #c41e3a !important;
    -webkit-text-fill-color: #c41e3a !important;
}

/* Logo: la marca en oro viejo sobre papel y sin glow */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .site-branding,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .custom-logo-link,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .site-title,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .site-title a {
    color: #8a5a13 !important;
    -webkit-text-fill-color: #8a5a13 !important;
    filter: none !important;
}

/* Buscador */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body input[type="search"],
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body input[type="text"],
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .search-form input {
    background: #fffdf7 !important;
    color: #2b2118 !important;
    -webkit-text-fill-color: #2b2118 !important;
    border: 1px solid rgba(139, 90, 19, 0.35) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body ::placeholder {
    color: #7a6a52 !important;
    -webkit-text-fill-color: #7a6a52 !important;
}

/* Pie y barra inferior */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .site-footer,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .site-footer *,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .relatando-footer,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .relatando-footer * {
    color: #4a3a26 !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .site-footer {
    background: #e6d9c0 !important;
    background-image: none !important;
    border-top: 1px solid rgba(139, 90, 19, 0.25) !important;
}

/* ---------------------------------------------------------------- *
   3. LA BARRA FLOTANTE DE LECTURA Y MI GRIMORIO TAMBIÉN EN PAPEL
   (hasta ahora se mantenían oscuras a propósito: en sepia cantaban)
 * ---------------------------------------------------------------- */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar {
    background: rgba(246, 237, 218, 0.94) !important;
    border: 1px solid rgba(139, 90, 19, 0.3) !important;
    box-shadow: 0 10px 26px rgba(90, 60, 20, 0.2) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar .rel-lt-btn {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: #4a3a26 !important;
    -webkit-text-fill-color: #4a3a26 !important;
    text-shadow: none !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar .rel-lt-btn:hover,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar .rel-lt-btn:focus-visible {
    background: rgba(139, 90, 19, 0.12) !important;
    color: #2b2118 !important;
    -webkit-text-fill-color: #2b2118 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar .rel-lt-btn[aria-pressed="true"],
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar .rel-lt-btn[data-rel-amb][aria-pressed="true"] {
    background: rgba(139, 90, 19, 0.22) !important;
    border-color: rgba(139, 90, 19, 0.5) !important;
    color: #2b2118 !important;
    -webkit-text-fill-color: #2b2118 !important;
}

/* La barra se separa del papel con un borde: que no se confunda con el texto */
html.rel-theme-sepia .rel-lectura-toolbar::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    pointer-events: none;
}

/* Bocadillos de ayuda (data-tip) en papel */
html.rel-theme-sepia body .rel-lt-btn[data-tip]:hover::after,
html.rel-theme-sepia body .rel-lt-btn[data-tip]:focus-visible::after {
    background: rgba(43, 33, 24, 0.95) !important;
    color: #f6edda !important;
}

/* Mi grimorio */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-grimorio {
    background: rgba(246, 237, 218, 0.97) !important;
    border: 1px solid rgba(139, 90, 19, 0.35) !important;
    box-shadow: 0 18px 40px rgba(90, 60, 20, 0.25) !important;
    color: #2b2118 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-grimorio * {
    color: #2b2118 !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    border-color: rgba(139, 90, 19, 0.25) !important;
}

html.rel-theme-sepia body .rel-grimorio a,
html.rel-theme-sepia body .rel-grimorio .rel-grimorio-item a {
    color: #8a5a13 !important;
    -webkit-text-fill-color: #8a5a13 !important;
}

html.rel-theme-sepia body .rel-grimorio-clear,
html.rel-theme-sepia body .rel-grimorio-close {
    background: rgba(139, 90, 19, 0.1) !important;
    color: #2b2118 !important;
    -webkit-text-fill-color: #2b2118 !important;
    border-color: rgba(139, 90, 19, 0.3) !important;
}

/* Estados activos de tamaño de letra en papel */
html.rel-theme-sepia body .rel-lt-btn.rel-lt-on,
html.rel-theme-sepia body .rel-lt-btn[aria-pressed="true"] {
    box-shadow: none !important;
}

/* ---------------------------------------------------------------- *
   4. LA PORTADA EN MODO PAPEL
   La portada no usa la cabecera del blog: trae su propio <style> en línea con
   variables de diseño y un hero fotográfico a pantalla completa. En claro el
   hero se "lava" con un velo crema (la foto se queda como textura, la tinta
   manda) y las tarjetas pasan a papel con filo de oro viejo.
 * ---------------------------------------------------------------- */

/* El velo va ENCIMA de la foto: ::after es el último hijo del fondo del hero */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-hero-bg-img {
    opacity: .5 !important;
    filter: sepia(.5) brightness(1.06) contrast(.95) saturate(.9) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-hero-backdrop::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background-color: transparent !important;
    background-image: linear-gradient(180deg,
            rgba(242, 231, 211, .76) 0%,
            rgba(242, 231, 211, .54) 55%,
            rgba(242, 231, 211, .88) 100%) !important;
}

/* La niebla espectral del hero (canvas) se apaga en papel: aquí sobra */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-fog-canvas {
    opacity: .28 !important;
    mix-blend-mode: multiply !important;
}

/* Titular, entradilla, cita y sello del hero, en tinta */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-hero-title {
    color: #2b2118 !important;
    -webkit-text-fill-color: #2b2118 !important;
    text-shadow: 0 1px 0 rgba(255, 253, 247, .6) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-hero-sub {
    color: #8a5a13 !important;
    -webkit-text-fill-color: #8a5a13 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-hero-quote {
    background: rgba(255, 253, 247, .8) !important;
    background-image: none !important;
    border-left: 2px solid #8a5a13 !important;
    color: #2b2118 !important;
    box-shadow: 0 8px 22px rgba(90, 60, 20, .1) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-quote-author {
    color: #6b4a12 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-brand-badge {
    background: rgba(255, 253, 247, .82) !important;
    background-image: none !important;
    color: #6b4a12 !important;
    border-color: rgba(139, 90, 19, .45) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-pulse-dot {
    background: #c41e3a !important;
}

/* Las tarjetas, el banner del test y el telón: papel con filo de oro viejo */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-compact-card,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-content,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-media,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-badge,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-badge-floating,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .slide-card,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .slide-card-body,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-survival-banner {
    background-color: #fffdf7 !important;
    background-image: none !important;
    border: 1px solid rgba(139, 90, 19, .2) !important;
    box-shadow: 0 8px 22px rgba(90, 60, 20, .08) !important;
    color: #2b2118 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-compact-card,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .slide-card {
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* El velo de niebla sobre las tarjetas y los degradados de las fotos: fuera */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-mist-veil,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .slide-card-overlay,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .slide-card-media::after,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-media::after {
    opacity: 0 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-heading,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .slide-card-title {
    color: #2b2118 !important;
    -webkit-text-fill-color: #2b2118 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-description,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-symbol {
    color: #4a3a26 !important;
    -webkit-text-fill-color: #4a3a26 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-action,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .slide-card-cta {
    color: #8a5a13 !important;
    -webkit-text-fill-color: #8a5a13 !important;
    border-color: rgba(139, 90, 19, .4) !important;
}

/* El reclamo de la portada: en papel, sello en oro viejo en vez de verde fatuo */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .survival-banner-cta {
    background-color: #8a5a13 !important;
    background-image: none !important;
    color: #fff6e2 !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .survival-banner-cta .cta-free-pill,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .survival-banner-cta span {
    color: #fff6e2 !important;
    -webkit-text-fill-color: #fff6e2 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .survival-banner-cta .cta-free-pill {
    background: rgba(43, 33, 24, .32) !important;
}

/* ---------------------------------------------------------------- *
   5. CONTRASTE DE LA CABECERA DEL RELATO EN TEMA OSCURO (regresión fina)
 * ---------------------------------------------------------------- */
html.rel-theme-negro .rel-ts {
    background: rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------- *
   6. QUE NADA SE MUESTRE SIN JS / SIN TEMAS
 * ---------------------------------------------------------------- */
html:not(.rel-js) .rel-theme-switch {
    display: none;
}

/* ---------------------------------------------------------------- *
   7. MÁS NITIDEZ EN MODO PAPEL (v11.6.2)
   Petición: "en el modo claro debería tener algo más de contraste con
   algunos tonos del tema para que se vea con nitidez los textos y todo
   en general". Se ataca la causa real del aspecto difuminado:
     a) las superficies de cristal seguían siendo translúcidas (dejaban
        pasar el fondo y se veían "fogosas") -> ahora son papel casi opaco;
     b) las tintas secundarias eran demasiado claras -> tinta vieja oscura.
   Se mantiene la identidad: papel cálido + oro viejo + tinta marrón.
 * ---------------------------------------------------------------- */

/* (a) Superficies de papel: opacas y nítidas, sin niebla */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .global-glass-header,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .site-header,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .main-navigation,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .resizable-nav,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body [class*="floating-dock"],
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .crypt-minimal-command-bar {
    background-color: rgba(250, 243, 229, 0.975) !important;
    background-image: none !important;
    border-color: rgba(120, 76, 12, 0.42) !important;
    box-shadow: 0 6px 22px rgba(90, 60, 20, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.05) !important;
    backdrop-filter: blur(6px) saturate(1.05) !important;
}

/* (b) Tintas secundarias un punto más oscuras: la misma paleta, más firme */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .global-glass-header a,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .main-navigation a,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .resizable-nav a {
    color: #4f3509 !important;
    -webkit-text-fill-color: #4f3509 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .global-glass-header .logo,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .global-glass-header .logo::after {
    color: #6d460c !important;
    -webkit-text-fill-color: #6d460c !important;
}

/* El interruptor segmentado gana cuerpo sobre el papel */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-ts {
    background: rgba(139, 90, 19, 0.14) !important;
    border-color: rgba(120, 76, 12, 0.5) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-ts-btn {
    color: rgba(32, 24, 12, 0.72) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-ts-thumb {
    background: linear-gradient(135deg, #8a5a13 0%, #63400a 100%) !important;
    box-shadow: 0 2px 8px rgba(60, 40, 10, 0.35) !important;
}

/* La portada: subtítulo, acciones de tarjeta y descripciones, más legibles */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-hero-sub,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-quote-author,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-brand-badge,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-action,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .slide-card-cta {
    color: #6b4409 !important;
    -webkit-text-fill-color: #6b4409 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-description,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-card-symbol,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .slide-card-body p {
    color: #3a2c1b !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .portal-hero-title {
    color: #1d1509 !important;
    -webkit-text-fill-color: #1d1509 !important;
    text-shadow: 0 1px 0 rgba(255, 253, 247, 0.75) !important;
}

/* La burbuja de navegación, también en papel */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .global-glass-header.is-docked {
    background: rgba(250, 243, 229, 0.985) !important;
    border-color: rgba(120, 76, 12, 0.5) !important;
    box-shadow: 0 14px 40px rgba(60, 36, 8, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .dock-categories-flyout {
    background: rgba(250, 243, 229, 0.99) !important;
    border-color: rgba(120, 76, 12, 0.45) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .dock-categories-flyout a {
    color: #4f3509 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .dock-more-cats-btn {
    background: rgba(139, 90, 19, 0.14) !important;
    border-color: rgba(120, 76, 12, 0.5) !important;
    color: #6b4409 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .nav-spotlight-pill {
    background: rgba(139, 90, 19, 0.14) !important;
    border-color: rgba(120, 76, 12, 0.5) !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   8. BARRA DE OPCIONES FLOTANTE EN MODO PAPEL (v11.6.4)
   En claro, las etiquetas y ayudas de cada botón estaban en negro y no se
   leían sobre el fondo crema. Se pasan a la tinta del tema.
   --------------------------------------------------------------------------- */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar * {
    color: #4f3509 !important;
    -webkit-text-fill-color: #4f3509 !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar [aria-current="true"],
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar .is-active,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .rel-lectura-toolbar .rel-lt-btn[aria-pressed="true"] {
    color: #1d1509 !important;
    -webkit-text-fill-color: #1d1509 !important;
}