/* Estilos complementarios para la Gestión de Renovaciones */

/* BADGES DE ESTADO (Mapeo manual para Data Attributes) */
.status-badge {
    background-color: #f3f4f6; /* gray-100 */
    color: #4b5563; /* gray-600 */
}

    .status-badge[data-status*="ACEPTADA"] {
        background-color: #d1fae5; /* emerald-100 */
        color: #047857; /* emerald-700 */
    }

    .status-badge[data-status*="ANULADA"] {
        background-color: #ffe4e6; /* rose-100 */
        color: #be123c; /* rose-700 */
    }

    .status-badge[data-status*="EN PROCESO"],
    .status-badge[data-status*="PROCESO"] {
        background-color: #fef3c7; /* amber-100 */
        color: #b45309; /* amber-700 */
    }

    .status-badge[data-status*="PENDIENTE"] {
        background-color: #e0f2fe; /* sky-100 */
        color: #0369a1; /* sky-700 */
    }

    .status-badge[data-status*="ENVIADA"] {
        background-color: #e0e7ff; /* indigo-100 */
        color: #4338ca; /* indigo-700 */
    }

/* BORDES LATERALES DE TARJETA (Mismos colores) */
.status-border[data-status*="ACEPTADA"] {
    background-color: #10b981;
}
/* emerald-500 */
.status-border[data-status*="ANULADA"] {
    background-color: #f43f5e;
}
/* rose-500 */
.status-border[data-status*="PROCESO"] {
    background-color: #f59e0b;
}
/* amber-500 */
.status-border[data-status*="PENDIENTE"] {
    background-color: #0ea5e9;
}
/* sky-500 */
.status-border[data-status*="ENVIADA"] {
    background-color: #6366f1;
}
/* indigo-500 */

/* Animación de entrada */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   ESTILOS COMPLEMENTARIOS PARA GESTIÓN
   (Colores dinámicos y Scrollbar)
   ========================================= */

/* 1. BADGES DE ESTADO (Mapeo manual para Data Attributes) */
/* Esto permite que el JS cambie el color según el texto del estado */

.status-badge {
    background-color: #f3f4f6; /* gray-100 */
    color: #4b5563; /* gray-600 */
}

    .status-badge[data-status*="ACEPTADA"] {
        background-color: #d1fae5; /* emerald-100 */
        color: #047857; /* emerald-700 */
    }

    .status-badge[data-status*="ANULADA"] {
        background-color: #ffe4e6; /* rose-100 */
        color: #be123c; /* rose-700 */
    }

    .status-badge[data-status*="EN PROCESO"],
    .status-badge[data-status*="PROCESO"] {
        background-color: #fef3c7; /* amber-100 */
        color: #b45309; /* amber-700 */
    }

    .status-badge[data-status*="PENDIENTE"] {
        background-color: #e0f2fe; /* sky-100 */
        color: #0369a1; /* sky-700 */
    }

    .status-badge[data-status*="ENVIADA"] {
        background-color: #e0e7ff; /* indigo-100 */
        color: #4338ca; /* indigo-700 */
    }

/* 2. BORDES LATERALES DE TARJETA (Mismos colores) */
.status-border {
    background-color: #e5e7eb;
}
    /* Default */
    .status-border[data-status*="ACEPTADA"] {
        background-color: #10b981;
    }
    /* emerald-500 */
    .status-border[data-status*="ANULADA"] {
        background-color: #f43f5e;
    }
    /* rose-500 */
    .status-border[data-status*="PROCESO"] {
        background-color: #f59e0b;
    }
    /* amber-500 */
    .status-border[data-status*="PENDIENTE"] {
        background-color: #0ea5e9;
    }
    /* sky-500 */
    .status-border[data-status*="ENVIADA"] {
        background-color: #6366f1;
    }
/* indigo-500 */


/* 3. ANIMACIÓN DE ENTRADA */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none; /* Quitamos la flecha por defecto para poner la nuestra con FontAwesome */
}
/* Colores específicos para las opciones del Select de Estado (Opcional visual) */
option[value="PLZ ACEPTADA"] {
    color: #047857;
    font-weight: bold;
}

option[value="ANULADA"] {
    color: #be123c;
    font-weight: bold;
}

option[value="PLZ ENVIADA"] {
    color: #4338ca;
    font-weight: bold;
}

/* 4. SCROLLBAR PERSONALIZADO (Para el Modal) */
/* Hace que la barra de desplazamiento dentro del modal sea fina y elegante */

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 4px;
    border: 2px solid #ffffff;
}

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #9ca3af;
    }