/* =========================================
   COLORES DE FONDO (10 presets dinamicos)
   Definen solo --fondo-*, no tocan texto ni trazo.
   Las texturas se aplican por modo en la seccion siguiente.
   Ubicacion: src/css/personalizacion.css
   ========================================= */

/* CAPA 0  VALORES BASE DE LOS EJES DE APARIENCIA
   Tokens de borde (trazo), espaciado, tamano, radio, fuente,
   grosor y transicion. Las secciones siguientes definen los
   niveles (clases) que los sobreescriben.
   Los colores base (fondo/texto/trazo/marca) viven en tema.css. */

:root {
    --grosor-trazo: 1px;
    --espacio-minimo: 0.25rem;
    --espacio-pequeno: 0.5rem;
    --espacio-normal: 1rem;
    --espacio-mediano: 1.5rem;
    --espacio-grande: 2rem;
    --espacio-gigante: 3rem;
    --tamano-2xs: 0.625rem;
    --tamano-xs: 0.75rem;
    --tamano-md: 0.8125rem;
    --tamano-sm: 0.875rem;
    --tamano-base: 1rem;
    --tamano-lg: 1.125rem;
    --tamano-xl: 1.25rem;
    --tamano-2xl: 1.5rem;
    --tamano-3xl: 1.875rem;
    --tamano-4xl: 2.5rem;
    --radio-redondeado: 0.5rem;
    --fuente-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulos: var(--fuente-base);
    --grosor-base: 400;
    --grosor-titulos: 600;
    --grosor-fino: 200;
    --grosor-ligero: 300;
    --grosor-medio: 500;
    --grosor-negrita: 700;
    --grosor-extranegrita: 800;
    --grosor-ultranegrita: 900;
    --transicion-base: 0.2s ease;
    --transicion-lenta: 0.4s ease;
}

/* CAPA 1  ETIQUETAS DE TIPO DE ARCHIVO (16 tokens de color) */

:root {
    --etiqueta-imagen-fondo: #dbeafe;       --etiqueta-imagen-texto: #1e40af;
    --etiqueta-documento-fondo: #fef3c7;    --etiqueta-documento-texto: #92400e;
    --etiqueta-video-fondo: #fce7f3;         --etiqueta-video-texto: #9d174d;
    --etiqueta-audio-fondo: #ede9fe;         --etiqueta-audio-texto: #5b21b6;
    --etiqueta-comprimido-fondo: #d1fae5;    --etiqueta-comprimido-texto: #065f46;
    --etiqueta-ejecutable-fondo: #fee2e2;   --etiqueta-ejecutable-texto: #991b1b;
    --etiqueta-codigo-fondo: #e0e7ff;        --etiqueta-codigo-texto: #3730a3;
    --etiqueta-base-fondo: #f3f4f6;          --etiqueta-base-texto: #374151;
}

/* CAPA 2  COLORES DE FONDO */
:root.fondo-blanco, .fondo-blanco {
    --fondo-pantalla: #f5f5f7;
    --fondo-elemento: #ffffff;
    --fondo-alterno: #e8e8ed;
    --fondo-flotante: #ffffff;
}
:root.fondo-blanco.forzar-iluminacion-oscura,
.fondo-blanco.forzar-iluminacion-oscura {
    --fondo-pantalla: #121212;
    --fondo-elemento: #1e1e1e;
    --fondo-alterno: #282828;
    --fondo-flotante: #242424;
}

/* LAVANDA  Purpura suave, elegante, relajante */
:root.fondo-lavanda, .fondo-lavanda {
    --fondo-pantalla: #f0e6ff;
    --fondo-elemento: #faf5ff;
    --fondo-alterno: #e4d5f5;
    --fondo-flotante: #ffffff;
}
:root.fondo-lavanda.forzar-iluminacion-oscura,
.fondo-lavanda.forzar-iluminacion-oscura {
    --fondo-pantalla: #17101e;
    --fondo-elemento: #241a30;
    --fondo-alterno: #2e243e;
    --fondo-flotante: #1e1426;
}

/* ROSA  Rosa pastel, calido, acogedor */
:root.fondo-rosa, .fondo-rosa {
    --fondo-pantalla: #fce4ec;
    --fondo-elemento: #fff0f3;
    --fondo-alterno: #f8d0da;
    --fondo-flotante: #ffffff;
}
:root.fondo-rosa.forzar-iluminacion-oscura,
.fondo-rosa.forzar-iluminacion-oscura {
    --fondo-pantalla: #1c0a10;
    --fondo-elemento: #2e121e;
    --fondo-alterno: #3e1a28;
    --fondo-flotante: #220e16;
}

