/**
 * MEDUCA — Estilo estándar de Select2 con optgroups
 *
 * Patrón canónico (fuente de verdad: detalle_competencias_fund.php +
 * instrumentos_evaluacion.php). Aplica el look "tipo Kubayar" a cualquier
 * <select> que se inicialice con `Meduca.initSelect2($el)` o lleve el
 * atributo `data-meduca-select2`.
 *
 * Incluye:
 *   - Trigger compacto (altura 2.5rem) con border violeta en focus
 *   - Optgroups con fondo lavanda y header violeta UPPER (INICIAL, PRIMARIO…)
 *   - Opciones resaltadas en violeta `#7663bf` con texto blanco
 *   - Search field con border-radius y focus violeta
 *   - Padding lateral mínimo en options (sin "cajas" sueltas a los lados)
 *
 * Carga vía `config/dz.php → global.css.bottom` (después de `select2.min.css`).
 *
 * Para modificar el look: editar SOLO este archivo. Las vistas individuales
 * no deberían duplicar este CSS inline.
 */

/* ────────────────────────────────────────────────────────────
   TRIGGER (parte siempre visible del select)
   ──────────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
    height: calc(2.5rem + 2px);
    border: 1px solid #DDDFE1;
    border-radius: 0.75rem;
    padding: .25rem .75rem;
    background-color: #fff;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(2.5rem - .25rem);
    padding-left: 0;
    color: #6E6E6E;
    font-size: 0.875rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.5rem + 2px);
    right: .75rem;
    top: 0;
}
/* Centrar verticalmente la flecha (`b` interno) con el alto custom */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #7663bf;
    box-shadow: 0 0 0 0.2rem rgba(124, 95, 224, 0.20);
    outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #aaa;
}

/* ────────────────────────────────────────────────────────────
   DROPDOWN (panel desplegable que aparece al abrir)
   ──────────────────────────────────────────────────────────── */
.select2-container .select2-dropdown {
    border: 1px solid #DDDFE1;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    overflow: hidden;
}

/* Option resaltada (hover/teclado) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: #7663bf;
    color: #fff;
}

/* ────────────────────────────────────────────────────────────
   OPTGROUPS (INICIAL, PRIMARIO, SECUNDARIO…)
   ──────────────────────────────────────────────────────────── */
.select2-container--default .select2-results__group {
    background: #f5f3ff;
    color: #5b21b6;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 6px 12px;
}

/* ────────────────────────────────────────────────────────────
   SEARCH FIELD (caja de búsqueda dentro del dropdown)
   ──────────────────────────────────────────────────────────── */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #DDDFE1;
    border-radius: 0.5rem;
    padding: .35rem .65rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #7663bf;
    outline: none;
}

/* ────────────────────────────────────────────────────────────
   OPCIONES (cada item del dropdown)
   ──────────────────────────────────────────────────────────── */
.select2-results__option {
    font-size: 0.875rem;
    padding: 8px 12px;
}

/* ────────────────────────────────────────────────────────────
   ESTADO DESHABILITADO
   ──────────────────────────────────────────────────────────── */
.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #f5f5f5;
    cursor: not-allowed;
}