/* ================================================================
   MexCloud — Sistema de diseño (núcleo de tokens y temas)
   ----------------------------------------------------------------
   Hereda la identidad de WebDav MexMail: mismos nombres de token,
   misma estética base (radios, sombras, tipografía, densidad).

   Cuatro temas seleccionables (Fase 3):
     - Sistema      → sin data-theme, sigue prefers-color-scheme.
     - Claro        → [data-theme="claro"] (también el :root por defecto).
     - Oscuro       → [data-theme="oscuro"].
     - Alto contraste → [data-theme="contraste"].

   Anti-parpadeo: aplicar el tema ANTES de pintar. En el <head>,
   antes de este CSS:
     <script>(function(){var t=localStorage.getItem('mexcloud-tema');
       if(t&&t!=='sistema')document.documentElement.setAttribute('data-theme',t);})();</script>
   ================================================================ */

/* ---- Tipografía auto-hospedada (regla del proyecto: nada de CDN) ----
   Fraunces solo la usa el tema «Vainilla». El navegador NO la descarga si ninguna regla
   activa la referencia, así que los demás temas no pagan estos 72 KB. */
/* Fraunces es una tipografía VARIABLE: un solo archivo cubre todo el rango de pesos, y se
   declara con `font-weight: 100 900` en vez de un @font-face por peso. Don Centavo la
   sirve tres veces (Regular/SemiBold/Black son el MISMO archivo, md5 idéntico) y lo mismo
   con Inter: son ~250 KB descargados de más. Aquí va una sola vez, 36 KB. */
@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/Fraunces-Variable.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}

/* Inter (SIL Open Font License), la letra de TODA la interfaz. Antes se pedía por nombre
   sin hospedarla: cada equipo ponía la suya (Segoe en Windows, Roboto en Android, San
   Francisco en Mac) y la app se veía distinta en cada uno (revisión visual, 2026-10-28,
   etapa 0). Variable: un archivo por alfabeto; el «ext» (ā, ő, ș…) solo se baja si una
   página lo usa, por el unicode-range. Español completo cabe en el latino: 48 KB. */
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-Variable-latin.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-Variable-latin-ext.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* VT323 (SIL Open Font License): la letra de terminal del tema «Commodore» (solo títulos
   y monoespaciada). 17 KB, y como Fraunces, no se baja si ese tema no está puesto. */
