:root {
    /* Paleta de Colores */
        --azul-tfja: #01273E;
        --azul-claro: #0A3D5E;
        --bronce-tfja: #B67238;
        --bronce-claro: #DCA980;
        --fondo-principal: #F4F7F9;
        --blanco: #FFFFFF;
        --texto-principal: #2C3E50;
        --texto-secundario: #5A6A7A;

    /* Escala de Azules */
        --blue-900: #01273e;
        --blue-800: #173b56;
        --blue-700: #254d6c;
        --blue-600: #356082;
        --blue-500: #426e93;
        --blue-400: #5d82a6;
        --blue-300: #7698ba;
        --blue-200: #99b6d4;
        --blue-100: #b9d4ee;
        --blue-50:  #ddeeff; 

    /* Escala de Bronces */
        --bronze-900: #a76234;
        --bronze-800: #b67238;
        --bronze-700: #be7f3c;
        --bronze-600: #c68b42;
        --bronze-500: #ca9547;
        --bronze-400: #d1a254;
        --bronze-300: #d8b16b;
        --bronze-200: #e2c792;
        --bronze-100: #edddbc;
        --bronze-50:  #f7f2e4;

    /* Primarios (Marca principal) */
        --sys-color-primary: var(--azul-tfja);
        --sys-color-on-primary: var(--blanco);
        --sys-color-primary-container: var(--azul-claro);
    
    /* Secundarios (Acentos institucionales) */
        --sys-color-secondary: var(--bronce-tfja);
        --sys-color-on-secondary: var(--blanco);
        --sys-color-secondary-container: var(--bronce-claro);

    /* Terciarios (Acentos complementarios, puedes ajustar el HEX) */
        --sys-color-tertiary: #4A6572;
        --sys-color-on-tertiary: var(--blanco);
        --sys-color-tertiary-container: #C9E6F5;
        --sys-color-on-tertiary-container: #0A1E29;

    /* Superficies Adicionales */
        --sys-color-surface-variant: #E2E7EC;
    
    /* Contenedores de Error */
        --sys-color-error-container: #FFDAD6;
        --sys-color-on-error-container: #410002;

    /* Superficies y Fondos */
        --sys-color-background: var(--fondo-principal);
        --sys-color-surface: var(--blanco);
        --sys-color-on-surface: var(--texto-principal);
        --sys-color-on-surface-variant: var(--texto-secundario);
    
    /* Estados de Alerta */
        --sys-color-error: var(--error-base);
        --sys-color-on-error: var(--blanco);
    
    /* Bordes y Divisiones (Outlines) */
        --sys-color-outline: rgba(1, 39, 62, 0.2);
        --sys-color-outline-variant: rgba(1, 39, 62, 0.08);

    /* LOGOS */
    /* Activos Visuales (Imágenes y Logos) */
        --logo-principal: url('https://www.tfja.gob.mx/static/ui/logos/logo-color-h.svg');
        --logo-90-principal: url('https://www.tfja.gob.mx/static/ui/logos/logo-90-color.png');
    

    /* Tipografía Base */
        --font-main: 'Noto Sans', sans-serif;
        --font-serif: 'Playfair Display', serif;

    /* Display: Textos enormes para hero sections o números destacados */
        --sys-display-large: 400 3.5625rem/4rem var(--font-serif);
        --sys-display-medium: 400 2.8125rem/3.25rem var(--font-serif);
        --sys-display-small: 400 2.25rem/2.75rem var(--font-serif);

    /* Headline: Títulos principales de sección */
        --sys-headline-large: 400 2rem/2.5rem var(--font-serif);
        --sys-headline-medium: 400 1.75rem/2.25rem var(--font-serif);
        --sys-headline-small: 400 1.5rem/2rem var(--font-serif);

    /* Title: Títulos de tarjetas, modales o bloques de texto */
        --sys-title-large: 400 1.375rem/1.75rem var(--font-serif);
        --sys-title-medium: 500 1rem/1.5rem var(--font-main);
        --sys-title-small: 500 0.875rem/1.25rem var(--font-main);

    /* Body: Párrafos de lectura larga */
        --sys-body-large: 400 1rem/1.5rem var(--font-main);
        --sys-body-medium: 400 0.875rem/1.25rem var(--font-main);
        --sys-body-small: 400 0.75rem/1rem var(--font-main);

    /* Label: Botones, navegación, overlines o metadatos */
        --sys-label-large: 500 0.875rem/1.25rem var(--font-main);
        --sys-label-medium: 500 0.75rem/1rem var(--font-main);
        --sys-label-small: 500 0.6875rem/1rem var(--font-main);

    /* --- Tracking --- */
        --sys-tracking-display: -0.25px;
        --sys-tracking-title: 0.15px;
        --sys-tracking-body: 0.5px;
        --sys-tracking-label: 0.1px;

    /* --- ELEVACIÓN --- */
        /* Nivel 1: Tarjetas en reposo */
        --sys-elevation-1: 0px 1px 2px 0px rgba(1, 39, 62, 0.3), 0px 1px 3px 1px rgba(1, 39, 62, 0.15);
        /* Nivel 2: Tarjetas en hover / Header fijo */
        --sys-elevation-2: 0px 1px 2px 0px rgba(1, 39, 62, 0.3), 0px 2px 6px 2px rgba(1, 39, 62, 0.15);
        /* Nivel 3: Menús desplegables (Submenús) */
        --sys-elevation-3: 0px 1px 3px 0px rgba(1, 39, 62, 0.3), 0px 4px 8px 3px rgba(1, 39, 62, 0.15);
        /* Nivel 4 y 5: Modales o elementos flotantes muy por encima (FABs) */
        --sys-elevation-4: 0px 2px 3px 0px rgba(1, 39, 62, 0.3), 0px 6px 10px 4px rgba(1, 39, 62, 0.15);
        --sys-elevation-5: 0px 4px 4px 0px rgba(1, 39, 62, 0.3), 0px 8px 12px 6px rgba(1, 39, 62, 0.15);

    /* --- FORMAS --- */
        --sys-shape-none: 0px;
        --sys-shape-extra-small: 4px; /* Tooltips, etiquetas */
        --sys-shape-small: 8px;       /* Botones, menús */
        --sys-shape-medium: 12px;     /* Tarjetas de tu carrusel */
        --sys-shape-large: 16px;      /* Modales, contenedores grandes */
        --sys-shape-extra-large: 28px;/* Héroes, banners */
        --sys-shape-full: 9999px;     /* Botones circulares, pills */

    /* --- ESPACIADO --- */
        --sys-space-1: 4px;
        --sys-space-2: 8px;
        --sys-space-3: 12px;
        --sys-space-4: 16px;
        --sys-space-5: 24px;
        --sys-space-6: 32px;
        --sys-space-7: 48px;
        --sys-space-8: 64px;
        --sys-space-9: 96px;

    /* --- MOVIMIENTO Y TRANSICIONES --- */
        --sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
        --sys-motion-easing-decelerated: cubic-bezier(0.0, 0.0, 0, 1.0);
        --sys-motion-easing-accelerated: cubic-bezier(0.3, 0.0, 1, 1.0);
        
    /* Duraciones */
        --sys-motion-duration-short: 150ms;
        --sys-motion-duration-medium: 250ms;
        --sys-motion-duration-long: 400ms;

    /* --- ESTADOS --- */
        --sys-state-hover: 0.08;
        --sys-state-focus: 0.12;
        --sys-state-pressed: 0.12;
        --sys-state-dragged: 0.16;

    /* Utilidades */
        --transicion-suave: all 0.3s ease;
        --sombra-suave: 0 4px 20px rgba(0,0,0,0.05);
        
    /* SISTEMA DE CAPAS (Z-Index Scale) */
        --sys-z-index-hide: -1;
        --sys-z-index-base: 0;
        --sys-z-index-dropdown: 1000;
        --sys-z-index-sticky: 1020;
        --sys-z-index-fixed: 1030;
        --sys-z-index-modal-backdrop: 1040;
        --sys-z-index-modal: 1050;
        --sys-z-index-popover: 1060;
        --sys-z-index-tooltip: 1070;

    /* --- OPACIDADES GLOBALES --- */
        --sys-opacity-disabled: 0.38;
        --sys-opacity-disabled-container: 0.12;
        --sys-opacity-overlay: 0.5;

    /* Breakpoints */
        --sys-bp-mobile: 600px;
        --sys-bp-tablet: 850px;
        --sys-bp-desktop: 1200px;
        --sys-bp-wide: 1600px;

    /* --- GRID Y LAYOUT --- */
        --sys-grid-margin-mobile: 16px;
        --sys-grid-gutter-mobile: 16px;
        
        --sys-grid-margin-tablet: 24px;
        --sys-grid-gutter-tablet: 24px;
        
        --sys-grid-margin-desktop: 32px;
        --sys-grid-gutter-desktop: 24px;

        --sys-layout-max-width: 1200px;
        --sys-layout-max-width-wide: 1600px;

    /* --- ICONOGRAFÍA --- */
        --sys-icon-size-small: 16px;
        --sys-icon-size-medium: 24px; 
        --sys-icon-size-large: 32px;
        --sys-icon-size-extra-large: 48px;

    /* --- ACCESIBILIDAD (A11Y) --- */
        --sys-focus-ring-width: 3px;
        --sys-focus-ring-color: var(--sys-color-primary);
        --sys-focus-ring-offset: 2px;
}

    /* MODO OSCURO */
    /* @media (prefers-color-scheme: dark) */
        :root[data-theme="dark"] {
        /* Superficies y Fondos */
            --sys-color-background: #11181C; 
            --sys-color-surface: #1C252A;
            --sys-color-on-surface: #E1E3E5;
            --sys-color-on-surface-variant: #A4ACB2;
            
        /* Primarios */
            --sys-color-primary: #80BCEA; 
            --sys-color-on-primary: #002D4A;
            --sys-color-primary-container: #004573;
        
        /* Secundarios */
            --sys-color-secondary: var(--bronce-claro);
            --sys-color-on-secondary: #3D2200;
            --sys-color-secondary-container: #663C16;

        /* Terciarios (Asegúrate de agregar sus versiones oscuras si los vas a usar) */
            --sys-color-tertiary: #A0C2D5;
            --sys-color-on-tertiary: #01273E;
            --sys-color-tertiary-container: #2A4351;
            --sys-color-on-tertiary-container: #D1EAF8;

        /* Estados de Alerta */
            --sys-color-error: #FFB4AB;
            --sys-color-on-error: #690005;
            --sys-color-error-container: #93000A;
            --sys-color-on-error-container: #FFDAD6;
        
        /* Bordes y Divisiones (Outlines) */
            --sys-color-outline: rgba(255, 255, 255, 0.2);
            --sys-color-outline-variant: rgba(255, 255, 255, 0.08);

        /* Ajuste de sombras para fondos oscuros */
            --sys-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.6), 0px 1px 3px 1px rgba(0, 0, 0, 0.4);
            --sys-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.6), 0px 2px 6px 2px rgba(0, 0, 0, 0.4);
            --sys-elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.6), 0px 4px 8px 3px rgba(0, 0, 0, 0.4);
            --sys-elevation-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.6), 0px 6px 10px 4px rgba(0, 0, 0, 0.4);
            --sys-elevation-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.6), 0px 8px 12px 6px rgba(0, 0, 0, 0.4);
        }
    