/* MELON  Melon suave, calido, tropical */
:root.fondo-melon, .fondo-melon {
    --fondo-pantalla: #fde8d0;
    --fondo-elemento: #fef3e7;
    --fondo-alterno: #f5d5b8;
    --fondo-flotante: #ffffff;
}
:root.fondo-melon.forzar-iluminacion-oscura,
.fondo-melon.forzar-iluminacion-oscura {
    --fondo-pantalla: #1a0e06;
    --fondo-elemento: #2a180c;
    --fondo-alterno: #362214;
    --fondo-flotante: #20120a;
}

/* CIELO  Azul cielo, fresco, sereno */
:root.fondo-cielo, .fondo-cielo {
    --fondo-pantalla: #dceefb;
    --fondo-elemento: #eef6fc;
    --fondo-alterno: #c0e0f5;
    --fondo-flotante: #ffffff;
}
:root.fondo-cielo.forzar-iluminacion-oscura,
.fondo-cielo.forzar-iluminacion-oscura {
    --fondo-pantalla: #0a1420;
    --fondo-elemento: #121e30;
    --fondo-alterno: #182a3e;
    --fondo-flotante: #0e1828;
}

/* MENTA  Verde menta, fresco, revitalizante */
:root.fondo-menta, .fondo-menta {
    --fondo-pantalla: #c8f0dc;
    --fondo-elemento: #e6f7ed;
    --fondo-alterno: #ace6cc;
    --fondo-flotante: #ffffff;
}
:root.fondo-menta.forzar-iluminacion-oscura,
.fondo-menta.forzar-iluminacion-oscura {
    --fondo-pantalla: #08140c;
    --fondo-elemento: #0e2014;
    --fondo-alterno: #142c1e;
    --fondo-flotante: #0a180e;
}

/* ARENA  Arena beige, natural, organico */
:root.fondo-arena, .fondo-arena {
    --fondo-pantalla: #e8ddd0;
    --fondo-elemento: #f5ede4;
    --fondo-alterno: #dccfc0;
    --fondo-flotante: #ffffff;
}
:root.fondo-arena.forzar-iluminacion-oscura,
.fondo-arena.forzar-iluminacion-oscura {
    --fondo-pantalla: #16120e;
    --fondo-elemento: #221c16;
    --fondo-alterno: #2e261e;
    --fondo-flotante: #1a1610;
}

/* LILA  Lila suave, delicate, sofisticado */
:root.fondo-lila, .fondo-lila {
    --fondo-pantalla: #eddaf2;
    --fondo-elemento: #f8eef9;
    --fondo-alterno: #e0c8e8;
    --fondo-flotante: #ffffff;
}
:root.fondo-lila.forzar-iluminacion-oscura,
.fondo-lila.forzar-iluminacion-oscura {
    --fondo-pantalla: #140c1a;
    --fondo-elemento: #201428;
    --fondo-alterno: #2a1c36;
    --fondo-flotante: #181022;
}

/* SELVA  Verde bosque profundo, oscuro, dramatico */
:root.fondo-selva, .fondo-selva {
    --fondo-pantalla: #c8e6d6;
    --fondo-elemento: #e6f2ea;
    --fondo-alterno: #aad6c0;
    --fondo-flotante: #ffffff;
}
:root.fondo-selva.forzar-iluminacion-oscura,
.fondo-selva.forzar-iluminacion-oscura {
    --fondo-pantalla: #041c18;
    --fondo-elemento: #082a24;
    --fondo-alterno: #0e382e;
    --fondo-flotante: #06201c;
}

/* MEDIANOCHE  Azul noche profundo, elegante */
:root.fondo-medianoche, .fondo-medianoche {
    --fondo-pantalla: #d6dcf0;
    --fondo-elemento: #eaf0f8;
    --fondo-alterno: #c0cae4;
    --fondo-flotante: #ffffff;
}
:root.fondo-medianoche.forzar-iluminacion-oscura,
.fondo-medianoche.forzar-iluminacion-oscura {
    --fondo-pantalla: #080c16;
    --fondo-elemento: #0e1424;
    --fondo-alterno: #141c30;
    --fondo-flotante: #0a101e;
}