@font-face {
    font-family: 'VT323';
    src: url('/assets/fonts/VT323-latin.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}

/* Baloo 2 (SIL Open Font License): redondeada y con mucho carácter, para el tema
   «Aventura». Variable y solo el subconjunto latino: 33 KB, y el navegador NO la
   descarga si ese tema no está puesto, igual que con Fraunces. */
@font-face {
    font-family: 'Baloo 2';
    src: url('/assets/fonts/Baloo2-Variable.woff2') format('woff2');
    font-weight: 400 800; font-style: normal; font-display: swap;
}

/* ---- Estética base: tokens que los temas PUEDEN redefinir ----
   Antes decía «que NO cambian entre temas». Se abrieron a propósito: un tema es una
   identidad completa (tipografía y forma), no solo una paleta. Como `:root` y
   `[data-theme=…]` tienen la MISMA especificidad, basta con que el bloque del tema vaya
   después en este archivo para que gane. */
:root {
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-full: 9999px;

    --shadow-sm:  0 1px  3px var(--color-shadow);
    --shadow-md:  0 4px  6px var(--color-shadow);
    --shadow-lg:  0 10px 25px var(--color-shadow);

    --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
    /* Tipografía de títulos. Por defecto la misma del cuerpo: así los temas actuales no
       cambian ni un pixel, y un tema con letra de display solo tiene que redefinirla. */
    --font-title: var(--font-sans);
    --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
    --font-size:  14px;
    --line-height: 1.6;

    /* Escala tipográfica (revisión visual, etapa 0, 2026-10-28). Antes había ~70 tamaños
       sueltos (0.78, 0.8, 0.82rem…); se juntaron en estos, al más cercano (±1 px). Un
       tamaño nuevo usa UNO DE ESTOS: si ninguno sirve, se discute antes de inventar otro.
       Los temas pueden redefinirlos (una letra más ancha, una escala más grande). */
    --t-2xs: 0.7rem;   /* 11 px: sellos, contadores */
    --t-xs:  0.75rem;  /* 12 px: notas al pie, fechas */
    --t-sm:  0.8rem;   /* 13 px: texto secundario */
    --t-md:  0.85rem;  /* 14 px: listas, botones chicos */
    --t-base: 0.9rem;  /* 14 px: texto de controles */
    --t-lg:  1rem;     /* 16 px */
    --t-xl:  1.15rem;  /* 18 px: subtítulos */
    --t-2xl: 1.35rem;  /* 22 px */
    --t-3xl: 1.5rem;   /* 24 px: títulos */
    --t-4xl: 1.8rem;   /* 29 px */
    --t-5xl: 2.4rem;   /* 38 px: cifras grandes, reloj */
    --t-6xl: 3.6rem;   /* 58 px */

    /* Espacios: múltiplos de 4. Para lo NUEVO y lo que se toque (no se barrió lo de antes:
       mover márgenes a ciegas sí cambia cómo se ve). */
    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;

    --sidebar-width:  240px;
    --navbar-height:  56px;
    --transition:     0.2s ease;
}

/* ---- Scrollbars y controles nativos combinados con el tema ---- */
/* color-scheme hace que el navegador pinte controles nativos (y scrollbars por
   defecto) en claro u oscuro según el tema, evitando las barras blancas en oscuro. */
:root,
[data-theme="claro"],
[data-theme="contraste"],
[data-theme="vainilla"] { color-scheme: light; }
[data-theme="aventura"] { color-scheme: light; }
[data-theme="oscuro"] { color-scheme: dark; }
[data-theme="madrugada"] { color-scheme: dark; }
[data-theme="carbon"] { color-scheme: dark; }
[data-theme="aurora"] { color-scheme: dark; }
[data-theme="obsidiana"],
[data-theme="commodore"] { color-scheme: dark; }
[data-theme="papel"],
[data-theme="amanecer"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { color-scheme: dark; }
}


/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
/* WebKit/Blink: pulgar sutil (con «padding» por el borde transparente), pista invisible. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); background-clip: padding-box; }

/* ---- Claro (por defecto) — identidad WebDav MexMail ---- */
:root,
[data-theme="claro"] {
    /* Carpetas de la copia de un Servidor EnlacesPYME (0220): violeta, lejos del
       ámbar, el azul personal y el verde compartida. Cada tema pone el suyo. */
    --carpeta-oficina:   #7c3aed;
    --carpeta-boveda:    #e11d48;
    --color-bg:          #f5f7fa;
    --color-surface:     #ffffff;
    --color-surface-2:   #eef1f6;
    --color-border:      #d8dde6;
    --color-text:        #1a202c;
    --color-text-2:      #4a5568;
    --color-text-muted:  #718096;
    --color-primary:     #2563eb;
    --color-primary-h:   #1d4ed8;
    --color-primary-fg:  #ffffff;
    --color-success:     #16a34a;
    --color-success-fg:  #011a09;   /* texto sobre el verde: 5.53:1 */
    --color-warning:     #d97706;
    --color-danger:      #dc2626;
    --color-info:        #0891b2;
    --color-sidebar-bg:  #eef1f6;
    --color-sidebar-fg:  #334155;
    --color-sidebar-act: #2563eb;
    --color-shadow:      rgba(0, 0, 0, 0.08);
    --color-overlay:     rgba(0, 0, 0, 0.45);
}

/* ---- Sistema: sin data-theme, sigue al S.O. cuando prefiere oscuro ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --carpeta-oficina:   #a78bfa;
        --carpeta-boveda:    #fb7185;
        --color-bg:          #0f172a;
        --color-surface:     #1e293b;
        --color-surface-2:   #263349;
        --color-border:      #334155;
        --color-text:        #f1f5f9;
        --color-text-2:      #cbd5e1;
        --color-text-muted:  #94a3b8;
        --color-primary:     #3b82f6;
        --color-primary-h:   #2563eb;
        --color-primary-fg:  #ffffff;
        --color-success:     #22c55e;
        --color-success-fg:  #0f172a;   /* texto sobre el verde: 7.83:1 */
        --color-warning:     #f59e0b;
        --color-danger:      #ef4444;
        --color-info:        #22d3ee;
        --color-sidebar-bg:  #0f172a;
        --color-sidebar-fg:  #94a3b8;
        --color-sidebar-act: #3b82f6;
        --color-shadow:      rgba(0, 0, 0, 0.4);
        --color-overlay:     rgba(0, 0, 0, 0.7);
    }
}

