/* Estilos STORM+ para CRC Soft */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f6f9;
    color: #333;
}

.navbar-storm {
    background-color: #0056b3 !important;
    /* Azul corporativo forzado */
    color: white;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-storm .navbar-brand {
    color: white;
    font-weight: 700;
}

.navbar-storm .nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.navbar-storm .nav-link:hover {
    color: white;
}

.navbar-storm .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.card-storm {
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin-bottom: 1rem;
}

.card-storm .card-header {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    color: #0056b3;
    padding: 0.75rem 1.25rem;
}

.btn-storm {
    background-color: #0056b3;
    color: white;
    border: none;
}

.btn-storm:hover {
    background-color: #004494;
    color: white;
}

footer {
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: 1rem 0;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #666;
}

/* Estilos para Horarios Disponibles (Modal Agenda) */
.slot-btn {
    cursor: pointer;
    padding: 8px 15px;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    /* Pill shape */
    background-color: #fff;
    color: #333;
    font-weight: 500;
    transition: all 0.2s ease;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin: 5px;
    /* Espaciado externo */
}

.slot-btn:hover {
    border-color: #0056b3;
    color: #0056b3;
    background-color: #f8f9fa;
    transform: translateY(-1px);
}

.slot-btn.active {
    background-color: #0056b3;
    color: #fff;
    border-color: #0056b3;
    box-shadow: 0 2px 4px rgba(0, 86, 179, 0.3);
}

/* =========================================
   ESTILOS CALENDARIO (FLATPICKR CUSTOM)
   Centralizados desde admin_dashboard.php
   ========================================= */

@keyframes gravity-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ANIMACIONES INTERCAMBIO DE COLOR (Fondo <-> Borde) */
@keyframes pulse-red {
    0% {
        background-color: #ffcccc;
        border-color: #ff0000;
        color: #cc0000;
        transform: scale(1);
    }

    50% {
        background-color: #ff0000;
        border-color: #ffcccc;
        color: #ffffff;
        transform: scale(1.3);
    }

    100% {
        background-color: #ffcccc;
        border-color: #ff0000;
        color: #cc0000;
        transform: scale(1);
    }
}

@keyframes pulse-green {
    0% {
        background-color: #9cdb9c;
        border-color: #7bc47b;
        color: #0b401d;
        transform: scale(1);
    }

    50% {
        background-color: #7bc47b;
        border-color: #9cdb9c;
        color: #ffffff;
        transform: scale(1.3);
    }

    100% {
        background-color: #9cdb9c;
        border-color: #7bc47b;
        color: #0b401d;
        transform: scale(1);
    }
}

/* ANIMACIONES PARCIALES (Intensificar degradado) */
@keyframes pulse-morning {
    0% {
        background: linear-gradient(90deg, #ffcccc 50%, #9cdb9c 50%);
        border-color: #ff0000;
        color: #333;
        transform: scale(1);
    }

    50% {
        background: linear-gradient(90deg, #ff0000 50%, #2e7d32 50%);
        border-color: #fff;
        color: #ffffff;
        transform: scale(1.3);
    }

    100% {
        background: linear-gradient(90deg, #ffcccc 50%, #9cdb9c 50%);
        border-color: #ff0000;
        color: #333;
        transform: scale(1);
    }
}

@keyframes pulse-afternoon {
    0% {
        background: linear-gradient(90deg, #9cdb9c 50%, #ffcccc 50%);
        border-color: #ff0000;
        color: #333;
        transform: scale(1);
    }

    50% {
        background: linear-gradient(90deg, #2e7d32 50%, #ff0000 50%);
        border-color: #fff;
        color: #ffffff;
        transform: scale(1.3);
    }

    100% {
        background: linear-gradient(90deg, #9cdb9c 50%, #ffcccc 50%);
        border-color: #ff0000;
        color: #333;
        transform: scale(1);
    }
}

@keyframes gravity-pulse-selected {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.flatpickr-day.day-blocked {
    background-color: #ffcccc;
    color: #cc0000;
    font-weight: bold;
}

/* BLOQUEO SAMU (Rojo más intenso) */
.flatpickr-day.day-blocked-samu {
    background-color: #ff6666 !important;
    color: #330000 !important;
    font-weight: bold;
    border: 1px solid #cc0000;
}

/* BLOQUEO PARCIAL: TARDE (Rojo a la derecha) */
.flatpickr-day.day-blocked-afternoon {
    background: linear-gradient(90deg, #9cdb9c 50%, #ffcccc 50%);
    color: #333;
    font-weight: bold;
    border: 1px solid #7bc47b;
}

/* BLOQUEO PARCIAL: MAÑANA (Rojo a la izquierda) */
.flatpickr-day.day-blocked-morning {
    background: linear-gradient(90deg, #ffcccc 50%, #9cdb9c 50%);
    color: #333;
    font-weight: bold;
    border: 1px solid #7bc47b;
}

/* ANIMACIÓN SELECCIONADOS PARCIALES */
.flatpickr-day.selected.day-blocked-morning,
.flatpickr-day.selected.day-blocked-morning:hover,
.flatpickr-day.selected.day-blocked-afternoon,
.flatpickr-day.selected.day-blocked-afternoon:hover {
    color: #ffffff;
    border-color: #ffffff;
}

.flatpickr-day.selected.day-blocked-morning {
    animation: pulse-morning 2s infinite !important;
}

.flatpickr-day.selected.day-blocked-afternoon {
    animation: pulse-afternoon 2s infinite !important;
}

/* DÍA OFICIAL (Configurado en Horario) */
.flatpickr-day.day-official-working {
    background-color: #9cdb9c;
    border-radius: 50%;
    font-weight: bold;
    color: #0b401d;
    border: 1px solid #7bc47b;
}

/* DÍA EXTRA (Permitido) - Reforzado */
.day-extra-permitted {
    background-color: #2e7d32 !important;
    border-color: #1b5e20 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border-radius: 50%;
}

/* PERMITIDO PARCIAL: MAÑANA (Verde Fuerte / Transparente) */
.flatpickr-day.day-extra-permitted-morning {
    background: linear-gradient(90deg, #2e7d32 50%, transparent 50%) !important;
    color: #333 !important;
    font-weight: bold;
    border: 1px solid #2e7d32;
}

/* PERMITIDO PARCIAL: TARDE (Transparente / Verde Fuerte) */
.flatpickr-day.day-extra-permitted-afternoon {
    background: linear-gradient(90deg, transparent 50%, #2e7d32 50%) !important;
    color: #333 !important;
    font-weight: bold;
    border: 1px solid #2e7d32;
}

/* === LOGICA HOY (No seleccionado) === */
.flatpickr-day.today {
    border-radius: 4px !important;
    font-weight: bold;
    border-width: 2px !important;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    border-radius: 4px !important;
    font-weight: bold;
    border-width: 2px !important;
}

/* Colores de Hoy si no está seleccionado */
.flatpickr-day.today.day-blocked,
.flatpickr-day.today.day-blocked:hover {
    background-color: #ffcccc !important;
    color: #cc0000 !important;
    border-color: #ff0000 !important;
}

.flatpickr-day.today.day-blocked-morning,
.flatpickr-day.today.day-blocked-morning:hover,
.flatpickr-day.today.day-blocked-afternoon,
.flatpickr-day.today.day-blocked-afternoon:hover {
    color: #333 !important;
}

.flatpickr-day.today.day-extra-permitted,
.flatpickr-day.today.day-extra-permitted:hover {
    background-color: #2e7d32 !important;
    color: #ffffff !important;
    border-color: #1b5e20 !important;
}

.flatpickr-day.today.day-official-working,
.flatpickr-day.today.day-official-working:hover {
    background-color: #9cdb9c;
    color: #0b401d;
    border-color: #7bc47b;
}

.flatpickr-day.today:not(.day-blocked):not(.day-extra-permitted):not(.day-official-working),
.flatpickr-day.today:not(.day-blocked):not(.day-extra-permitted):not(.day-official-working):hover {
    background-color: transparent !important;
    color: #333 !important;
    border-color: #959ea9 !important;
}

/* === LOGICA SELECCIONADO (Subir de color/tamaño) === */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    animation: gravity-pulse-selected 2s infinite !important;
    z-index: 10;
    border-width: 2px !important;
}

/* Shapes Override */
.flatpickr-day.selected:not(.today) {
    border-radius: 50% !important;
}

.flatpickr-day.selected.today {
    border-radius: 4px !important;
}

/* COLORES SELECCIONADO (Mismos que el estado, no azul) + HOVER */
.flatpickr-day.selected.day-blocked,
.flatpickr-day.selected.day-blocked:hover {
    color: #cc0000;
    border-color: #ff0000;
    animation: pulse-red 2s infinite !important;
}

.flatpickr-day.selected.day-extra-permitted,
.flatpickr-day.selected.day-extra-permitted:hover {
    background-color: #2e7d32 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.flatpickr-day.selected.day-official-working,
.flatpickr-day.selected.day-official-working:hover {
    color: #0b401d;
    border-color: #0b401d;
    animation: pulse-green 2s infinite !important;
}

/* Fallback Selected (Solo días vacíos) */
.flatpickr-day.selected:not(.day-blocked):not(.day-extra-permitted):not(.day-official-working) {
    background-color: #007bff !important;
    color: #fff !important;
    border-color: #007bff !important;
}

/* 5. HOY + SIN NOVEDAD (Gris/Default) */
.flatpickr-day.today:not(.day-blocked):not(.day-extra-permitted):not(.day-official-working),
.flatpickr-day.today:not(.day-blocked):not(.day-extra-permitted):not(.day-official-working).selected {
    background-color: transparent !important;
    color: #333 !important;
    border-color: #959ea9 !important;
}

/* Días Pasados (Difuminados) */
.day-past {
    opacity: 0.5 !important;
}
/* === EMAIL VERIFICATION STATUS BACKGROUNDS === */
/* Fondo verde suave para email verificado */
.bg-success-light {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
}

/* Fondo rojo claro para email no verificado */
.bg-danger-light {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
}