/* CARMESI  Rosa palo suave */
:root.fondo-carmesi:not(.forzar-iluminacion-oscura),
.fondo-carmesi:not(.forzar-iluminacion-oscura) {
    --fondo-pantalla: #f5e4e4;
    --fondo-elemento: #fcf2f2;
    --fondo-alterno: #e8d0d0;
    --fondo-flotante: #ffffff;
}
:root.fondo-carmesi.forzar-iluminacion-oscura,
.fondo-carmesi.forzar-iluminacion-oscura {
    --fondo-pantalla: #16080a;
    --fondo-elemento: #241010;
    --fondo-alterno: #30181a;
    --fondo-flotante: #1c0c0e;
}

/* BOSQUE  Verde musgo suave */
:root.fondo-bosque:not(.forzar-iluminacion-oscura),
.fondo-bosque:not(.forzar-iluminacion-oscura) {
    --fondo-pantalla: #dce8dc;
    --fondo-elemento: #eef4ee;
    --fondo-alterno: #c8dcc8;
    --fondo-flotante: #ffffff;
}
:root.fondo-bosque.forzar-iluminacion-oscura,
.fondo-bosque.forzar-iluminacion-oscura {
    --fondo-pantalla: #08140a;
    --fondo-elemento: #0e2012;
    --fondo-alterno: #142c1a;
    --fondo-flotante: #0a180c;
}

/* MARINO  Azul grisaceo suave */
:root.fondo-marino:not(.forzar-iluminacion-oscura),
.fondo-marino:not(.forzar-iluminacion-oscura) {
    --fondo-pantalla: #d8dce8;
    --fondo-elemento: #eceef4;
    --fondo-alterno: #c4cade;
    --fondo-flotante: #ffffff;
}
:root.fondo-marino.forzar-iluminacion-oscura,
.fondo-marino.forzar-iluminacion-oscura {
    --fondo-pantalla: #080c16;
    --fondo-elemento: #0e1426;
    --fondo-alterno: #141c32;
    --fondo-flotante: #0a101e;
}

/* CARBON  Gris humo elegante */
:root.fondo-carbon:not(.forzar-iluminacion-oscura),
.fondo-carbon:not(.forzar-iluminacion-oscura) {
    --fondo-pantalla: #e4e4e8;
    --fondo-elemento: #f2f2f4;
    --fondo-alterno: #d4d4da;
    --fondo-flotante: #ffffff;
}
:root.fondo-carbon.forzar-iluminacion-oscura,
.fondo-carbon.forzar-iluminacion-oscura {
    --fondo-pantalla: #0e0e12;
    --fondo-elemento: #18181c;
    --fondo-alterno: #222228;
    --fondo-flotante: #141418;
}

/* VINO  Mauve suave */
:root.fondo-vino:not(.forzar-iluminacion-oscura),
.fondo-vino:not(.forzar-iluminacion-oscura) {
    --fondo-pantalla: #f0e4ea;
    --fondo-elemento: #faf2f6;
    --fondo-alterno: #e4d0da;
    --fondo-flotante: #ffffff;
}
:root.fondo-vino.forzar-iluminacion-oscura,
.fondo-vino.forzar-iluminacion-oscura {
    --fondo-pantalla: #14080e;
    --fondo-elemento: #22101a;
    --fondo-alterno: #2e1824;
    --fondo-flotante: #180c12;
}

/* AZABACHE  Gris pizarra oscuro */
:root.fondo-azabache:not(.forzar-iluminacion-oscura),
.fondo-azabache:not(.forzar-iluminacion-oscura) {
    --fondo-pantalla: #eceef0;
    --fondo-elemento: #f8f8fa;
    --fondo-alterno: #dee0e4;
    --fondo-flotante: #ffffff;
}
:root.fondo-azabache.forzar-iluminacion-oscura,
.fondo-azabache.forzar-iluminacion-oscura {
    --fondo-pantalla: #08080a;
    --fondo-elemento: #101012;
    --fondo-alterno: #1a1a1e;
    --fondo-flotante: #0c0c0e;
}

/* =========================================
   TEXTURAS DE FONDO POR MODO
   Se aplican segun el modo (claro/oscuro),
   no segun el preset de color de fondo.
   ========================================= */

:root:not(.forzar-iluminacion-oscura) {
    --fondo-textura: none;
}

