/* EasyCombo (EasyComponentes/Combobox): usa los tokens --easy-color-* que define la aplicación; cada una se puede sobrescribir con --easy-combo-*
   Esquinas: todas salen de --easy-radio-base con la escala de la librería (ver easygrid.css) */

.easy-combo {
    --easy-combo-bg: var(--easy-color-campo, #fff);
    --easy-combo-texto: var(--easy-color-campo-texto, #1f2430);
    --easy-combo-borde: var(--easy-color-campo-borde, #ced4da);
    --easy-combo-tenue: var(--easy-color-texto-tenue, #6b7280);
    --easy-combo-acento: var(--easy-color-primario, #940404);
    --easy-combo-acento-suave: var(--easy-color-primario-suave, #fbeaea);
    --easy-combo-foco: var(--easy-color-foco, rgba(148, 4, 4, .25));
    --easy-combo-peligro: var(--easy-color-peligro, #b42318);
    --easy-combo-popup: var(--easy-color-popup, #fff);
    --easy-combo-popup-borde: var(--easy-color-borde, #e5e7eb);
    --easy-combo-hover: var(--easy-color-hover, #f3f4f6);
    --easy-combo-radio: var(--easy-radio-base, 8px);
    --easy-combo-radio-sm: calc(var(--easy-combo-radio) * .75);
    --easy-combo-alto: 36px;

    position: relative;
    display: block;
    min-width: 0;
    color: var(--easy-combo-texto);
    font-size: calc(14px * var(--easy-escala-fuente, 1));
}
.easy-combo.easy-combo-sm { --easy-combo-alto: 30px; font-size: calc(13px * var(--easy-escala-fuente, 1)); }

.easy-combo-etiqueta { display: block; margin: 0 0 4px; font-size: calc(12px * var(--easy-escala-fuente, 1)); font-weight: 600; color: var(--easy-combo-tenue); }

/* ---------- Campo ---------- */

.easy-combo-campo {
    display: flex;
    align-items: center;
    gap: 2px;
    height: var(--easy-combo-alto);
    padding: 0 4px 0 10px;
    background: var(--easy-combo-bg);
    border: 1px solid var(--easy-combo-borde);
    border-radius: var(--easy-combo-radio);
    transition: border-color .12s, box-shadow .12s;
}
.easy-combo:not(.deshabilitado):not(.solo-lectura) .easy-combo-campo:hover { border-color: color-mix(in srgb, var(--easy-combo-acento) 45%, var(--easy-combo-borde)); }
.easy-combo-campo:focus-within,
.easy-combo.abierto .easy-combo-campo { border-color: var(--easy-combo-acento); box-shadow: 0 0 0 3px var(--easy-combo-foco); }
.easy-combo.invalido .easy-combo-campo { border-color: var(--easy-combo-peligro); }
.easy-combo.invalido .easy-combo-campo:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--easy-combo-peligro) 25%, transparent); }
.easy-combo.deshabilitado .easy-combo-campo { opacity: .6; background: color-mix(in srgb, var(--easy-combo-texto) 5%, var(--easy-combo-bg)); cursor: not-allowed; }
.easy-combo.solo-lectura .easy-combo-campo { background: color-mix(in srgb, var(--easy-combo-texto) 3%, var(--easy-combo-bg)); }

.easy-combo-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-overflow: ellipsis;
}
.easy-combo-input::placeholder { color: var(--easy-combo-tenue); opacity: .8; }
.easy-combo-input:disabled { cursor: not-allowed; }

.easy-combo-btn {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--easy-combo-radio-sm);
    background: transparent;
    color: var(--easy-combo-tenue);
    cursor: pointer;
}
.easy-combo-btn:hover:not(:disabled) { background: var(--easy-combo-hover); color: var(--easy-combo-texto); }
.easy-combo-btn:disabled { cursor: inherit; }
.easy-combo-flecha .easy-grid-ico { transition: transform .15s; }
.easy-combo.abierto .easy-combo-flecha .easy-grid-ico { transform: rotate(180deg); }
.easy-combo.solo-lectura .easy-combo-flecha { display: none; }

.easy-combo-spin {
    flex: none;
    width: 14px;
    height: 14px;
    margin: 0 4px;
    border: 2px solid color-mix(in srgb, var(--easy-combo-acento) 25%, transparent);
    border-top-color: var(--easy-combo-acento);
    border-radius: 50%;
    animation: easy-combo-giro .7s linear infinite;
}
@keyframes easy-combo-giro { to { transform: rotate(360deg); } }

/* ---------- Popup ---------- */

.easy-combo-popup {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--easy-combo-popup);
    color: var(--easy-combo-texto);
    border: 1px solid var(--easy-combo-popup-borde);
    border-radius: calc(var(--easy-combo-radio) * 1.25);
    box-shadow: var(--easy-sombra-popup, 0 10px 30px rgba(17, 24, 39, .18));
    font-size: inherit;
    transform-origin: top center;
    animation: easy-combo-entra var(--easy-duracion-entrada, .22s) ease-out;
}
.easy-combo-popup:not([data-listo]) { visibility: hidden; }
.easy-combo-popup.easy-combo-arriba { transform-origin: bottom center; }
@keyframes easy-combo-entra { from { opacity: 0; transform: translateY(-4px) scale(.99); } }

.easy-combo-head {
    flex: none;
    padding: 6px 10px;
    border-bottom: 1px solid var(--easy-combo-popup-borde);
    background: color-mix(in srgb, var(--easy-combo-texto) 4%, var(--easy-combo-popup));
    color: var(--easy-combo-tenue);
    font-size: .88em;
    font-weight: 600;
}
.easy-combo-pie { flex: none; padding: 6px 10px; border-top: 1px solid var(--easy-combo-popup-borde); color: var(--easy-combo-tenue); font-size: .88em; }

.easy-combo-lista {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(var(--easy-combo-item, 34px) * var(--easy-combo-filas, 8));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    scrollbar-width: thin;
}

.easy-combo-op {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--easy-combo-item, 34px);
    padding: 0 10px;
    cursor: pointer;
    user-select: none;
}
.easy-combo-op.activa { background: var(--easy-combo-hover); }
.easy-combo-op.sel { color: var(--easy-combo-acento); font-weight: 600; background: color-mix(in srgb, var(--easy-combo-acento-suave) 55%, transparent); }
.easy-combo-op.sel.activa { background: var(--easy-combo-acento-suave); }
.easy-combo-op-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.easy-combo-op-ok { flex: none; display: inline-grid; }

/* Plantillas de varias columnas: <div class="easy-combo-cols" style="--easy-combo-cols: 2fr 1fr 1fr"> ... </div> */
.easy-combo-cols { flex: 1; min-width: 0; display: grid; grid-template-columns: var(--easy-combo-cols, 1fr); gap: 12px; align-items: center; }
.easy-combo-cols > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.easy-combo-head .easy-combo-cols { text-transform: uppercase; letter-spacing: .03em; font-size: .92em; }

.easy-combo-esqueleto span {
    display: block;
    width: 60%;
    height: 10px;
    border-radius: var(--easy-combo-radio-sm);
    background: linear-gradient(90deg, var(--easy-combo-hover), color-mix(in srgb, var(--easy-combo-texto) 12%, var(--easy-combo-hover)), var(--easy-combo-hover));
    background-size: 200% 100%;
    animation: easy-combo-brillo 1.1s linear infinite;
}
@keyframes easy-combo-brillo { to { background-position: -200% 0; } }

.easy-combo-msg { padding: 14px 12px; text-align: center; color: var(--easy-combo-tenue); font-size: .93em; }
.easy-combo-msg-error { color: var(--easy-combo-peligro); }

@media (prefers-reduced-motion: reduce) {
    .easy-combo-popup, .easy-combo-spin, .easy-combo-esqueleto span { animation: none; }
    .easy-combo-flecha .easy-grid-ico { transition: none; }
}

/* ---------- Grupos, texto libre, opciones deshabilitadas, ayuda ---------- */
.easy-combo-grupo {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 10px 4px;
    background: color-mix(in srgb, var(--easy-combo-texto) 4%, var(--easy-combo-popup));
    border-bottom: 1px solid var(--easy-combo-popup-borde);
    color: var(--easy-combo-tenue);
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.easy-combo-op.deshabilitada { opacity: .45; cursor: not-allowed; }
.easy-combo-op.deshabilitada.activa { background: transparent; }
.easy-combo-libre { flex: none; border-top: 1px solid var(--easy-combo-popup-borde); color: var(--easy-combo-acento); font-style: italic; }
.easy-combo-libre:hover { background: var(--easy-combo-hover); }
.easy-combo-req { color: var(--easy-combo-peligro); }
.easy-combo-ayuda { margin-top: 3px; font-size: calc(12px * var(--easy-escala-fuente, 1)); color: var(--easy-combo-tenue); }
.easy-combo-ayuda-error { color: var(--easy-combo-peligro); }