/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 27/07/2022, 04:09:49 PM
    Author     : aanzola
*/
/*/ tamaño iconos y titulos alertas /*/
.alertaBasicaAsonac-icon-title {
    font-family: inherit;
    font-size: 100%;
    color: #e61a2e;
    line-height: 0.2;
}
.alertaBasicaAsonac-title {
    font-family: inherit;
    font-size: 100%;
    color: #e61a2e;
}

.alertaBasicaAsonac-titleConfirm {
    font-family: inherit;
    font-size: 100%;
    color: #e61a2e;
}
.alertaBasicaAsonac-icon {
    font-family: inherit;
    font-size: 70%;
    cursor: pointer;
}

.alertaBasicaAsonac-titleError {
    font-family: inherit;
    font-size: 100%;
    color: #2362b7;
    line-height: 0.2;
}
.alertaBasicaAsonac-confirm {
    font-family: inherit;
    font-size: 100%;
    color: #F27474;
    line-height: 0.2;
}
.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: initial;
    background-image: initial;
    background-color: #F5A623 !important;
    color: #fff;
    font-size: 1em;
}
.verpass{
    opacity: 50%;
}
.swal2-html-container{
    max-height: 10em;
}



/* Estilos compactos para el tema naranja */
.btn-orange {
    background-color: #FF6B00;
    color: white;
    border: none;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.btn-orange:hover {
    background-color: #E65100;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 107, 0, 0.2);
}

.table-orange {
    --bs-table-hover-bg: rgba(255, 107, 0, 0.05);
    border-color: rgba(255, 107, 0, 0.1);
    font-size: 0.85rem;
}

.table-orange tr:hover {
    border-left: 2px solid #FF6B00;
    background-color: rgba(255, 107, 0, 0.03);
}

.text-orange {
    color: #FF6B00;
}

.text-orange-dark {
    color: #E65100;
}

.text-orange-soft {
    color: #FFA04D;
}

.bg-orange-ultralight {
    background-color: #FFF5EB;
}

.alert-orange-light {
    background-color: rgba(255, 107, 0, 0.1);
    border-color: rgba(255, 107, 0, 0.2);
    padding: 0.5rem;
}

.badge-success-soft {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.badge-danger-soft {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}


/* Contenedor Principal */
.ts-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px !important;
    border: 1px solid #a8d4ff !important;
    border-radius: 8px !important; /* Bordes más redondeados */
    padding: 0 !important;
    background-color: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important; /* Transición suave para hover/focus */
}

/* Efecto Hover y Focus */
.ts-wrapper:hover {
    border-color: #1c2b55 !important; /* Azul claro */
    box-shadow: 0 0 0 2px rgba(82, 180, 255, 0.1) !important;
}
.ts-wrapper.focus {
    border-color: #52b4ff !important;
    box-shadow: 0 0 0 3px rgba(82, 180, 255, 0.2) !important;
}

/* Área de Control (Input) */
.ts-control {
    padding: 6px 12px !important;
    font-size: 1rem !important;
    min-height: 38px !important;
    border: none !important;
    background-color: transparent !important;
    color: #495057 !important;
}

/* Ítems Seleccionados (Tags) */
.ts-control .item {
    background: linear-gradient(to right, #52b4ff, #008ffc); /* Gradiente Azul */
    color: white !important;
    border-radius: 6px !important; /* Más redondeado */
    padding: 2px 8px !important;
    font-size: 14px !important;
    margin-right: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease !important; /* Efecto al hover */
}
.ts-control .item:hover {
    transform: translateY(-1px) !important; /* Levanta ligeramente */
}

/* Icono de Eliminar (×) */
.ts-control .item .remove {
    color: white !important;
    margin-left: 6px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding-left: 6px !important;
}

/* Dropdown (Lista de Opciones) - Fondo Sólido */
.ts-dropdown {
    background-color: var(--bs-body-bg, #ffffff) !important;
    color: var(--bs-body-color, #212529) !important;
    border: 1px solid var(--bs-border-color, #ced4da) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    animation: fadeInDropdown 0.2s ease;
    backdrop-filter: none !important; /* Elimina transparencia por blur */
    -webkit-backdrop-filter: none !important;
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Opciones del Dropdown */
.ts-dropdown .option {
    color: #d4edda !important;
    background-color: transparent !important;
    padding: 10px 12px !important;
    transition: all 0.2s ease !important;
}

.ts-dropdown .option:hover {
    background-color: #e9f5ee !important;
    color: #218838 !important;
}
.ts-dropdown .option.selected {
    background: linear-gradient(to right, #28a745, #218838) !important;
    color: white !important;
    font-weight: 500 !important;
}

/* Placeholder */
.ts-control input::placeholder {
    color: #6c757d !important;
    opacity: 0.7 !important;
}

/* === Estilos para TomSelect (compatibles con modo oscuro) === */
.ts-wrapper {
    background-color: var(--bs-body-bg) !important; /* Fondo automático */
    border-color: var(--bs-border-color) !important; /* Borde coherente */
    color: var(--bs-body-color) !important; /* Texto automático */
}

/* Opciones */
.ts-dropdown .option {
    color: var(--bs-body-color) !important;
}

.ts-dropdown .option.selected {
    background: linear-gradient(to right, #28a745, #218838) !important;
    color: white !important;
    font-weight: 500 !important;
}