:root.forzar-iluminacion-oscura {
    --fondo-textura:
        radial-gradient(ellipse at 20% 30%, rgb(from var(--color-marca) r g b / 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgb(from var(--color-marca-hover) r g b / 0.03) 0%, transparent 50%);
}

/* =========================================
   TRANSICION SUAVE (clase temporal para cambios)
   ========================================= */

:root.transicion-personalizacion,
.transicion-personalizacion {
    transition: background-color var(--transicion-lenta),
                color var(--transicion-base),
                border-color var(--transicion-base),
                box-shadow var(--transicion-base);
}
:root.transicion-personalizacion *,
.transicion-personalizacion * {
    transition: background-color var(--transicion-lenta),
                color var(--transicion-base),
                border-color var(--transicion-base),
                box-shadow var(--transicion-base);
}

/* =========================================
   AJUSTES DE TEXTURA (5 opciones)
   ========================================= */

:root.textura-ninguna,
.textura-ninguna {
    --fondo-textura: none;
}

:root.textura-punto,
.textura-punto {
    --fondo-textura: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.12) 1px, transparent 0);
}

:root.textura-linea,
.textura-linea {
    --fondo-textura: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.08) 3px,
        rgba(0,0,0,0.08) 4px
    );
}

:root.textura-cuadricula,
.textura-cuadricula {
    --fondo-textura: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.10) 1px, transparent 0), repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(0,0,0,0.06) 8px, rgba(0,0,0,0.06) 9px), repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0,0,0,0.06) 8px, rgba(0,0,0,0.06) 9px);
}

:root.textura-grain,
.textura-grain {
    --fondo-textura: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
}

:root.textura-punto body { background-size: 3px 3px; }
:root.textura-cuadricula body { background-size: 9px 9px; }

/* =========================================
   AJUSTES DE FUENTE (7 opciones)
   ========================================= */

:root.fuente-sistema,
.fuente-sistema {
    --fuente-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulos: var(--fuente-base);
}

:root.fuente-serif,
.fuente-serif {
    --fuente-base: Georgia, "Times New Roman", "Noto Serif", serif;
    --fuente-titulos: var(--fuente-base);
}

:root.fuente-sans,
.fuente-sans {
    --fuente-base: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulos: var(--fuente-base);
}

:root.fuente-mono,
.fuente-mono {
    --fuente-base: "Cascadia Code", "Fira Code", "Courier New", monospace;
    --fuente-titulos: var(--fuente-base);
}

:root.fuente-escritura,
.fuente-escritura {
    --fuente-base: "Segoe Print", "Comic Sans MS", "Patrick Hand", cursive;
    --fuente-titulos: var(--fuente-base);
}

:root.fuente-humanista,
.fuente-humanista {
    --fuente-base: "PT Sans", system-ui, sans-serif;
    --fuente-titulos: "PT Sans", system-ui, sans-serif;
}

:root.fuente-decorativa,
.fuente-decorativa {
    --fuente-base: Georgia, serif;
    --fuente-titulos: Georgia, serif;
}

/* =========================================
   AJUSTES DE ESPACIADO (5 niveles)
   ========================================= */

:root.espaciado-muy-estrecho,
.espaciado-muy-estrecho {
    --espacio-minimo: 0.03125rem;
    --espacio-pequeno: 0.125rem;
    --espacio-normal: 0.25rem;
    --espacio-mediano: 0.5rem;
    --espacio-grande: 0.875rem;
    --espacio-gigante: 1.25rem;
}

:root.espaciado-estrecho,
.espaciado-estrecho {
    --espacio-minimo: 0.0625rem;
    --espacio-pequeno: 0.25rem;
    --espacio-normal: 0.5rem;
    --espacio-mediano: 0.875rem;
    --espacio-grande: 1.25rem;
    --espacio-gigante: 1.75rem;
}

:root.espaciado-normal,
.espaciado-normal {
    --espacio-minimo: 0.25rem;
    --espacio-pequeno: 0.5rem;
    --espacio-normal: 1rem;
    --espacio-mediano: 1.5rem;
    --espacio-grande: 2rem;
    --espacio-gigante: 3rem;
}

:root.espaciado-amplio,
.espaciado-amplio {
    --espacio-minimo: 0.375rem;
    --espacio-pequeno: 0.75rem;
    --espacio-normal: 1.25rem;
    --espacio-mediano: 2rem;
    --espacio-grande: 3rem;
    --espacio-gigante: 4.5rem;
}

:root.espaciado-muy-amplio,
.espaciado-muy-amplio {
    --espacio-minimo: 0.5rem;
    --espacio-pequeno: 1rem;
    --espacio-normal: 1.5rem;
    --espacio-mediano: 2.5rem;
    --espacio-grande: 4rem;
    --espacio-gigante: 6rem;
}

/* =========================================
   AJUSTES DE TAMAO DE LETRA (5 niveles)
   ========================================= */