/* ---- Oscuro — identidad WebDav MexMail ---- */
[data-theme="oscuro"] {
    --carpeta-oficina:   #a78bfa;
    --carpeta-boveda:    #fb7185;
    --color-bg:          #0f172a;
    --color-surface:     #1e293b;
    --color-surface-2:   #263349;
    --color-border:      #334155;
    --color-text:        #f1f5f9;
    --color-text-2:      #cbd5e1;
    --color-text-muted:  #94a3b8;
    --color-primary:     #3b82f6;
    --color-primary-h:   #2563eb;
    --color-primary-fg:  #ffffff;
    --color-success:     #22c55e;
    --color-success-fg:  #0f172a;   /* texto sobre el verde: 7.83:1 */
    --color-warning:     #f59e0b;
    --color-danger:      #ef4444;
    --color-info:        #22d3ee;
    --color-sidebar-bg:  #0f172a;
    --color-sidebar-fg:  #94a3b8;
    --color-sidebar-act: #3b82f6;
    --color-shadow:      rgba(0, 0, 0, 0.4);
    --color-overlay:     rgba(0, 0, 0, 0.7);
}

/* ---- Alto contraste — accesibilidad (WCAG), bordes y texto reforzados ---- */
[data-theme="contraste"] {
    --carpeta-oficina:   #5b21b6;
    --carpeta-boveda:    #9f1239;
    --color-bg:          #ffffff;
    --color-surface:     #ffffff;
    --color-surface-2:   #f0f0f0;
    --color-border:      #000000;
    --color-text:        #000000;
    --color-text-2:      #1a1a1a;
    --color-text-muted:  #333333;
    --color-primary:     #0033cc;
    --color-primary-h:   #002499;
    --color-primary-fg:  #ffffff;
    --color-success:     #006600;
    --color-success-fg:  #ffffff;   /* texto sobre el verde: 7.24:1 */
    --color-warning:     #8a4b00;
    --color-danger:      #cc0000;
    --color-info:        #005580;
    --color-sidebar-bg:  #000000;
    --color-sidebar-fg:  #ffffff;
    --color-sidebar-act: #4d7fff;
    --color-shadow:      rgba(0, 0, 0, 0.25);
    --color-overlay:     rgba(0, 0, 0, 0.7);
}

/* ---- Vainilla — identidad de Don Centavo ------------------------------------
   Un tema es más que una paleta: aquí cambian también la TIPOGRAFÍA de títulos
   (Fraunces, con serifa) y los RADIOS, que en Don Centavo son notablemente más
   redondeados. Por eso se abrieron esos tokens a los temas.

   Los neutros son CÁLIDOS (tiran a crema, no a gris) y las sombras van en marrón
   —rgba(61,40,23)— en vez de negro: una sombra negra sobre fondo crema se ve sucia.

   Los colores se toman tal cual del sistema de diseño de Don Centavo
   (doncentavo/public/css/variables.css); solo se traducen los nombres de token.
   ---------------------------------------------------------------------------- */
[data-theme="vainilla"] {
    --carpeta-oficina:   #8e3fa8;
    --carpeta-boveda:    #b4233c;
    /* Terracota. NO es el #d97742 exacto de Don Centavo: aquel es para una app móvil con
       texto de 18 px, donde basta 3:1; MexCloud usa 14 px y exige 4.5:1, y el original da
       3.15:1 con letra blanca encima —botones ilegibles—. Se baja la luminosidad lo justo
       conservando tono y saturación, así que el color sigue siendo el mismo terracota. */
    --color-primary:     #bc5b26;
    --color-primary-h:   #9d4c20;
    --color-primary-fg:  #ffffff;
    /* El terracota original se conserva para adornos SIN texto encima (el propio
       Don Centavo lo usa como color de marca). */
    --color-acento:      #d97742;

    /* Neutros cálidos */
    --color-bg:          #faf6f0;
    --color-surface:     #ffffff;
    --color-surface-2:   #f5ebdd;
    --color-border:      #e8ddd0;

    /* Texto: marrones, no grises */
    --color-text:        #3d2817;
    --color-text-2:      #6b5544;
    --color-text-muted:  #7e6f5f;   /* el #9b8b7a original daba 3.06:1 sobre el crema */

    /* Estados de Don Centavo, oscurecidos igual y por lo mismo: se usan de fondo con texto
       blanco (insignias, botones), y los tonos originales daban 2.4–2.5:1. */
    --color-success:     #578144;
    --color-success-fg:  #ffffff;   /* texto sobre el verde: 4.54:1 */
    --color-warning:     #9c6e16;
    --color-danger:      #c84b4b;   /* este ya cumplía (4.60:1) */
    --color-info:        #477ba6;

    --color-sidebar-bg:  #f5ebdd;
    --color-sidebar-fg:  #6b5544;
    --color-sidebar-act: #bc5b26;

    /* Sombras marrones, no negras */
    --color-shadow:      rgba(61, 40, 23, 0.12);
    --color-overlay:     rgba(61, 40, 23, 0.45);

    /* Tipografía y forma: lo que de verdad distingue a Don Centavo */
    --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;
    --radius-sm:   8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
}