/* --- BASE STYLE --- */
/* ========================================= TIPOGRAFÍA ========================================= */

/* 1. Asignación a etiquetas HTML estándar */
h1 { font: var(--sys-headline-large); color: var(--sys-color-primary); margin-bottom: var(--sys-space-4); }
h2 { font: var(--sys-headline-medium); color: var(--azul-tfja); margin-bottom: 0.875rem; }
h3 { font: var(--sys-headline-small); color: var(--azul-tfja); margin-bottom: 0.75rem; }
h4 { font: var(--sys-title-large); color: var(--texto-principal); margin-bottom: 0.5rem; }
h5 { font: var(--sys-title-medium); color: var(--texto-principal); margin-bottom: 0.5rem; }
h6 { font: var(--sys-title-small); color: var(--texto-secundario); margin-bottom: 0.5rem; }
p { font: var(--sys-body-large); color: var(--texto-secundario); margin-bottom: 1rem; letter-spacing: 0.5px; }
small { font: var(--sys-body-small); color: var(--texto-secundario); letter-spacing: 0.4px; }

/* 2. Clases Utilitarias (Para usar en cualquier etiqueta) */
.display-large { font: var(--sys-display-large); letter-spacing: var(--sys-tracking-display); }
.display-medium { font: var(--sys-display-medium); }
.display-small { font: var(--sys-display-small); }
.headline-large { font: var(--sys-headline-large); }
.headline-medium { font: var(--sys-headline-medium); }
.headline-small { font: var(--sys-headline-small); }
.title-large { font: var(--sys-title-large); }
.title-medium { font: var(--sys-title-medium); letter-spacing: 0.15px; }
.title-small { font: var(--sys-title-small); letter-spacing: 0.1px; }
.body-large { font: var(--sys-body-large); letter-spacing: 0.5px; }
.body-medium { font: var(--sys-body-medium); letter-spacing: 0.25px; }
.body-small { font: var(--sys-body-small); letter-spacing: 0.4px; }
.label-large { font: var(--sys-label-large); letter-spacing: 0.1px; }
.label-medium { font: var(--sys-label-medium); letter-spacing: 0.5px; }
.label-small { font: var(--sys-label-small); letter-spacing: 0.5px; }