:root.tamano-muy-pequeno,
.tamano-muy-pequeno {
    --tamano-2xs: 0.4375rem;
    --tamano-xs: 0.5625rem;
    --tamano-md: 0.625rem;
    --tamano-sm: 0.6875rem;
    --tamano-base: 0.75rem;
    --tamano-lg: 0.875rem;
    --tamano-xl: 1rem;
    --tamano-2xl: 1.125rem;
    --tamano-3xl: 1.375rem;
    --tamano-4xl: 1.75rem;
}

:root.tamano-pequeno,
.tamano-pequeno {
    --tamano-2xs: 0.5rem;
    --tamano-xs: 0.625rem;
    --tamano-md: 0.6875rem;
    --tamano-sm: 0.75rem;
    --tamano-base: 0.875rem;
    --tamano-lg: 1rem;
    --tamano-xl: 1.125rem;
    --tamano-2xl: 1.25rem;
    --tamano-3xl: 1.625rem;
    --tamano-4xl: 2rem;
}

:root.tamano-grande,
.tamano-grande {
    --tamano-2xs: 0.6875rem;
    --tamano-xs: 0.8125rem;
    --tamano-md: 0.875rem;
    --tamano-sm: 0.9375rem;
    --tamano-base: 1.125rem;
    --tamano-lg: 1.25rem;
    --tamano-xl: 1.375rem;
    --tamano-2xl: 1.625rem;
    --tamano-3xl: 2rem;
    --tamano-4xl: 3rem;
}

:root.tamano-muy-grande,
.tamano-muy-grande {
    --tamano-2xs: 0.875rem;
    --tamano-xs: 1rem;
    --tamano-md: 1.125rem;
    --tamano-sm: 1.25rem;
    --tamano-base: 1.375rem;
    --tamano-lg: 1.625rem;
    --tamano-xl: 1.875rem;
    --tamano-2xl: 2.25rem;
    --tamano-3xl: 3rem;
    --tamano-4xl: 4rem;
}

/* =========================================
   AJUSTES DE REDONDEADO (5 niveles)
   ========================================= */

:root.radio-ninguno,
.radio-ninguno {
    --radio-redondeado: 0;
}

:root.radio-sutil,
.radio-sutil {
    --radio-redondeado: 0.25rem;
}

:root.radio-normal,
.radio-normal {
    --radio-redondeado: 0.5rem;
}

:root.radio-redondeado,
.radio-redondeado {
    --radio-redondeado: 0.75rem;
}

:root.radio-circular,
.radio-circular {
    --radio-redondeado: 1.5rem;
}

/* =========================================
   TOKENS DE RADIO (todos los border-radius del proyecto)
   Solo esta seccion define radios. El resto consume var(--radio-*).
   Formas: pildora (999px) y lleno (50%) no siguen la escala de redondeado.
   ========================================= */

:root {
    --radio-pildora: 999px;
    --radio-lleno: 50%;
    --radio-cuadrado: 0;
    --radio-pequeno: 0.25rem;
    --radio-medio: 0.375rem;
    --radio-diseno-material: 12px;
    --radio-diseno-material-top: 12px 12px 0 0;
    --radio-diseno-material-sutil: 4px;
    --radio-diseno-material-sutil-top: 4px 4px 0 0;
    --radio-diseno-clay: 16px;
    --radio-diseno-academia: 4px;
    --radio-organic-1: 0 80% 60% 30% / 0 60% 80% 30%;
    --radio-organic-2: 0 70% 70% 40% / 0 70% 70% 40%;
    --radio-organic-3: 20px 30px 20px 30px;
    --radio-organic-4: 25px 18px 30px 22px;
    --radio-organic-5: 60% 20% 50% 30% / 40% 60% 30% 50%;
    --radio-organic-6: 50% 30% 60% 20% / 50% 50% 40% 40%;
    --radio-liquid-1: 48% 52% 44% 56% / 52% 46% 54% 48%;
    --radio-liquid-2: 52% 48% 56% 44% / 48% 54% 46% 52%;
    --radio-liquid-3: 55% 45% 58% 42% / 48% 52% 56% 44%;
    --radio-liquid-4: 45% 55% 38% 62% / 52% 58% 42% 48%;
    --radio-liquid-5: 52% 48% 62% 38% / 44% 48% 52% 56%;
    --radio-liquid-6: 44% 56% 48% 52% / 56% 44% 54% 46%;
}

/* =========================================
   AJUSTES DE ANIMACIONES (4 velocidades)
   ========================================= */

