/*
 * KummaraDS — kds-modal
 * ============================================================
 * Modal genérico (overlay + card) del DS. Reemplaza los modales de
 * Bootstrap en el admin. Se construye desde JS.
 *
 *   .kds-modal-ov            overlay (fondo + centrado). .is-open lo activa
 *   .kds-modal               card (usar --sm / --lg para el ancho)
 *   .kds-modal__hd           header: icono + título + subtítulo + cerrar
 *   .kds-modal__bd           cuerpo (scrolleable)
 *   .kds-modal__ft           footer de acciones
 *
 *   .kds-pvpick / __item     lista de puntos de venta de ARCA para elegir
 * ============================================================
 */

.kds-modal-ov {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .44);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1090;
    opacity: 0;
    transition: opacity .16s;
}
.kds-modal-ov.is-open { opacity: 1; }

.kds-modal {
    background: var(--ds-surface, #fff);
    border-radius: 1.125rem;
    max-width: 35rem;
    width: 100%;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    box-shadow: 0 1.5rem 3.75rem rgba(17, 24, 39, .24);
    transform: translateY(.625rem) scale(.99);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), opacity .2s;
    overflow: hidden;
}
.kds-modal-ov.is-open .kds-modal { transform: none; opacity: 1; }
.kds-modal--sm { max-width: 28.75rem; }
.kds-modal--lg { max-width: 45rem; }
/* Editor ancho (tabla de precios por forma de venta): usa el ancho de pantalla. */
.kds-modal--wide { max-width: 96vw; }

.kds-modal__hd {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.05rem 1.35rem;
    border-bottom: 1px solid var(--ds-border, #eef0f3);
}
.kds-modal__hd-ic {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: .6875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-teal, #2EB8A8), var(--color-teal-dark, #1FA090));
    color: #fff;
    font-size: 1rem;
    flex: 0 0 auto;
}
.kds-modal__ttl {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ds-text, #212529);
    margin: 0;
    line-height: 1.25;
}
.kds-modal__sub {
    font-size: .8rem;
    color: var(--ds-text-muted, #606060);
    margin: .1rem 0 0;
}
.kds-modal__x {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--ds-text-muted, #8a939b);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: .5625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .15s;
}
.kds-modal__x:hover { background: var(--ds-surface-sunken, #f4f6f8); color: var(--ds-text, #212529); }

.kds-modal__bd { padding: 1.15rem 1.35rem; overflow-y: auto; }
.kds-modal__ft {
    display: flex;
    gap: .55rem;
    justify-content: flex-end;
    padding: .9rem 1.35rem;
    border-top: 1px solid var(--ds-border, #eef0f3);
}

@media (prefers-reduced-motion: reduce) {
    .kds-modal-ov, .kds-modal { transition: none; }
}
@media (max-width: 575.98px) {
    .kds-modal { max-width: 100%; }
}

/* ---- Picker de puntos de venta desde ARCA ---- */
.kds-pvpick { display: flex; flex-direction: column; gap: .5rem; }
.kds-pvpick__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .85rem;
    border: 1.5px solid var(--ds-border-strong, #e6e9ee);
    border-radius: .75rem;
    cursor: pointer;
    transition: .15s;
    margin: 0;
}
.kds-pvpick__item:hover { border-color: var(--color-teal, #2EB8A8); background: var(--ds-surface-sunken, #f7fbfa); }
.kds-pvpick__item.is-checked { border-color: var(--color-teal, #2EB8A8); background: rgba(46, 184, 168, .09); }
.kds-pvpick__item.is-added { opacity: .55; cursor: default; }
.kds-pvpick__item.is-added:hover { border-color: var(--ds-border-strong, #e6e9ee); background: transparent; }
.kds-pvpick__check { width: 1.1875rem; height: 1.1875rem; flex: 0 0 auto; accent-color: var(--color-teal, #2EB8A8); }
.kds-pvpick__num { font-weight: 800; font-size: 1.05rem; color: var(--ds-text, #212529); min-width: 2.2rem; }
.kds-pvpick__meta { font-size: .82rem; color: var(--ds-text-muted, #606060); }
.kds-pvpick__badge {
    margin-left: auto;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .22rem .5rem;
    border-radius: .4375rem;
    background: var(--color-mint-soft, #e7f6ee);
    color: #3f9d63;
}
.kds-pvpick__empty { text-align: center; color: var(--ds-text-muted, #606060); padding: 1.5rem .5rem; font-size: .9rem; line-height: 1.5; }