/* ==========================================================================
   🧬 1. CONFIGURACIÓN DE NÚCLEO (VARIABLES & AJUSTES GLOBALES)
   ========================================================================== */
:root {
    --verde-mutant: #8ce600;   /* El verde neón/eléctrico exacto de la academia */
    --verde-hover: #73be00;    /* Verde denso para efectos de transición */
    --oscuro-mutant: #111111;  /* Negro/carbón urbano principal */
    --Fondo-flatpickr: #1a1a1a;/* Grafito profundo para el calendario */
}

/* Selección de Texto Premium */
::selection {
    background-color: var(--verde-mutant);
    color: var(--oscuro-mutant);
}

/* Enlaces Generales */
a {
    color: var(--verde-mutant);
    font-weight: 500;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--verde-hover);
    text-decoration: none;
}

/* ==========================================================================
   ⚡ 2. COMPONENTES ADMINLTE (UI & ESTRUCTURA URBANA)
   ========================================================================== */
/* Insignias y Alertas Especiales */
.bg-warning, .badge-warning {
    background-color: var(--verde-mutant) !important;
    color: var(--oscuro-mutant) !important;
    font-weight: bold !important;
}

/* Botones Principales de Alta Respuesta */
.btn-warning {
    background-color: var(--verde-mutant) !important;
    border-color: var(--verde-mutant) !important;
    color: var(--oscuro-mutant) !important;
    font-weight: bold !important;
    transition: all 0.2s ease-in-out !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
    background-color: var(--verde-hover) !important;
    border-color: var(--verde-hover) !important;
    color: var(--oscuro-mutant) !important;
    box-shadow: 0 0 10px rgba(140, 230, 0, 0.5) !important;
}

/* Tarjetas (Cards) de Control */
.card-warning:not(.card-outline) > .card-header {
    background-color: var(--verde-mutant) !important;
    color: var(--oscuro-mutant) !important;
}
.card-warning:not(.card-outline) > .card-header .card-title {
    font-weight: bold !important;
}
.card-warning.card-outline {
    border-top: 3px solid var(--verde-mutant) !important;
}

/* Blindaje de Tarjetas: Evita que los modales o dropdowns se corten */
.card, .card-body, form {
    overflow: visible !important; 
}

/* Selección Activa del Menú Lateral (Sidebar) */
.sidebar-dark-warning .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-warning .nav-sidebar > .nav-item > .nav-link.active,
.nav-pills .nav-link.active {
    background-color: var(--verde-mutant) !important;
    color: var(--oscuro-mutant) !important;
    font-weight: bold !important;
}

/* ==========================================================================
   📅 3. ARQUITECTURA FLATPICKR (TUNEADO DARK & INTERFAZ NEÓN)
   ========================================================================== */
/* Contenedor Base del Calendario */
.flatpickr-calendar {
    background: var(--Fondo-flatpickr) !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
    border-radius: 10px !important;
    font-family: inherit !important;
}
.flatpickr-wrapper {
    display: block;
    width: 100%;
}

/* Encabezados y Días de la Semana */
.flatpickr-current-month text, .flatpickr-month, .flatpickr-weekday {
    color: #ffffff !important;
    fill: #ffffff !important;
}
.flatpickr-weekday { 
    color: var(--verde-mutant) !important; 
    font-weight: bold !important; 
}

/* Cuadrícula de Días Estándar */
.flatpickr-day {
    color: #e0e0e0 !important;
    border-radius: 6px !important;
}
.flatpickr-day:hover, .flatpickr-day:focus {
    background: #333333 !important;
    color: var(--verde-mutant) !important;
}

/* Rangos y Días Seleccionados */
.flatpickr-day.selected, .flatpickr-day.selected:hover, 
.flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--verde-mutant) !important;
    color: var(--oscuro-mutant) !important;
    font-weight: bold !important;
    border-color: var(--verde-mutant) !important;
    box-shadow: 0 0 10px rgba(140, 230, 0, 0.4) !important;
}
.flatpickr-day.inRange {
    background: rgba(140, 230, 0, 0.15) !important;
    color: var(--verde-mutant) !important;
    box-shadow: none !important;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
    color: #444444 !important;
}

/* Flechas Laterales de Navegación de Meses */
.flatpickr-months .flatpickr-prev-month:hover svg, 
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--verde-mutant) !important;
}
.flatpickr-months .flatpickr-prev-month svg, 
.flatpickr-months .flatpickr-next-month svg {
    fill: #ffffff !important;
}

/* ==========================================================================
   📱 4. INTERFAZ MÓVIL (BLINDAJE DE TOUCH & CONTROL IPHONE MINI)
   ========================================================================== */
/* Control de Selectores del Año Gigantes (Hitbox Expandida para Dedos) */
.flatpickr-current-month .numInputWrapper {
    width: 75px !important;
}
.flatpickr-current-month .numInputWrapper span {
    width: 22px !important; 
    background: rgba(255, 255, 255, 0.05);
}
.flatpickr-current-month input.flatpickr-year {
    padding-right: 22px !important;
}

/* Triángulo Incremento Año (Arriba) */
.flatpickr-current-month .numInputWrapper span.arrowUp::after {
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-bottom: 7px solid var(--verde-mutant) !important;
    top: 30% !important;
}

/* Triángulo Decremento Año (Abajo) */
.flatpickr-current-month .numInputWrapper span.arrowDown::after {
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-top: 7px solid var(--verde-mutant) !important;
    top: 40% !important;
}

/* ==========================================================================
   📱 5. REGLAS RESPONSIVAS CONSOLIDADAS (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 767px) {
    /* 🛡️ Frena el efecto lupa automático (Zoom) en iOS y Android */
    .form-control, 
    .form-select, 
    .flatpickr-input,
    input[type="text"], 
    input[type="number"], 
    select {
        font-size: 16px !important;
    }

    /* 🛡️ Centrado y contención del calendario en pantallas chicas */
    .flatpickr-calendar {
        width: 100% !important;
        max-width: 300px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 5px auto !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
    }
}