/* 3. Estilos exclusivos para el módulo demostrativo */
.typography-specimen { padding: 80px 4%; background: var(--blanco); border-top: 1px solid rgba(1, 39, 62, 0.1); }
.typo-container { max-width: 1200px; margin: 0 auto; }
.typo-section-title { color: var(--bronce-tfja); margin-bottom: 40px; border-bottom: 2px solid var(--fondo-principal); padding-bottom: 15px; }
.typo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.typo-group { display: flex; flex-direction: column; gap: var(--sys-space-5); border-radius: var(--sys-shape-medium); padding: var(--sys-space-6); background: var(--sys-color-background); border: 1px solid rgba(0,0,0,0.03); }
.typo-group p { margin: 0; color: var(--azul-tfja); }
.typo-label { font: var(--sys-label-small); color: var(--bronce-tfja); text-transform: uppercase; margin-bottom: 5px; display: block; border-bottom: 1px solid rgba(182, 114, 56, 0.2); padding-bottom: 5px; }


/* ========================================= BOTONES ========================================= */

/* --- Base del Botón --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sys-space-2);
    font: var(--sys-label-large);
    border-radius: var(--sys-shape-full);
    min-height: 40px;
    padding: 0 var(--sys-space-5);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    text-decoration: none;
    transition: 
        background-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
        box-shadow var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
        border-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
        color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
        transform var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}

/* --- Capa de Estado (State Layer) --- */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    opacity: 0;
    border-radius: inherit;
    transition: opacity var(--sys-motion-duration-medium) var(--sys-motion-easing-standard);
    pointer-events: none;
}

