/* === Estilo base para Select2 single === */
.select2-container--default .select2-selection--single {
    background-color: #ffffff !important; /* blanco */
    border: 1px solid #d1d5db !important; /* gris claro */
    border-radius: 0.375rem !important;
    padding: 0.25rem 0.5rem !important;
    height: 2.25rem !important;
    font-size: 0.875rem !important;
    color: #1f2937 !important; /* text-gray-800 */
}

/* Texto dentro */
.select2-container--default .select2-selection__rendered {
    color: #1f2937 !important; /* gris-800 */
    line-height: 2rem !important;
    padding-left: 0.25rem !important;
}

/* Flecha */
.select2-container--default .select2-selection__arrow {
    height: 100% !important;
}

/* Focus */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.3) !important; /* azul suave */
    border-color: #3b82f6 !important; /* azul-500 */
}

/* === Dropdown === */
.select2-container--default .select2-dropdown {
    background-color: #ffffff !important; /* fondo blanco */
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
    font-size: 0.875rem !important;
    z-index: 9999 !important;
}

/* Opciones */
.select2-container--default .select2-results__option {
    padding: 0.5rem !important;
    cursor: pointer !important;
}

/* Hover / seleccionado */
.select2-container--default .select2-results__option--highlighted {
    background-color: #e5e7eb !important; /* gray-200 */
    color: #111827 !important; /* gray-900 */
}

/* === Select2 múltiple === */
.select2-container--default .select2-selection--multiple {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    min-height: 2.25rem !important;
    padding: 0.25rem !important;
    font-size: 0.875rem !important;
    color: #1f2937 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Chips */
.select2-container--default .select2-selection__choice {
    background-color: #f3f4f6 !important; /* gray-100 */
    border: 1px solid #d1d5db !important;
    border-radius: 0.25rem !important;
    margin: 0.125rem !important;
    color: #1f2937 !important;
    font-size: 0.75rem !important;
}

/* Botón de eliminar chip */
.select2-container--default .select2-selection__choice__remove {
    color: #b91c1c !important; /* rojo */
    margin-right: 0.25rem !important;
    border-radius: 0.25rem;
    padding: 0 2px;
    transition: 0.2s ease;
    cursor: pointer;
}

.select2-container--default .select2-selection__choice__remove:hover {
    background-color: #dc2626 !important; /* rojo más fuerte */
    color: white !important;
    transform: scale(1.1);
}


/* === Select2 (modo claro) dentro de #form-create-department === */

/* Campo principal (select simple) */
#form-create-department .select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    padding: 0.25rem 0.5rem !important;
    height: 2.25rem !important;
    font-size: 0.875rem !important;
    color: #111827 !important; /* texto casi negro */
}

/* Foco */
#form-create-department .select2-container--default .select2-selection--single:focus,
#form-create-department .select2-container--default .select2-selection--single:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important; /* azul suave */
    border-color: #2563eb !important;
}

/* Texto mostrado */
#form-create-department .select2-container--default .select2-selection__rendered {
    color: #111827 !important;
    line-height: 2rem !important;
    padding-left: 0.25rem !important;
}

/* Flecha desplegable */
#form-create-department .select2-container--default .select2-selection__arrow {
    height: 100% !important;
}

/* === Dropdown general === */
#form-create-department .select2-container--default .select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important; /* gris muy claro */
    color: #111827 !important;
    font-size: 0.875rem !important;
    z-index: 9999 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Contenedor de resultados */
#form-create-department .select2-container--default .select2-results {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-radius: 0.375rem !important;
    max-height: 14rem !important;
    overflow-y: auto !important;
}

/* Lista de opciones */
#form-create-department .select2-container--default .select2-results__options {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Opción normal */
#form-create-department .select2-container--default .select2-results__option {
    padding: 0.5rem 0.75rem !important;
    cursor: pointer !important;
    color: #111827 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover */
#form-create-department .select2-container--default .select2-results__option--highlighted {
    background-color: #f3f4f6 !important; /* gris claro al hover */
    color: #111827 !important;
}

/* Opción seleccionada */
#form-create-department .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #dbeafe !important; /* azul muy claro */
    color: #1d4ed8 !important; /* azul oscuro */
    font-weight: 500 !important;
}

/* Mensaje "sin resultados" */
#form-create-department .select2-container--default .select2-results__message {
    color: #6b7280 !important; /* gris medio */
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
    background-color: #ffffff !important;
}

/* === Select2 múltiple === */
#form-create-department .select2-container--default .select2-selection--multiple {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    min-height: 2.25rem !important;
    padding: 0.25rem !important;
    font-size: 0.875rem !important;
    color: #111827 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Chips seleccionados */
#form-create-department .select2-container--default .select2-selection__choice {
    background-color: #e5e7eb !important; /* gris muy claro */
    border: none !important;
    border-radius: 0.25rem !important;
    margin: 0.125rem !important;
    color: #111827 !important;
    font-size: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}

/* Botón de eliminar chip */
#form-create-department .select2-container--default .select2-selection__choice__remove {
    color: #dc2626 !important;
    background-color: transparent !important;
    margin-right: 0.25rem !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

#form-create-department .select2-container--default .select2-selection__choice__remove:hover {
    background-color: #dc2626 !important;
    color: white !important;
    transform: scale(1.1);
}

/* === Estilo base para Select2 single (Dark Mode) === */
.dark .select2-container--default .select2-selection--single {
    background-color: #1f2937 !important; /* gris oscuro */
    border: 1px solid #374151 !important; /* gris medio-oscuro */
    border-radius: 0.375rem !important;
    padding: 0.25rem 0.5rem !important;
    height: 2.25rem !important;
    font-size: 0.875rem !important;
    color: #f9fafb !important; /* texto claro */
}

