/* ============================================================
   select-custom.css — Desplegable personalizado (estética Undelta)
   ============================================================ */

/* El <select> nativo queda oculto pero accesible para el formulario */
.cs-native {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    opacity: 0; pointer-events: none;
}

.cs { position: relative; width: 100%; }

/* Botón visible (igual estética que los inputs) */
.cs-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    border-radius: 10px;
    border: 1px solid var(--cream-2, #ddd2b8);
    background: #fff;
    color: var(--ink, #262a33);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.cs-trigger:hover { border-color: #c8bd9f; }
.cs-open .cs-trigger,
.cs-trigger:focus-visible {
    border-color: var(--lime, #a4c23a);
    box-shadow: 0 0 0 3px rgba(164, 194, 58, .28);
}

.cs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-label.cs-placeholder { color: #a7a392; }

/* Flechita */
.cs-arrow {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--ink-soft, #5c6470);
    border-bottom: 2px solid var(--ink-soft, #5c6470);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s;
}
.cs-open .cs-arrow { transform: rotate(-135deg) translateY(-1px); }

/* Panel desplegable */
.cs-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 264px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--cream-2, #ddd2b8);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(38, 42, 51, .22);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.cs-open .cs-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Título de grupo (optgroup) */
.cs-group-title {
    padding: 9px 11px 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-soft, #5c6470);
}

/* Opción */
.cs-option {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink, #262a33);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.cs-option:hover { background: rgba(164, 194, 58, .16); }
.cs-option.cs-sel {
    background: rgba(164, 194, 58, .26);
    font-weight: 600;
}

/* Estado de error (lo marca validacion.js sobre .field) */
.field.campo-error .cs-trigger {
    border-color: #a4c23a !important;
    box-shadow: 0 0 0 3px rgba(164, 194, 58, .30) !important;
}

/* Scrollbar discreta dentro del panel */
.cs-panel::-webkit-scrollbar { width: 9px; }
.cs-panel::-webkit-scrollbar-thumb {
    background: #d7ccb2; border-radius: 8px; border: 2px solid #fff;
}