/* --- Estados Globales --- */
.btn:hover::before {
    opacity: var(--sys-state-hover);
}

.btn:active {
    transform: scale(0.96);
}

.btn:active::before {
    opacity: var(--sys-state-pressed);
    
}

.btn:focus-visible {
    outline: var(--sys-focus-ring-width) solid var(--sys-focus-ring-color);
    outline-offset: var(--sys-focus-ring-offset);
}

.btn:focus-visible::before {
    opacity: var(--sys-state-focus);
}

.btn:disabled,
.btn[disabled] {
    opacity: var(--sys-opacity-disabled);
    pointer-events: none;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- Variantes --- */

/* Botón Relleno (Filled Button) */
.btn-filled {
    background-color: var(--sys-color-primary);
    color: var(--sys-color-on-primary);
    border: none;
}

.btn-filled:hover {
    box-shadow: var(--sys-elevation-1);
}

/* Botón Contorneado (Outlined Button) */
.btn-outlined {
    background-color: transparent;
    color: var(--sys-color-primary);
    border: 1px solid var(--sys-color-outline);
}

.btn-outlined:focus-visible {
    border-color: var(--sys-color-primary);
}

/* Botón de Texto (Text Button) */
.btn-text {
    background-color: transparent;
    color: var(--sys-color-primary);
    border: none;
    padding: 0 var(--sys-space-3);
}

/* Ajuste de color para íconos dentro de los botones */
.btn svg {
    width: var(--sys-icon-size-medium);
    height: var(--sys-icon-size-medium);
    flex-shrink: 0;
}

/* Variante de botón de ícono para fondos oscuros (Footer) */
.btn-icon-dark {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: var(--sys-color-on-primary);
    box-shadow: none;
}
.btn-icon-dark:hover {
    background: var(--sys-color-secondary);
    color: var(--sys-color-on-secondary);
}

/* ========================================= BOTONES DE ÍCONO (ICON BUTTONS) ========================================= */
.btn-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px; 
    height: 45px;
    border-radius: var(--sys-shape-full);
    background: var(--sys-color-surface);
    border: 1px solid var(--sys-color-outline-variant);
    color: var(--sys-color-primary);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transicion-suave);
    box-shadow: var(--sombra-suave);
}