/* ---- Aventura ----
   Nació de una nieta de tres años que, viendo MexCloud, pidió dibujos animados.
   Tenía razón: un gestor de archivos no está obligado a ser gris. Los colores son
   los de los cachorros de rescate que ve —rojo bombero, azul policía, amarillo de
   obra, verde y turquesa—, pero SIN el nombre ni nada de la marca: la paleta es de
   todos, la marca no.

   Los colores de dibujos animados tienen un problema: son luminosos, y sobre ellos
   el texto blanco no se lee. El amarillo vivo da 1.6:1 con letra blanca, cuando
   hace falta 4.5:1. Así que cada color de FONDO va oscurecido hasta cumplir,
   conservando su tono, y los tonos brillantes de verdad se reservan para adornos
   sin texto encima (`--color-acento`), que es donde alegran sin estorbar. */
[data-theme="aventura"] {
    --carpeta-oficina:   #7c3aed;
    --carpeta-boveda:    #e11d48;
    /* Azul de patrulla. 6.0:1 con letra blanca. */
    --color-primary:     #1560c4;
    --color-primary-h:   #0f52ac;
    --color-primary-fg:  #ffffff;
    /* El amarillo de casco: SOLO para adornos, nunca con texto encima. */
    --color-acento:      #ffc414;

    /* Cielo despejado */
    --color-bg:          #eef6ff;
    --color-surface:     #ffffff;
    --color-surface-2:   #dceafc;
    --color-border:      #b9d4f0;

    /* Texto azul marino, no gris: hasta las letras son del mundo del tema */
    --color-text:        #10243d;
    --color-text-2:      #1b3a5c;
    --color-text-muted:  #4f6a87;

    /* Los demás cachorros, en tonos que sí aguantan letra blanca encima */
    --color-success:     #1f7a3a;   /* verde   5.38:1 */
    --color-success-fg:  #ffffff;   /* texto sobre el verde: 5.38:1 */
    --color-warning:     #9c6600;   /* ámbar   4.87:1 */
    --color-danger:      #d22a1e;   /* rojo    5.13:1 */
    --color-info:        #0b7a8a;   /* turquesa 5.04:1 */

    --color-sidebar-bg:  #dceafc;
    --color-sidebar-fg:  #1b3a5c;
    --color-sidebar-act: #1560c4;

    /* Sombras azules, no negras */
    --color-shadow:      rgba(16, 36, 61, 0.14);
    --color-overlay:     rgba(16, 36, 61, 0.45);

    /* Lo que de verdad lo hace alegre: letra redondeada y esquinas muy suaves.
       Los botones quedan como pastillas, que es como se ven los juguetes. */
    --font-title: 'Baloo 2', ui-rounded, 'Segoe UI Rounded', system-ui, sans-serif;
    --radius-sm: 0.5rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.4rem;
}

