/*---------------------------------------------------FUENTE MONTSERRAT---------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

title {
    color: #1e90ff; /* Color azul */
    font-size: 24px; /* Tamaño de fuente 24px */
    font-weight: bold; /* Negrita */
    text-align: center; /* Alineación centrada */
    margin-bottom: 20px; /* Margen inferior de 20px */
    font-family: "Arial", sans-serif; /* Fuente Arial */
}

/*---------------------CHECKBOX - CambioValor.Blade.php---------------------*/
.switch {
    position: relative; /* Posición relativa para el contenedor del switch */
    display: inline-block; /* Mostrar como bloque en línea */
    width: 50px; /* Ancho del switch */
    height: 30px; /* Altura del switch */
}

.switch input {
    opacity: 0; /* Hacer el input invisible */
    width: 0; /* Ancho 0 para ocultar el input */
    height: 0; /* Altura 0 para ocultar el input */
}

.slider {
    position: absolute; /* Posición absoluta para el slider */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el slider */
    top: 0; /* Posición superior del slider */
    left: 0; /* Posición izquierda del slider */
    right: 0; /* Posición derecha del slider */
    bottom: 0; /* Posición inferior del slider */
    background-color: #ccc; /* Color de fondo gris claro */
    -webkit-transition: 0.4s; /* Transición suave para el cambio de color */
    transition: 0.4s; /* Transición suave para el cambio de color */
}

.slider:before {
    position: absolute; /* Posición absoluta para el círculo del slider */
    content: ""; /* Contenido vacío para el círculo */
    height: 20px; /* Altura del círculo */
    width: 20px; /* Ancho del círculo */
    left: 4px; /* Posición izquierda del círculo */
    bottom: 5px; /* Posición inferior del círculo */
    background-color: white; /* Color de fondo blanco */
    -webkit-transition: 0.2s; /* Transición suave para el movimiento del círculo */
    transition: 0.2s; /* Transición suave para el movimiento del círculo */
}

input:checked + .slider {
    background-color: #ffae00ff;
}

input:checked + .slider:before {
    -webkit-transform: translateX(
        22px
    ); /* Mover el círculo a la derecha cuando está seleccionado */
    -ms-transform: translateX(
        22px
    ); /* Mover el círculo a la derecha cuando está seleccionado */
    transform: translateX(
        22px
    ); /* Mover el círculo a la derecha cuando está seleccionado */
}

.slider.round {
    border-radius: 34px; /* Bordes redondeados del slider */
}

.slider.round:before {
    border-radius: 50%; /* Bordes redondeados del círculo */
}

/* ===========================
SweetAlert2 - MODO CLARO
=========================== */
.swal2-popup {
    font-family: "Montserrat";
    font-size: 16px;
    border-radius: 1rem;
    padding: 2em;
    background-color: #f9f9f9; /* fondo claro */
    color: #333; /* texto */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.swal2-title {
    font-size: 22px;
    font-weight: bold;
    color: #2c3e50;
}

.swal2-html-container {
    font-size: 16px;
    color: #555;
}

.swal2-confirm {
    background-color: #7ca841 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 25px !important;
    font-weight: 600;
}

.swal2-cancel {
    background-color: #e74c3c !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 25px !important;
    font-weight: 600;
}

.swal2-icon-success {
    border-color: #28a745 !important;
    color: #28a745 !important;
}

.swal2-icon-error {
    border-color: #e74c3c !important;
    color: #e74c3c !important;
}

.swal2-icon-warning {
    border-color: #f39c12 !important;
    color: #f39c12 !important;
}

.swal2-icon-info {
    border-color: #3498db !important;
    color: #3498db !important;
}

/* ===========================
SweetAlert2 - MODO OSCURO
=========================== */
html.dark .swal2-popup {
    background-color: rgb(9 9 11); /* slate-800 */
    color: #e2e8f0; /* texto claro */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

html.dark .swal2-title {
    color: #f1f5f9; /* slate-100 */
}

html.dark .swal2-html-container {
    color: #cbd5e1; /* slate-300 */
}

html.dark .swal2-confirm {
    background-color: #7ca841 !important;
    color: white !important;
}

html.dark .swal2-cancel {
    background-color: #ef4444 !important; /* rojo vivo */
    color: white !important;
}

html.dark .swal2-icon-success {
    border-color: #22c55e !important; /* green-500 */
    color: #22c55e !important;
}

html.dark .swal2-icon-error {
    border-color: #f87171 !important; /* red-400 */
    color: #f87171 !important;
}

html.dark .swal2-icon-warning {
    border-color: #facc15 !important; /* yellow-400 */
    color: #facc15 !important;
}

html.dark .swal2-icon-info {
    border-color: #38bdf8 !important; /* sky-400 */
    color: #38bdf8 !important;
}

/* ===========================
Filament Card Hover Effect
=========================== */
.card-hover {
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

.card-hover:hover {
    transform: translateY(-3px);
}

.state-pill {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
/* Custom Scrollbar - Modal */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    margin: 15px 0;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569;
}