/* Koderasoft · combos. Los colores vienen de variables que define cada layout (--k-combo-*). */
.k-combo { position: relative; }
.k-combo-nativo { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; }

/* Botón */
.k-combo-boton {
    display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 46px;
    padding: .55rem .8rem .55rem .95rem; text-align: left; font: inherit; font-size: 1rem;
    color: var(--k-combo-texto, #1F1D2E); background: var(--k-combo-fondo, #fff);
    border: 1px solid var(--k-combo-borde, #D9D6E3); border-radius: 10px; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.k-combo-boton:hover { border-color: var(--k-combo-borde-hover, #B9B5C9); }
.k-combo-boton:focus-visible, .k-combo.abierto .k-combo-boton {
    outline: 0; border-color: var(--k-combo-acento, #FF6B4A);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-combo-acento, #FF6B4A) 20%, transparent);
}
.k-combo-boton:disabled { opacity: .55; cursor: not-allowed; }
.k-combo-boton.is-invalid { border-color: #e5484d; }
.k-combo-adorno { display: inline-flex; flex: none; }
.k-combo-adorno[hidden] { display: none; }
.k-combo-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-combo-placeholder .k-combo-texto { color: var(--k-combo-suave, #6C6880); }
.k-combo-flecha { display: inline-flex; flex: none; color: var(--k-combo-suave, #6C6880); transition: transform .2s ease, color .2s ease; }
.k-combo.abierto .k-combo-flecha { transform: rotate(180deg); color: var(--k-combo-acento, #FF6B4A); }

/* Panel desplegable */
.k-combo-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1060; min-width: 220px;
    padding: 6px; background: var(--k-combo-lista, #fff); border-radius: 14px;
    box-shadow: 0 0 0 1px var(--k-combo-borde, #D9D6E3), 0 20px 44px -16px rgba(0, 0, 0, .35), 0 4px 10px -4px rgba(0, 0, 0, .12);
    opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.985); transform-origin: top center;
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.k-combo.hacia-arriba .k-combo-panel { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; transform: translateY(4px) scale(.985); }
.k-combo.abierto .k-combo-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .14s ease, transform .14s ease, visibility 0s; }

.k-combo-buscar { position: relative; display: flex; align-items: center; margin-bottom: 6px; color: var(--k-combo-suave, #6C6880); }
.k-combo-buscar svg { position: absolute; left: 11px; pointer-events: none; }
.k-combo-buscar input {
    width: 100%; height: 38px; padding: 0 12px 0 34px; font: inherit; font-size: .9rem;
    color: var(--k-combo-texto, #1F1D2E); background: var(--k-combo-hover, #F2F0F7);
    border: 0; border-radius: 9px; outline: 0;
}
.k-combo-buscar input:focus { box-shadow: inset 0 0 0 1.5px var(--k-combo-acento, #FF6B4A); }
.k-combo-buscar input::placeholder { color: var(--k-combo-suave, #6C6880); }

.k-combo-lista { margin: 0; padding: 0; list-style: none; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.k-combo-grupo { padding: 10px 10px 4px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--k-combo-suave, #6C6880); }
.k-combo-grupo[hidden], .k-combo-opcion[hidden] { display: none; }
.k-combo-opcion {
    display: flex; align-items: center; gap: .65rem; padding: .55rem .65rem; border-radius: 9px;
    cursor: pointer; color: var(--k-combo-texto, #1F1D2E); font-size: .95rem; line-height: 1.25;
}
.k-combo-opcion + .k-combo-opcion { margin-top: 1px; }
.k-combo-cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.k-combo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-combo-cuerpo small { font-size: .78rem; color: var(--k-combo-suave, #6C6880); margin-top: 2px; }
.k-combo-opcion.k-combo-vacia { color: var(--k-combo-suave, #6C6880); }
.k-combo-opcion.k-combo-activa { background: var(--k-combo-hover, #F2F0F7); }
.k-combo-opcion[aria-selected="true"] { font-weight: 600; background: color-mix(in srgb, var(--k-combo-acento, #FF6B4A) 10%, transparent); color: var(--k-combo-texto, #1F1D2E); }
.k-combo-opcion[aria-selected="true"].k-combo-activa { background: color-mix(in srgb, var(--k-combo-acento, #FF6B4A) 16%, transparent); }
.k-combo-opcion[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.k-combo-marca { flex-shrink: 0; color: var(--k-combo-acento, #FF6B4A); visibility: hidden; }
.k-combo-opcion[aria-selected="true"] .k-combo-marca { visibility: visible; }

.k-combo-icono {
    flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center;
    font-size: 15px; color: var(--k-combo-texto, #1F1D2E); background: var(--k-combo-hover, #F2F0F7);
}
.k-combo-boton .k-combo-icono { width: 26px; height: 26px; font-size: 14px; border-radius: 7px; }
.k-combo-opcion[aria-selected="true"] .k-combo-icono { color: var(--k-combo-acento, #FF6B4A); background: color-mix(in srgb, var(--k-combo-acento, #FF6B4A) 14%, transparent); }
.k-combo-color { flex: none; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }

.k-combo-sin { margin: 0; padding: 14px 10px; text-align: center; font-size: .88rem; color: var(--k-combo-suave, #6C6880); }
.k-combo-sin[hidden], .k-combo-otro[hidden] { display: none; }
.k-combo-otro {
    display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: .6rem .65rem;
    font: inherit; font-size: .92rem; font-weight: 600; text-align: left; border: 0; border-radius: 9px; cursor: pointer;
    color: var(--k-combo-acento, #FF6B4A); background: color-mix(in srgb, var(--k-combo-acento, #FF6B4A) 10%, transparent);
}
.k-combo-otro:hover { background: color-mix(in srgb, var(--k-combo-acento, #FF6B4A) 16%, transparent); }

@media (prefers-reduced-motion: reduce) { .k-combo-panel, .k-combo-flecha, .k-combo-boton { transition: none; } }
@media (max-width: 575.98px) { .k-combo-lista { max-height: 50vh; } }