.btn-icon i, .btn-icon svg {
    width: var(--sys-icon-size-small);
    height: var(--sys-icon-size-small);
    pointer-events: none;
}

.btn-icon-small { width: 36px; height: 36px; }

.btn-icon-primary:hover {
    background: var(--sys-color-primary);
    color: var(--sys-color-on-primary);
    border-color: var(--sys-color-primary);
    transform: translateY(-2px);
    box-shadow: var(--sys-elevation-2);
}

.btn-icon-secondary:hover {
    background: var(--sys-color-secondary);
    color: var(--sys-color-on-secondary);
    border-color: var(--sys-color-secondary);
    transform: translateY(-2px);
    box-shadow: var(--sys-elevation-2);
}

/* ========================================= DIVISORES ========================================= */
.divider-vertical {
    width: 1px;
    background-color: var(--sys-color-outline);
    display: inline-block;
    border-radius: var(--sys-shape-full);
}

.divider-horizontal {
    height: 1px;
    width: 100%;
    background-color: var(--sys-color-outline-variant);
}

/* ========================================= SUPERFICIES Y MATERIALES ========================================= */
.surface-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Soporte automático para modo oscuro en el cristal */
:root[data-theme="dark"] .surface-glass {
    background: rgba(28, 37, 42, 0.85); 
}

/* ========================================= TEXTURAS INSTITUCIONALES ========================================= */
:root {
    /* Texturas base para fondos oscuros */
    --tex-lines: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 10px, transparent 10px, transparent 20px);
    --tex-dots: radial-gradient(rgba(255,255,255,0.15) 2px, transparent 2px);
    --tex-radial: radial-gradient(circle at top right, rgba(255,255,255,0.15) 0%, transparent 80%);
    
    /* Texturas claras para fondos blancos (ej. botones) */
    --tex-light-lines: repeating-linear-gradient(45deg, rgba(1, 39, 62, 0.03) 0px, rgba(1, 39, 62, 0.03) 10px, transparent 10px, transparent 20px);
    --tex-light-dots: radial-gradient(rgba(1, 39, 62, 0.04) 2px, transparent 2px);
    --tex-light-radial: radial-gradient(circle at top right, rgba(255,255,255,0.8) 0%, transparent 100%);

    /* --- VARIABLES DE CONTROL DINÁMICO (Valores por defecto) --- */
    --t-color: rgba(255, 255, 255, 0.1); /* Color de la textura */
    --t-angle: 45deg;                    /* Ángulo del gradiente */
    --t-size1: 10px;                     /* Grosor/Tamaño principal */
    --t-size2: 20px;                     /* Espaciado/Tamaño secundario */

    /* --- TEXTURAS DINÁMICAS --- */
    --tex-dinamica-lines: repeating-linear-gradient(var(--t-angle), var(--t-color) 0px, var(--t-color) var(--t-size1), transparent var(--t-size1), transparent var(--t-size2));
    
    --tex-dinamica-dots: radial-gradient(var(--t-color) var(--t-size1), transparent var(--t-size1));
    
    --tex-dinamica-radial: radial-gradient(circle at center, var(--t-color) 0%, transparent var(--t-size2));
}