:root.animacion-instantaneo,
.animacion-instantaneo {
    --transicion-base: 0s;
    --transicion-lenta: 0s;
}

:root.animacion-rapido,
.animacion-rapido {
    --transicion-base: 0.1s ease;
    --transicion-lenta: 0.15s ease;
}

:root.animacion-normal,
.animacion-normal {
    --transicion-base: 0.2s ease;
    --transicion-lenta: 0.4s ease;
}

:root.animacion-lento,
.animacion-lento {
    --transicion-base: 0.4s ease;
    --transicion-lenta: 0.8s ease;
}

/* =========================================
   AJUSTES DE GROSOR DE FUENTE (5 niveles)
   ========================================= */

:root.grosor-delgado,
.grosor-delgado {
    --grosor-fino: 100;
    --grosor-ligero: 200;
    --grosor-base: 200;
    --grosor-medio: 300;
    --grosor-titulos: 300;
    --grosor-negrita: 400;
    --grosor-extranegrita: 500;
    --grosor-ultranegrita: 600;
}

:root.grosor-ligero,
.grosor-ligero {
    --grosor-fino: 200;
    --grosor-ligero: 300;
    --grosor-base: 300;
    --grosor-medio: 400;
    --grosor-titulos: 400;
    --grosor-negrita: 500;
    --grosor-extranegrita: 600;
    --grosor-ultranegrita: 700;
}

:root.grosor-normal,
.grosor-normal {
    --grosor-fino: 200;
    --grosor-ligero: 300;
    --grosor-base: 400;
    --grosor-medio: 500;
    --grosor-titulos: 600;
    --grosor-negrita: 700;
    --grosor-extranegrita: 800;
    --grosor-ultranegrita: 900;
}

:root.grosor-seminegrita,
.grosor-seminegrita {
    --grosor-fino: 300;
    --grosor-ligero: 400;
    --grosor-base: 500;
    --grosor-medio: 600;
    --grosor-titulos: 700;
    --grosor-negrita: 800;
    --grosor-extranegrita: 900;
    --grosor-ultranegrita: 900;
}

:root.grosor-negrita,
.grosor-negrita {
    --grosor-fino: 500;
    --grosor-ligero: 600;
    --grosor-base: 700;
    --grosor-medio: 800;
    --grosor-titulos: 900;
    --grosor-negrita: 900;
    --grosor-extranegrita: 900;
    --grosor-ultranegrita: 900;
}

/* =========================================
   AJUSTES DE SOMBRAS (5 niveles)
   ========================================= */

/* Valores base (claro) y resplandor (oscuro). El modo forzado
   (forzar-iluminacion-*) gana sobre estos por especificidad. */
:root {
    --sombra-suave: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.08);
    --sombra-flotante: 0 4px 12px -2px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.08);
    --sombra-elevada: 0 10px 24px -6px rgb(0 0 0 / 0.14), 0 4px 8px -4px rgb(0 0 0 / 0.10);
}

@media (prefers-color-scheme: dark) {
    :root {
        --sombra-suave: 0 2px 8px rgb(255 255 255 / 0.03), 0 1px 2px rgb(255 255 255 / 0.02);
        --sombra-flotante: 0 8px 24px rgb(255 255 255 / 0.04), 0 4px 8px rgb(255 255 255 / 0.02);
        --sombra-elevada: 0 16px 48px rgb(255 255 255 / 0.05), 0 8px 16px rgb(255 255 255 / 0.03);
    }
}

:root.sombra-ninguna,
.sombra-ninguna {
    --sombra-suave: none;
    --sombra-flotante: none;
    --sombra-elevada: none;
}

:root.sombra-sutil,
.sombra-sutil {
    --sombra-suave: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --sombra-flotante: 0 2px 4px 0 rgb(0 0 0 / 0.06);
    --sombra-elevada: 0 4px 8px -2px rgb(0 0 0 / 0.08);
}

:root.sombra-normal,
.sombra-normal {
    --sombra-suave: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
    --sombra-flotante: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
    --sombra-elevada: 0 10px 24px -6px rgb(0 0 0 / 0.1), 0 4px 8px -4px rgb(0 0 0 / 0.06);
}

:root.sombra-marcada,
.sombra-marcada {
    --sombra-suave: 0 2px 4px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --sombra-flotante: 0 8px 20px -4px rgb(0 0 0 / 0.12), 0 4px 8px -4px rgb(0 0 0 / 0.08);
    --sombra-elevada: 0 16px 32px -8px rgb(0 0 0 / 0.15), 0 8px 16px -8px rgb(0 0 0 / 0.1);
}

