:root {
    /* Colores principales (Inspirados en el rojo del logo y blanco) */
    --color-primary: #e61a23;          /* El rojo puro y deportivo de la 'M' y 'Consignaciones' */
    --color-primary-dark: #b30f16;     /* Rojo oscuro para estados hover */
    --color-primary-light: #ffccd0;    /* Un rosa/rojo muy suave para fondos ligeros o alertas */
    --color-primary-darkest: #4a0508;  /* Rojo casi negro para contrastes profundos */
    
    /* Colores de fondo (Fondo negro sólido y variantes oscuras limpias) */
    --bg-primary: #0b0c0d;             /* El negro puro del fondo del logo */
    --bg-secondary: #17191c;           /* Gris muy oscuro para secciones */
    --bg-tertiary: #222529;            /* Gris oscuro intermedio */
    --bg-card: #1c1e22;                /* Gris perfecto para tarjetas que resalten sobre el fondo */
    
    /* Colores de texto (Basados en el blanco puro de la 'A' y contrastes) */
    --text-primary: #ffffff;           /* Blanco puro como la 'A' y parte de la bandera */
    --text-secondary: #e0e0e0;         /* Gris claro para textos secundarios */
    --text-muted: #a0a5ad;             /* Gris neutro para textos menos importantes */
    
    /* Colores de acento */
    --accent-whatsapp: #25d366;
    --accent-success: #2e7d32;
    
    /* Fuentes */
    --font-primary: 'Hanken Grotesk', 'Segoe UI', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Bordes (Cambiados de marrón a grises/blancos sutiles) */
    --border-color: rgba(255, 255, 255, 0.15);
    --border-color-light: rgba(255, 255, 255, 0.08);
    --border-color-lighter: rgba(255, 255, 255, 0.04);
    
    /* Sombras (Actualizadas al nuevo rojo y negro) */
    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.7);
    --shadow-hover: 0 8px 25px rgba(230, 26, 35, 0.2); /* Brillo sutil con el nuevo rojo */
    --shadow-fab: 0 8px 30px rgba(37, 211, 102, 0.4);
    
    /* Spacing (breakpoints) */
    --container-max: 1280px;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    
    /* Transiciones */
    --transition-default: 0.3s ease;
    --transition-slow: 0.7s ease;
    --transition-slower: 10s ease;
    
    /* Z-index */
    --z-fab: 40;
    --z-header: 50;
    --z-modal: 2000;

    /* Scrollbar */
    --scrollbar-width: 5px;
    --scrollbar-track: #0b0c0d;
    --scrollbar-thumb: #e61a23;        /* El scrollbar ahora hace juego con el rojo principal */
    --scrollbar-radius: 10px;
    
    /* Badges */
    --badge-nuevo-bg: #e61a23;
    --badge-nuevo-text: #ffffff;       /* Texto blanco sobre el badge rojo para máxima legibilidad */
    --badge-disponible-bg: #2e7d32;
    --badge-disponible-text: white;
}





.custom-select {
    position: relative;
    width: 100%;
}

/* Select real: sigue funcionando para required y envío del formulario */
.select-real {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Botón visible */
.select-trigger {
    width: 100%;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;

    font-size: 15px;
    color: #333;

    cursor: pointer;

    transition: border-color .2s, box-shadow .2s;
}

.select-trigger:hover {
    border-color: #888;
}

.custom-select.open .select-trigger {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .1);
}

.select-trigger i {
    transition: transform .2s;
}

.custom-select.open .select-trigger i {
    transform: rotate(180deg);
}

/* Menú */
.select-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;

    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);

    max-height: 250px;
    overflow-y: auto;

    padding: 5px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);

    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s;

    z-index: 1000;
}

.custom-select.open .select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Cada año */
.select-option {
    padding: 10px 12px;

    border-radius: 6px;

    font-size: 15px;
    cursor: pointer;

    transition: background .15s;
}

.select-option:hover {
    background: #f1f3f5;
}

.select-option.selected {
    background: #007bff;
    color: white;
}

/* Scroll */
.select-options::-webkit-scrollbar {
    width: 6px;
}

.select-options::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 10px;
}

.select-options::-webkit-scrollbar-track {
    background: transparent;
}