/* Texto dentro */
.dark .select2-container--default .select2-selection__rendered {
    color: #f9fafb !important;
    line-height: 2rem !important;
    padding-left: 0.25rem !important;
}

/* Flecha */
.dark .select2-container--default .select2-selection__arrow {
    height: 100% !important;
}

/* Focus */
.dark .select2-container--default .select2-selection--single:focus,
.dark .select2-container--default .select2-selection--single:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(147,197,253,0.4) !important; /* azul suave */
    border-color: #60a5fa !important; /* azul claro */
}

/* === Dropdown === */
.dark .select2-container--default .select2-dropdown {
    background-color: #1f2937 !important; /* fondo oscuro */
    border: 1px solid #374151 !important;
    color: #f9fafb !important;
    font-size: 0.875rem !important;
    z-index: 9999 !important;
}

/* Opciones */
.dark .select2-container--default .select2-results__option {
    padding: 0.5rem !important;
    cursor: pointer !important;
}

/* Hover / seleccionado */
.dark .select2-container--default .select2-results__option--highlighted {
    background-color: #374151 !important; /* gris más claro que fondo */
    color: #f9fafb !important;
}

/* === Select2 múltiple === */
.dark .select2-container--default .select2-selection--multiple {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 0.375rem !important;
    min-height: 2.25rem !important;
    padding: 0.25rem !important;
    font-size: 0.875rem !important;
    color: #f9fafb !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Chips */
.dark .select2-container--default .select2-selection__choice {
    background-color: #374151 !important; /* gris medio */
    border: 1px solid #4b5563 !important;
    border-radius: 0.25rem !important;
    margin: 0.125rem !important;
    color: #f9fafb !important;
    font-size: 0.75rem !important;
}

/* Botón de eliminar chip */
.dark .select2-container--default .select2-selection__choice__remove {
    color: #f87171 !important; /* rojo claro */
    margin-right: 0.25rem !important;
    border-radius: 0.25rem;
    padding: 0 2px;
    transition: 0.2s ease;
    cursor: pointer;
}

.dark .select2-container--default .select2-selection__choice__remove:hover {
    background-color: #dc2626 !important; /* rojo más intenso */
    color: white !important;
    transform: scale(1.1);
}

/* === Select2 dentro de #form-create-department (Dark Mode) === */
.dark #form-create-department .select2-container--default .select2-selection--single {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 0.375rem !important;
    padding: 0.25rem 0.5rem !important;
    height: 2.25rem !important;
    font-size: 0.875rem !important;
    color: #f9fafb !important;
}

.dark #form-create-department .select2-container--default .select2-selection--single:focus,
.dark #form-create-department .select2-container--default .select2-selection--single:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(147,197,253,0.4) !important;
    border-color: #60a5fa !important;
}

.dark #form-create-department .select2-container--default .select2-selection__rendered {
    color: #f9fafb !important;
    line-height: 2rem !important;
    padding-left: 0.25rem !important;
}

.dark #form-create-department .select2-container--default .select2-selection__arrow {
    height: 100% !important;
}

/* Dropdown general */
.dark #form-create-department .select2-container--default .select2-dropdown {
    background-color: #1f2937 !important;
    border: 1px solid #4b5563 !important;
    color: #f9fafb !important;
    font-size: 0.875rem !important;
    z-index: 9999 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Contenedor de resultados */
.dark #form-create-department .select2-container--default .select2-results {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-radius: 0.375rem !important;
    max-height: 14rem !important;
    overflow-y: auto !important;
}

/* Lista de opciones */
.dark #form-create-department .select2-container--default .select2-results__options {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Opción normal */
.dark #form-create-department .select2-container--default .select2-results__option {
    padding: 0.5rem 0.75rem !important;
    cursor: pointer !important;
    color: #f9fafb !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover */
.dark #form-create-department .select2-container--default .select2-results__option--highlighted {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

/* Opción seleccionada */
.dark #form-create-department .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #2563eb !important; /* azul oscuro */
    color: #f9fafb !important;
    font-weight: 500 !important;
}

/* Mensaje "sin resultados" */
.dark #form-create-department .select2-container--default .select2-results__message {
    color: #9ca3af !important; /* gris claro */
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
    background-color: #1f2937 !important;
}

/* Select2 múltiple */
.dark #form-create-department .select2-container--default .select2-selection--multiple {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 0.375rem !important;
    min-height: 2.25rem !important;
    padding: 0.25rem !important;
    font-size: 0.875rem !important;
    color: #f9fafb !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Chips seleccionados */
.dark #form-create-department .select2-container--default .select2-selection__choice {
    background-color: #374151 !important;
    border: none !important;
    border-radius: 0.25rem !important;
    margin: 0.125rem !important;
    color: #f9fafb !important;
    font-size: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}

/* Botón de eliminar chip */
.dark #form-create-department .select2-container--default .select2-selection__choice__remove {
    color: #f87171 !important;
    background-color: transparent !important;
    margin-right: 0.25rem !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.dark #form-create-department .select2-container--default .select2-selection__choice__remove:hover {
    background-color: #dc2626 !important;
    color: white !important;
    transform: scale(1.1);
}

#GlobalContent .modal-task{
    background-color: white !important;
}

.dark #GlobalContent .modal-task {
    background-color: transparent !important;
}

.select2.select2-container.select2-container--default{
    width: 100% !important;
}