:root.sombra-pronunciada,
.sombra-pronunciada {
    --sombra-suave: 0 4px 8px 0 rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.08);
    --sombra-flotante: 0 12px 28px -4px rgb(0 0 0 / 0.18), 0 6px 12px -6px rgb(0 0 0 / 0.12);
    --sombra-elevada: 0 24px 48px -10px rgb(0 0 0 / 0.22), 0 12px 24px -10px rgb(0 0 0 / 0.15);
}

/* =========================================
   TOKENS DE SOMBRA (todos los box-shadow del proyecto)
   Solo esta seccion define sombras. El resto consume var(--sombra-*).
   Regla: en modo oscuro las sombras se convierten en resplandor
   (ver forzar-iluminacion-oscura).
   ========================================= */

:root {
    --sombra-enfoque: 0 0 0 3px var(--trazo-enfoque);
    --sombra-enfoque-suave: 0 0 0 3px var(--color-marca-claro), var(--sombra-flotante);
    --sombra-anillo: 0 0 0 1px var(--color-marca);
    --sombra-anillo-suave: 0 0 0 2px var(--color-marca-claro);
    --sombra-activo: 0 1px 2px 0 rgb(0 0 0 / 0.06);
    --sombra-peligro: 0 4px 12px -2px rgb(220 38 38 / 0.25);
    --sombra-inset-suave: inset 0 1px 0 rgb(from var(--texto-fuerte) r g b / 0.06);
    --sombra-pulso: 0 0 0 0 rgb(from var(--color-exito) r g b / 0.15);
    --sombra-pulso-activo: 0 0 0 6px rgb(from var(--color-exito) r g b / 0);
}

/* Sombras por diseño (identidad de cada estilo visual) */
:root {
    --sombra-glass: 0 8px 32px rgb(from var(--color-marca) r g b / 0.08);
    --sombra-glass-hover: 0 4px 20px rgb(from var(--color-marca) r g b / 0.15);
    --sombra-neo-1: -12px -12px 28px rgb(from var(--texto-fuerte) r g b / 0.06), 12px 12px 28px rgb(from var(--color-marca) r g b / 0.1);
    --sombra-neo-2: -14px -14px 32px rgb(from var(--texto-fuerte) r g b / 0.07), 14px 14px 32px rgb(from var(--color-marca) r g b / 0.12);
    --sombra-neon-inset: inset 3px 0 0 var(--color-marca);
    --sombra-neon: 0 0 10px rgb(from var(--color-marca) r g b / 0.1);
    --sombra-cyber-inset: inset 3px 0 10px rgb(from var(--color-marca) r g b / 0.08);
    --sombra-brutal-1: 8px 8px 0 0 rgb(from var(--color-marca) r g b / 0.35);
    --sombra-brutal-2: 16px 16px 0 0 rgb(from var(--color-marca) r g b / 0.45);
    --sombra-brutal-3: 7px 7px 0 0 rgb(from var(--color-marca) r g b / 0.3);
    --sombra-brutal-4: 9px 9px 0 0 rgb(from var(--color-marca) r g b / 0.35);
    --sombra-brutal-5: 2px 2px 0 0 rgb(from var(--color-marca) r g b / 0.3);
    --sombra-brutal-6: 4px 4px 0 0 rgb(from var(--color-marca) r g b / 0.3);
    --sombra-brutal-7: 5px 5px 0 0 rgb(from var(--color-marca) r g b / 0.2);
    --sombra-brutal-8: 10px 10px 0 0 rgb(from var(--color-marca) r g b / 0.3);
    --sombra-vapor-1: 0 0 20px rgb(from var(--color-marca) r g b / 0.05);
    --sombra-vapor-2: 0 0 8px rgb(from var(--color-marca) r g b / 0.06);
    --sombra-vapor-3: 0 0 15px rgb(from var(--color-marca) r g b / 0.08);
    --sombra-cosmic: 0 0 6px rgb(from var(--color-marca) r g b / 0.5);
    --sombra-organic: 0 0 0 4px rgb(from var(--color-marca) r g b / 0.04);
    --sombra-material-1: 0 2px 8px rgb(from var(--color-marca) r g b / 0.25);
    --sombra-material-2: 0 4px 16px rgb(from var(--color-marca) r g b / 0.35);
    --sombra-material-3: 0 1px 4px rgb(from var(--color-marca) r g b / 0.15);
    --sombra-material-4: 2px 0 8px rgb(from var(--texto-fuerte) r g b / 0.04);
    --sombra-material-5: 0 2px 8px rgb(from var(--color-marca) r g b / 0.08);
    --sombra-liquid-1: 2px 2px 0 0 rgb(from var(--color-marca) r g b / 0.15);
    --sombra-liquid-2: 3px 3px 0 0 rgb(from var(--color-marca) r g b / 0.2);
    --sombra-pixel-1: 2px 2px 0 0 var(--color-marca);
    --sombra-pixel-2: 3px 3px 0 0 var(--color-marca);
    --sombra-pixel-3: 0px 0px 0 0 var(--color-marca);
    --sombra-moderno-1: 0 1px 3px rgb(from var(--texto-fuerte) r g b / 0.06), 0 1px 2px rgb(from var(--texto-fuerte) r g b / 0.04);
    --sombra-moderno-2: 0 4px 12px rgb(from var(--texto-fuerte) r g b / 0.08), 0 2px 4px rgb(from var(--texto-fuerte) r g b / 0.06);
    --sombra-moderno-3: 0 4px 12px rgb(from var(--color-marca) r g b / 0.15);
    --sombra-minimal: none;
    --sombra-minimal-enfoque: 0 0 0 2px rgb(from var(--color-marca) r g b / 0.15);
}

