/* ============================================================
 * kds-drawer — offcanvas lateral derecho REUTILIZABLE (reemplaza modales).
 *
 * Slide-over estilo AppSheet: entra desde la derecha sobre un backdrop, header con
 * título + acciones, body scrolleable, footer opcional sticky. En el teléfono, pantalla completa.
 *
 * Uso:
 *   Trigger:  <button data-kds-drawer-open="#miDrawer">…</button>
 *   Cerrar:   [data-kds-drawer-close]  ·  click en backdrop  ·  Escape
 *   Ajustes:  el botón que abre los ajustes de la pantalla lleva [data-kds-ajustes]; con ?ajustes en la dirección
 *             la pantalla lo toca sola al cargar (Configuración abre así los ajustes de cada módulo, #1434)
 *   Markup:   <div class="kds-drawer__backdrop"></div>
 *             <aside class="kds-drawer kds-drawer--wide" id="miDrawer" role="dialog" aria-modal="true">
 *               <header class="kds-drawer__head"> … __title / __actions / __x … </header>
 *               <div class="kds-drawer__body"> … </div>
 *               <footer class="kds-drawer__foot"> … </footer>  (opcional)
 *             </aside>
 * ============================================================ */

.kds-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
    z-index: 1090;
}
.kds-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }

.kds-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: clamp(22.5rem, 40vw, 35rem);
    max-width: 100%;
    background: var(--ds-surface, #fff);
    z-index: 1092;
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.2, .8, .2, 1);
    display: flex;
    flex-direction: column;
}
.kds-drawer.is-open { transform: translateX(0); box-shadow: -.875rem 0 2.5rem -.875rem rgba(15, 23, 42, .5); }
.kds-drawer--wide  { width: clamp(30rem, 58vw, 51.25rem); }
.kds-drawer--xwide { width: clamp(37.5rem, 78vw, 67.5rem); }
/* --full = pantalla completa: para editores densos (grillas de precios) donde
   cada píxel de ancho es una columna que se lee sin scroll. */
.kds-drawer--full  { width: 100vw; max-width: 100vw; }

.kds-drawer__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--ds-border, #eee);
    flex-shrink: 0;
}
.kds-drawer__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ds-heading, #334155);
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}
.kds-drawer__title i { color: var(--color-teal, #2EB8A8); }
.kds-drawer__title .kds-drawer__ttlcol { display: flex; flex-direction: column; min-width: 0; }
.kds-drawer__title .kds-drawer__sub {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--ds-text-subtle, #999);
}
.kds-drawer__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* Jerarquía de acciones del head (canon): los botones de un drawer viven SIEMPRE
   en el head, nunca en un foot. Primaria sólida primero, divisor .kds-vdivider,
   secundarias .kds-quiet — clases globales del DS (kds-quiet.css), mismas que en
   los toolbars de lista. */
/* .kds-drawer__x lo estila el componente kds-close (fuente única de la × del proyecto). */

/* Drawer BLOQUEADO (.is-locked): proceso crítico en curso (importación, guardado
   masivo). No se puede cerrar por X, Escape ni backdrop — lo maneja kds-drawer.js;
   acá solo se apaga la X para comunicarlo. */
.kds-drawer.is-locked .kds-drawer__x {
    opacity: .3;
    pointer-events: none;
}

/* Un <form> que envuelve head+body+foot no debe romper el layout flex del drawer:
   display:contents lo hace "transparente" y sus hijos pasan a ser los flex items. */
.kds-drawer > form { display: contents; }

.kds-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.15rem;
}
/* La cabecera oscura de una tabla se pega al borde de arriba de lo que se desplaza,
   no al padding del cuerpo: si no, entre el head del cajón y la cabecera se ve pasar
   el contenido de la tabla (#1146). Fuera de un scroll no se mueve. */
.kds-drawer__body .kds-table thead th { top: -1.15rem; }

/* Con la X a la izquierda, el contenido arranca alineado con el ícono del título
   (no pegado al borde) — mismo criterio que el drawer de filtros. */
.kds-drawer:has(.kds-drawer__head > .kds-drawer__x:first-child) .kds-drawer__body {
    padding-left: 3.45rem;
}

/* Campo side-by-side (label izquierda / control derecha) para forms en el drawer.
   En mobile se apila (label arriba). */
.kds-drawer__field {
    display: grid;
    grid-template-columns: minmax(7.5rem, 36%) 1fr;
    align-items: center;
    gap: .35rem 1rem;
    margin-bottom: 1.1rem;
}
.kds-drawer__field > label,
.kds-drawer__field > .kds-field-label { margin-bottom: 0; align-self: center; }
@media (max-width: 640px) {
    .kds-drawer__field { grid-template-columns: 1fr; gap: .3rem; }
    .kds-drawer__field > label,
    .kds-drawer__field > .kds-field-label { margin-bottom: .15rem; }
}

.kds-drawer__foot {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--ds-border, #eee);
    flex-shrink: 0;
}
.kds-drawer__foot .kds-drawer__foot-end { margin-left: auto; display: flex; gap: .6rem; }

/* Mobile: pantalla completa, todo el ancho y todo el alto, entrando desde abajo. Era una hoja al 92 % del alto con
   las puntas de arriba redondeadas (fc39ae6f, 2026-07-27); el usuario la pidió entera (2026-10-15, #1260): en un
   teléfono el pedazo de página que quedaba arriba no se usa y le saca lugar a lo que se lee. */
@media (max-width: 640px) {
    .kds-drawer,
    .kds-drawer--wide,
    .kds-drawer--xwide,
    .kds-drawer--full {
        width: 100%;
        max-width: 100%;
        top: 0;
        bottom: 0;
        height: 100%;
        height: 100dvh;
        border-radius: 0;
        transform: translateY(100%);
    }
    .kds-drawer.is-open { transform: translateY(0); }
    /* Con acciones largas ("Terminar y mover el stock") el título quedaba en 24px y los
       botones le pasaban por encima: el título guarda un mínimo y, si no entran al lado,
       las acciones bajan a una segunda línea, a la derecha. */
    .kds-drawer__head { padding: .7rem .9rem; gap: .5rem; flex-wrap: wrap; }
    .kds-drawer__title { font-size: .95rem; flex: 1 1 7rem; }
    .kds-drawer__body { padding: 1rem .9rem; }
    /* La sangría que alinea el contenido con el título (la X a la izquierda) es de escritorio: en el teléfono el
       contenido arranca en el borde de siempre, si no se pierden 40px de un ancho que no sobra (#1260). */
    .kds-drawer:has(.kds-drawer__head > .kds-drawer__x:first-child) .kds-drawer__body { padding-left: .9rem; }
    .kds-drawer__body .kds-table thead th { top: -1rem; }
    .kds-drawer__foot { padding: .7rem .9rem; }
}