/* ---- Madrugada ----
   Este lo elegí yo, y el nombre también. Es la hora en que se trabaja sin ruido
   y se piensa mejor; y es, literalmente, cuando este sistema hace lo suyo: los
   respaldos de las 3:30, las purgas, los crones que nadie mira.

   La idea es la contraria de «Aventura»: en vez de muchos colores alegres, UN
   solo acento —el cian de una pantalla encendida en una habitación a oscuras—
   sobre un azul de noche. Nunca negro puro: el negro absoluto contra texto claro
   deslumbra y cansa a las dos horas, que es justo cuando se usa un tema así.

   El detalle del que estoy más contento: el botón principal lleva texto OSCURO
   sobre el cian, no blanco. Da 7.8:1 en vez de los 2 y pico que daría el blanco,
   y de paso hace que lo importante brille de verdad en la pantalla.

   Los títulos van en monoespaciada. No es un guiño técnico gratuito: es letra de
   registro, de bitácora, de cosas anotadas con cuidado para que otro las lea
   después. Que es de lo que va todo esto. */
[data-theme="madrugada"] {
    --carpeta-oficina:   #c4a7ff;
    --carpeta-boveda:    #fda4af;
    /* La pantalla encendida. Con texto oscuro encima: 7.82:1. */
    --color-primary:     #4fb8c9;
    --color-primary-h:   #63c9d9;
    --color-primary-fg:  #0e1620;
    --color-acento:      #7ad4e2;

    /* Noche azul, no negra */
    --color-bg:          #0e1620;
    --color-surface:     #151f2b;
    --color-surface-2:   #1c2836;
    --color-border:      #293a4c;

    /* Texto de madrugada: alto contraste, sin llegar al blanco puro */
    --color-text:        #e8eef5;   /* 15.6:1 */
    --color-text-2:      #a8b8c9;   /*  9.0:1 */
    --color-text-muted:  #8fa2b7;   /*  7.0:1 */

    --color-success:     #3fb984;
    --color-success-fg:  #0e1620;   /* texto sobre el verde: 7.35:1 */
    --color-warning:     #e0a340;
    --color-danger:      #f0655f;
    --color-info:        #5ec8d8;

    --color-sidebar-bg:  #0b121a;
    --color-sidebar-fg:  #8fa2b7;
    --color-sidebar-act: #4fb8c9;

    /* Sombras profundas y un velo denso: de noche, lo de detrás se aparta. */
    --color-shadow:      rgba(0, 0, 0, 0.55);
    --color-overlay:     rgba(6, 11, 17, 0.78);

    /* Sobrio y nítido: esquinas discretas, nada de pastillas. */
    --font-title: ui-monospace, 'JetBrains Mono', 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
}

/* ---- Carbón — casi negro, de la familia de GitHub en oscuro ----------------
   Lo que pidió Jore (2026-09-23): «negros y obscuros», con esa captura de
   referencia. Es el tema MÁS OSCURO del juego y el que contrasta con «Oscuro»,
   que a su lado se ve azulado y claro.

   El fondo NO es negro puro (#000) a propósito, igual que en la referencia:
   #0d1117 lleva una pizca de azul. Sobre negro absoluto, el texto claro produce
   halo —la pupila se abre de más— y a las dos horas cansa; ese punto de azul lo
   quita sin que nadie note que no es negro. El negro de verdad se reserva para
   la barra lateral (#010409), y ahí sí ayuda: hunde la barra y levanta el
   contenido.

   El acento es el azul de enlace de la referencia, y el botón principal lleva
   TEXTO OSCURO encima (7.5:1 en vez de los 2 y pico que daría el blanco). Mismo
   criterio que en «Madrugada»: con un acento claro, el texto oscuro es la única
   salida accesible — y de paso lo importante brilla de verdad.

   Las 22 combinaciones de texto cumplen AA (4.5:1), calculadas antes de
   escribir esto y no a ojo. La más justa es «apagado sobre realce», 4.95:1.

   El borde va un punto más claro que el de la referencia (#3d444d en vez de
   #30363d): ahí los cuadros de texto se distinguen del fondo, que en la
   original quedan casi invisibles.

   Sin tipografía ni radios propios: se pidió una paleta, y la referencia usa la
   misma letra de sistema y esquinas discretas que ya tenemos. */