/* =========================================
   AJUSTES DE BORDES / TRAZO (5 niveles)
   ========================================= */

:root.trazo-fino,
.trazo-fino {
    --grosor-trazo: 1px;
}

:root.trazo-sutil,
.trazo-sutil {
    --grosor-trazo: 2px;
}

:root.trazo-normal,
.trazo-normal {
    --grosor-trazo: 3px;
}

:root.trazo-grueso,
.trazo-grueso {
    --grosor-trazo: 4px;
}

:root.trazo-muy-grueso,
.trazo-muy-grueso {
    --grosor-trazo: 6px;
}

/* =========================================
   FORZADO DE TEMA  Debe estar al final para
   ganar sobre cualquier preset. Solo cambia
   colores de texto, trazo y sombra  los
   --fondo-* los definen los presets fondo-*
   o el modo oscuro de cada uno.
   ========================================= */

:root.forzar-iluminacion-clara {
    --texto-fuerte: #0f172a;
    --texto-base: #334155;
    --texto-suave: #64748b;
    --texto-invertido: #ffffff;
    --trazo-suave: #e2e8f0;
    --trazo-fuerte: #cbd5e1;
}

:root:where(.forzar-iluminacion-clara) {
    --sombra-suave: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);
    --sombra-flotante: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
    --sombra-elevada: 0 10px 24px -6px rgb(0 0 0 / 0.12), 0 4px 8px -4px rgb(0 0 0 / 0.08);
}

:root.forzar-iluminacion-oscura {
    --texto-fuerte: #e8e8e8;
    --texto-base: #b0b0b0;
    --texto-suave: #808080;
    --texto-invertido: #121212;
    --trazo-suave: #2a2a2a;
    --trazo-fuerte: #404040;
}

:root:where(.forzar-iluminacion-oscura) {
    --sombra-suave: 0 2px 8px rgb(255 255 255 / 0.03), 0 1px 2px rgb(255 255 255 / 0.02);
    --sombra-flotante: 0 8px 24px rgb(255 255 255 / 0.04), 0 4px 8px rgb(255 255 255 / 0.02);
    --sombra-elevada: 0 16px 48px rgb(255 255 255 / 0.05), 0 8px 16px rgb(255 255 255 / 0.03);
}

/* Etiquetas de tipo de archivo: variantes oscuras */
:root.forzar-iluminacion-oscura {
    --etiqueta-imagen-fondo: #1e3a5f;       --etiqueta-imagen-texto: #93c5fd;
    --etiqueta-documento-fondo: #4a3508;    --etiqueta-documento-texto: #fcd34d;
    --etiqueta-video-fondo: #4a1836;         --etiqueta-video-texto: #f9a8d4;
    --etiqueta-audio-fondo: #3b2b63;         --etiqueta-audio-texto: #c4b5fd;
    --etiqueta-comprimido-fondo: #0e3a28;    --etiqueta-comprimido-texto: #6ee7b7;
    --etiqueta-ejecutable-fondo: #4a1a1a;   --etiqueta-ejecutable-texto: #fca5a5;
    --etiqueta-codigo-fondo: #2b2a63;        --etiqueta-codigo-texto: #a5b4fc;
    --etiqueta-base-fondo: #2d2d34;          --etiqueta-base-texto: #9ca3af;
}