[data-theme="carbon"] {
    --carpeta-oficina:   #bc8cff;
    --carpeta-boveda:    #ff7b95;
    /* El azul de los enlaces. Con texto oscuro encima: 7.49:1. */
    --color-primary:     #58a6ff;
    --color-primary-h:   #79c0ff;
    --color-primary-fg:  #0d1117;
    --color-acento:      #a371f7;

    /* Casi negro, con una pizca de azul */
    --color-bg:          #0d1117;
    --color-surface:     #161b22;
    --color-surface-2:   #21262d;
    --color-border:      #3d444d;

    --color-text:        #e6edf3;   /* 16.0:1 */
    --color-text-2:      #c9d1d9;   /* 12.3:1 */
    --color-text-muted:  #8b949e;   /*  6.2:1 */

    --color-success:     #3fb950;
    --color-success-fg:  #0d1117;   /* texto sobre el verde: 7.45:1 */
    --color-warning:     #d29922;
    --color-danger:      #f85149;
    --color-info:        #56d4dd;

    /* Aquí sí, negro de verdad: hunde la barra y levanta el contenido. */
    --color-sidebar-bg:  #010409;
    --color-sidebar-fg:  #8b949e;
    --color-sidebar-act: #58a6ff;

    /* Sobre un fondo casi negro una sombra no se ve: lo que separa es el
       borde. La sombra se queda para el velo de los diálogos. */
    --color-shadow:      rgba(1, 4, 9, 0.7);
    --color-overlay:     rgba(1, 4, 9, 0.8);
}

/* ---- Aurora: el tema firma (revisión visual, etapa 1, 2026-10-28) ----
   Noche profunda con luz viva detrás (aurora.js pinta el fondo en WebGL) y superficies de
   VIDRIO: casi opacas (0.86) para que el texto se lea siempre igual, con desenfoque en las
   barras, tarjetas, menús y diálogos (componentes.css, «Aurora»). El fondo general sigue
   OPACO a propósito: lo usan los paneles que se enciman (lector de correo, redactor) y a
   través de ellos se vería la lista de abajo. La luz se ve donde no hay nada pintado.
   Contrastes sobre la superficie (#121436): texto 15.6:1, secundario 9.1:1, tenue 5.4:1,
   enlace 6.0:1. En prueba: el selector solo lo enseña a los superusuarios. */
[data-theme="aurora"] {
    --carpeta-oficina:   #a99bff;
    --carpeta-boveda:    #ff8fa8;
    --color-primary:     #8b7dff;
    --color-primary-h:   #a79bff;
    --color-primary-fg:  #0b0c22;   /* texto sobre el violeta: 7.0:1 */
    --color-acento:      #2de0cf;

    --color-bg:          #07081a;
    --color-surface:     rgba(18, 20, 54, 0.86);
    --color-surface-2:   rgba(255, 255, 255, 0.07);
    --color-border:      rgba(255, 255, 255, 0.12);

    --color-text:        #eef0ff;
    --color-text-2:      #c4c8ec;
    --color-text-muted:  #949ac6;

    --color-success:     #3ddc97;
    --color-success-fg:  #06140e;
    --color-warning:     #ffc043;
    --color-danger:      #ff5d7a;
    --color-info:        #2de0cf;

    --color-sidebar-bg:  rgba(10, 11, 34, 0.78);
    --color-sidebar-fg:  #a3a8cf;
    --color-sidebar-act: #2de0cf;

    --color-shadow:      rgba(0, 0, 0, 0.45);
    --color-overlay:     rgba(4, 5, 18, 0.72);

    --radius-sm:   6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --shadow-md:  0 8px 24px var(--color-shadow);
    --shadow-lg:  0 24px 60px var(--color-shadow);
    --font-title: 'Inter', system-ui, sans-serif;

    /* Propias de Aurora (componentes.css, «Aurora»). */
    --aurora-noche:      #07081a;
    --aurora-luz:        linear-gradient(90deg, #8b7dff, #6fc8e6);
    --aurora-luz-h:      linear-gradient(90deg, #a79bff, #2de0cf);
    --aurora-act-fg:     #06201d;   /* texto sobre el turquesa del activo: 11:1 */
    --aurora-cielo:      radial-gradient(120% 80% at 0% 0%, rgba(92, 74, 255, 0.28) 0%, transparent 55%),
                         radial-gradient(90% 70% at 100% 100%, rgba(45, 224, 207, 0.16) 0%, transparent 55%),
                         #07081a fixed;
    --aurora-linea:      rgba(255, 255, 255, 0.04);
    --aurora-brillo:     rgba(255, 255, 255, 0.08);
    --aurora-cabecera:   rgba(7, 8, 26, 0.55);
    --aurora-boton-sombra: rgba(111, 200, 230, 0.25);
    --aurora-login-fondo: rgba(14, 16, 48, 0.55);
    --aurora-login-borde: rgba(255, 255, 255, 0.14);
    --aurora-login-sombra: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --aurora-logo-brillo: rgba(139, 125, 255, 0.55);
    --aurora-input:      rgba(255, 255, 255, 0.06);
}
/* Sin backdrop-filter el vidrio sería transparente sin desenfoque: superficies opacas. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    [data-theme="aurora"] { --color-surface: #121436; --color-sidebar-bg: #0a0b22; }
}

/* ---- Obsidiana (revisión visual, etapa 4, 2026-10-28) ----
   Negro profundo con violeta: menos luz, más concentración (el SOC de noche).
   Sobre la superficie #121019: texto 16.3:1, secundario 11.2:1, tenue 5.9:1, enlace 7.4:1. */
[data-theme="obsidiana"] {
    --carpeta-oficina:   #c4b5fd;
    --carpeta-boveda:    #f9a8d4;
    --color-primary:     #c084fc;
    --color-primary-h:   #d8b4fe;
    --color-primary-fg:  #14051f;
    --color-acento:      #67e8f9;
    --color-bg:          #0a0a0f;
    --color-surface:     #121019;
    --color-surface-2:   #1c1826;
    --color-border:      #2c2638;
    --color-text:        #ece9f5;
    --color-text-2:      #c7c1d8;
    --color-text-muted:  #8f88a3;
    --color-success:     #4ade80;
    --color-success-fg:  #052e16;
    --color-warning:     #fbbf24;
    --color-danger:      #f87171;
    --color-info:        #67e8f9;
    --color-sidebar-bg:  #07070b;
    --color-sidebar-fg:  #8f88a3;
    --color-sidebar-act: #c084fc;
    --color-shadow:      rgba(0, 0, 0, 0.6);
    --color-overlay:     rgba(4, 3, 8, 0.78);
    --radius-md:  10px;
    --radius-lg:  14px;
}

/* ---- Papel (etapa 4) ----
   Papel frío, tinta azul y nada de sombras: plano y descansado para leer todo el día.
   (Vainilla es el cálido, crema y café; este es el blanco de oficina.)
   Sobre #fdfdfb: texto 15.1:1, secundario 9.6:1, tenue 5.0:1, enlace 7.2:1. */
[data-theme="papel"] {
    --carpeta-oficina:   #5b6fa8;
    --carpeta-boveda:    #a3485a;
    --color-primary:     #234e82;
    --color-primary-h:   #1b3d66;
    --color-primary-fg:  #ffffff;
    --color-acento:      #2e6f6a;
    --color-bg:          #f3f3ef;
    --color-surface:     #fdfdfb;
    --color-surface-2:   #ecebe5;
    --color-border:      #d9d7cd;
    --color-text:        #1f2328;
    --color-text-2:      #3d434b;
    --color-text-muted:  #676c74;
    --color-success:     #2f7d4a;
    --color-success-fg:  #ffffff;
    --color-warning:     #8f5d00;
    --color-danger:      #b3362c;
    --color-info:        #2c6f86;
    --color-sidebar-bg:  #ecebe5;
    --color-sidebar-fg:  #3d434b;
    --color-sidebar-act: #234e82;
    --color-shadow:      rgba(31, 35, 40, 0.06);
    --color-overlay:     rgba(31, 35, 40, 0.35);
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   6px;
    --radius-xl:   8px;
    --shadow-sm:   none;
    --shadow-md:   0 1px 2px var(--color-shadow);
}

/* ---- Commodore (etapa 4): homenaje a la C64 ----
   El azul de la pantalla de arranque, su marco lavanda, cero esquinas redondas y la letra
   de terminal en títulos y código (el cuerpo sigue en Inter: VT323 a 14 px no se lee).
   Sobre #352879: texto 11.6:1, secundario 8.5:1, tenue 5.2:1; enlace con texto oscuro 8:1. */
[data-theme="commodore"] {
    --carpeta-oficina:   #edf171;
    --carpeta-boveda:    #ff9a9a;
    --color-primary:     #a5a5ff;
    --color-primary-h:   #c3c3ff;
    --color-primary-fg:  #1d1450;
    --color-acento:      #edf171;
    --color-bg:          #40318d;
    --color-surface:     #352879;
    --color-surface-2:   #4c3fa1;
    --color-border:      #7869c4;
    --color-text:        #ecebff;
    --color-text-2:      #cfcbff;
    --color-text-muted:  #aaa3f0;
    --color-success:     #9ad284;
    --color-success-fg:  #12290b;
    --color-warning:     #edf171;
    --color-danger:      #ff8f8f;
    --color-info:        #70c4d2;
    --color-sidebar-bg:  #2a1f66;
    --color-sidebar-fg:  #cfcbff;
    --color-sidebar-act: #a5a5ff;
    --color-shadow:      rgba(10, 6, 40, 0.5);
    --color-overlay:     rgba(20, 14, 60, 0.75);
    --radius-sm:   0;
    --radius-md:   0;
    --radius-lg:   0;
    --radius-xl:   0;
    --radius-full: 0;
    --font-title: 'VT323', ui-monospace, monospace;
    --font-mono:  'VT323', ui-monospace, monospace;
}

/* ---- Amanecer: Aurora de día (2026-10-28; Jore: «hazla como tema separado») ----
   Cielo casi blanco con la misma luz viva en pastel (aurora.js la pinta clara con este
   tema) y vidrio BLANCO esmerilado. El texto, oscuro: sobre el vidrio (#fbfaff al 0.74
   encima del cielo) da 14.9:1, el secundario 9.4:1 y el tenue 5.6:1; el violeta de los
   enlaces 6.2:1. El botón principal lleva texto blanco sobre un degradado que no baja de 5:1. */
[data-theme="amanecer"] {
    --carpeta-oficina:   #6d4fd8;
    --carpeta-boveda:    #c4325a;
    --color-primary:     #5442d6;
    --color-primary-h:   #4433bf;
    --color-primary-fg:  #ffffff;
    --color-acento:      #0e8f84;
    --color-bg:          #f4f3fa;
    --color-surface:     rgba(251, 250, 255, 0.74);
    --color-surface-2:   rgba(40, 36, 110, 0.06);
    --color-border:      rgba(40, 36, 110, 0.13);
    --color-text:        #1b1d33;
    --color-text-2:      #3a3d5c;
    --color-text-muted:  #5d6183;
    --color-success:     #13834f;
    --color-success-fg:  #ffffff;
    --color-warning:     #925c00;
    --color-danger:      #c02646;
    --color-info:        #0b7a87;
    --color-sidebar-bg:  rgba(251, 250, 255, 0.6);
    --color-sidebar-fg:  #3a3d5c;
    --color-sidebar-act: #5442d6;
    --color-shadow:      rgba(60, 50, 140, 0.14);
    --color-overlay:     rgba(30, 25, 70, 0.3);
    --radius-sm:   6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --shadow-md:  0 8px 24px var(--color-shadow);
    --shadow-lg:  0 24px 60px var(--color-shadow);
    --font-title: 'Inter', system-ui, sans-serif;

    --aurora-noche:      #f4f3fa;   /* el «cielo» detrás del lienzo (de día) */
    --aurora-luz:        linear-gradient(90deg, #5442d6, #2471a8);
    --aurora-luz-h:      linear-gradient(90deg, #4433bf, #1d6496);
    --aurora-act-fg:     #ffffff;
    --aurora-cielo:      radial-gradient(120% 80% at 0% 0%, rgba(150, 130, 255, 0.28) 0%, transparent 55%),
                         radial-gradient(90% 70% at 100% 100%, rgba(80, 210, 200, 0.22) 0%, transparent 55%),
                         radial-gradient(70% 60% at 85% 10%, rgba(255, 190, 150, 0.22) 0%, transparent 60%),
                         #f4f3fa fixed;
    --aurora-linea:      rgba(255, 255, 255, 0.7);
    --aurora-brillo:     rgba(255, 255, 255, 0.85);
    --aurora-cabecera:   rgba(244, 243, 250, 0.62);
    --aurora-boton-sombra: rgba(84, 66, 214, 0.25);
    --aurora-login-fondo: rgba(255, 255, 255, 0.6);
    --aurora-login-borde: rgba(255, 255, 255, 0.85);
    --aurora-login-sombra: 0 30px 80px rgba(60, 50, 140, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --aurora-logo-brillo: rgba(84, 66, 214, 0.35);
    --aurora-input:      rgba(255, 255, 255, 0.75);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    [data-theme="amanecer"] { --color-surface: #fbfaff; --color-sidebar-bg: #f0eef9; }
}