/*
 * KummaraDS — kds-table
 * ============================================================
 * Tabla de datos responsive, token-driven. En desktop es una tabla con header
 * sutil + hover de fila; en ≤767.98px cada <tr> COLAPSA a una card (rótulo:valor)
 * vía data-label por celda — sin scroll horizontal. Reemplaza las <table
 * table-hover> de Bootstrap dentro de un kds-panel. Genérica/reusable: el markup
 * y los hooks JS (ids/clases/data-*) los pone la vista.
 *
 *   .kds-table                  la <table>
 *   .kds-table thead th         encabezados (sutiles, MAYÚS)
 *   .kds-table tbody tr         fila (hover; tinte lateral por [data-status])
 *   td[data-label]              en móvil muestra el rótulo (::before)
 *   .kds-table__cell--actions   celda de acciones (sin rótulo; botones a lo ancho)
 * ============================================================
 */

.kds-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ds-text, #212529);
    font-size: .9rem;
}

.kds-table thead th {
    padding: .7rem 1rem;
    background: var(--kds-table-head-bg, var(--color-gray-dark, #333333));
    border-bottom: 1px solid var(--kds-table-head-bg, var(--color-gray-dark, #333333));
    color: var(--kds-table-head-fg, #ffffff);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    /* Un título largo se parte en dos renglones parejos ("Precio / revendedor") sólo si la tabla no
       entra: con lugar, cada columna llega a su ancho natural y nada se parte (#1267). El que no se
       debe partir lleva text-nowrap; el de Acciones nunca se parte. */
    white-space: normal;
    text-wrap: balance;
    text-align: left;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Tabla anidada dentro de una fila-detalle: su thead NO es sticky (se pegaria
   al tope del scroll y pisaria la cabecera de la tabla exterior). */
.kds-table__detail .kds-table thead th { position: static; }

/* Divisor vertical entre columnas del header (sutil sobre el fondo oscuro, estilo
   AppSheet). Requiere border-collapse:separate (ya seteado para el sticky thead). */
.kds-table thead th:not(:last-child) {
    /* box-shadow y no border: un borde se come 1px del ancho util de la celda y
       corre 0.5px el contenido centrado, asi la casilla de "seleccionar todo" no
       caia en el mismo eje que las de cada fila. La sombra no ocupa layout. */
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .18);
}

.kds-table tbody tr { transition: background .13s; }
/* Hover un toque más marcado (overlay neutro: oscurece cualquier fondo, incl. la
   fila seleccionada) — estilo AppSheet, sutil. */
.kds-table tbody tr:hover { background: var(--kds-table-row-hover, rgba(15, 23, 42, .07)); }

/* ---- Orden por encabezado (canon AppSheet: click cicla asc -> desc -> restaura).
   Solo los th marcados con data-kds-sort son ordenables; la flecha vive en un
   pseudo para no tocar el markup. El submit lo maneja kds-table.js. ---- */
.kds-table thead th.kds-table__sortable {
    cursor: pointer;
    user-select: none;
}
.kds-table thead th.kds-table__sortable::after {
    content: '\2195';
    margin-left: .4em;
    font-size: 1.05em;
    opacity: .5;
}
.kds-table thead th.is-sorted-asc::after,
.kds-table thead th.is-sorted-desc::after {
    color: var(--color-teal, #2EB8A8);
    opacity: 1;
    font-size: 1.1em;
    text-shadow: 0 0 .4375rem rgba(46, 184, 168, .55);
}
.kds-table thead th.is-sorted-asc::after { content: '\25B2'; }
.kds-table thead th.is-sorted-desc::after { content: '\25BC'; }

/* ---- Resize de columnas tipo Excel (canon: hit de 11px, cursor col-resize).
   La manija la inyecta kds-table.js en cada th (el th sticky ya es containing
   block); el ancho persiste por tabla (data-kds-table) en localStorage.
   Doble click en la manija restaura todo. ---- */
.kds-table__resizer {
    position: absolute;
    top: 0;
    right: -.375rem;
    width: .6875rem;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
}
.kds-table__resizer:hover,
.kds-table__resizer.is-dragging {
    background: linear-gradient(to right, transparent .25rem, var(--color-teal, #2EB8A8) .25rem, var(--color-teal, #2EB8A8) .4375rem, transparent .4375rem);
}
body.kds-col-resizing,
body.kds-col-resizing * { cursor: col-resize !important; user-select: none !important; }

/* Con anchos fijos (una columna achicada a mano) el texto de una celda no puede pasar a la
   de al lado: se corta con puntos suspensivos. El menú de acciones va aparte (body). */
@media (min-width: 768px) {
    .kds-table.kds-table--anchos-fijos > tbody > tr > td[data-label] {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Tabla densa (#1267): si ni con los títulos partidos la tabla entra, kds-table.js le achica el aire a
   los costados de cada celda. El borde de afuera de la primera y la última no se toca, así la tabla
   sigue alineada con el título de la página. Con lugar de sobra no se aplica. */
.kds-table.kds-table--densa > thead > tr > th:not(:first-child),
.kds-table.kds-table--densa > tbody > tr > td:not(:first-child) { padding-left: .6rem; }
.kds-table.kds-table--densa > thead > tr > th:not(:last-child),
.kds-table.kds-table--densa > tbody > tr > td:not(:last-child) { padding-right: .6rem; }

.kds-table tbody td {
    padding: .55rem 1rem;
    /* Línea por fila sutil (grilla AppSheet) */
    border-bottom: 1px solid var(--kds-table-row-line, rgba(15, 23, 42, .08));
    vertical-align: middle;
}
.kds-table tbody tr:last-child td { border-bottom: 0; }

/* Tinte lateral por estado (reemplaza table-warning/table-secondary de Bootstrap) */
.kds-table tbody tr[data-status="suspendido"] { box-shadow: inset .1875rem 0 0 var(--color-amber, #E8B30E); }
.kds-table tbody tr[data-status="eliminado"]  { box-shadow: inset .1875rem 0 0 var(--color-rose, #E6607B); }

/* Botones al inicio de la columna, bajo el rótulo "Acciones" del thead (el meta
   conteo/paginación queda solo, a la derecha) — ver actions-head más abajo. */
.kds-table__cell--actions { text-align: left; white-space: nowrap; }

/* ---- Celda con texto recortado a N líneas (alto de fila parejo, estilo AppSheet).
   El texto completo va en el title del <td> (tooltip al hover). Se envuelve en un
   span para no romper el layout table-cell de la columna. ---- */
.kds-cell-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--kds-table-name-lines, 2);
    line-clamp: var(--kds-table-name-lines, 2);
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* ---- Acciones responsive (opción B, legacy): en pantalla ancha se ven ícono + texto;
   cuando la tabla se angosta, solo el ícono. Los botones migrados a kds-action se
   excluyen: ese componente es icon-only SIEMPRE y revela el texto al hover. ---- */
@media (max-width: 1499.98px) {
    .kds-table__cell--actions .btn:not(.kds-action) > span { display: none !important; }
}

/* La columna de selección se centra sola, arriba Y abajo: el thead alinea a la
   izquierda por default y la celda de fila hereda el align de la tabla, así que
   sin esto la casilla del header y la de la fila quedaban corridas ~6px. */
.kds-table thead th:has(> input[type="checkbox"]),
.kds-table tbody td:has(> input[type="checkbox"]) { text-align: center; }

/* ---- Checkbox de selección estilo AppSheet: cuadrado redondeado + más grande;
   se rellena de teal con check blanco al marcar (guion en indeterminate = select-all
   parcial). NO afecta los toggles Activo/Servicio/Visible (son role="switch"). ---- */
.kds-table input[type="checkbox"]:not([role="switch"]) {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 2px solid var(--ds-border-strong, #c9ced6);
    border-radius: .375rem;
    background: var(--ds-surface, #fff);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.kds-table input[type="checkbox"]:not([role="switch"])::before {
    content: "";
    width: .75rem;
    height: .75rem;
    transform: scale(0);
    transform-origin: center;
    transition: transform .12s ease-in-out;
    background: #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.kds-table input[type="checkbox"]:not([role="switch"]):hover { border-color: var(--color-teal, #2EB8A8); }
.kds-table input[type="checkbox"]:not([role="switch"]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 .1875rem rgba(46, 184, 168, .25);
}
.kds-table input[type="checkbox"]:not([role="switch"]):checked,
.kds-table input[type="checkbox"]:not([role="switch"]):indeterminate {
    background: var(--color-teal, #2EB8A8);
    border-color: var(--color-teal, #2EB8A8);
}
.kds-table input[type="checkbox"]:not([role="switch"]):checked::before { transform: scale(1); }
.kds-table input[type="checkbox"]:not([role="switch"]):indeterminate::before {
    transform: scale(1);
    clip-path: none;
    width: .625rem;
    height: 2px;
    border-radius: 1px;
}

/* ---- Switch (role="switch") dentro de una celda ----
   Bootstrap reserva 36px a la izquierda del .form-check para una etiqueta que
   en una tabla NO existe (el rotulo es el th), y flota el input con margin
   negativo: la pastilla quedaba corrida respecto de su columna. Aca se quita
   esa reserva para que la pastilla se alinee segun el text-align de la celda,
   y se agranda un toque para que se lea y se toque comodo. ---- */
.kds-table .form-check.form-switch {
    padding-left: 0;
    margin: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
}

.kds-table .form-switch .form-check-input[role="switch"] {
    float: none;
    margin: 0;
    width: 2.4em;
    height: 1.25em;
    border-radius: 2em;
    cursor: pointer;
}

/* ---- Fila expandible (kds-row-expand) ----
   La fila marcada con data-kds-expand se abre al hacerle clic y muestra su
   detalle en una fila hermana. La pista es el chevron en linea antes del
   nombre (.kds-expand-name / .kds-expand-chev) mas el cursor; no se agrega
   ninguna columna. ---- */
.kds-table tr[data-kds-expand] { cursor: pointer; }

.kds-table tr[data-kds-expand]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-teal, #2EB8A8);
}

.kds-table tr[data-kds-expand].is-expanded > td {
    background: var(--kds-table-row-hover, rgba(15, 23, 42, .07));
}

.kds-table__detail:not(.is-open) { display: none !important; }
.kds-table__detail.is-open { display: table-row; }
/* La celda del detalle va SIN acolchado propio (la regla general de celdas tiene
   más especificidad, por eso este selector repite tbody): el bloque gris de la
   costura debe llegar de borde a borde, sin marco blanco alrededor. */
.kds-table__detail > td,
.kds-table tbody .kds-table__detail > td {
    padding: 0;
    background: var(--ds-surface-sunken, #f8f9fa);
    border-bottom: 1px solid var(--ds-border, #eef0f3);
}

/* La fila abierta pierde su línea inferior: fila y detalle son UNA pieza. */
.kds-table tbody tr[data-kds-expand].is-expanded > td {
    border-bottom-color: transparent;
}

/* Contenido desplegado: NO es una card flotante con filete de color — es la
   continuación de la fila abierta. Mismo tinte que ella, sin borde entre medio y
   esquinas redondeadas sólo abajo: la fila y su detalle se leen como un bloque
   que se abrió. .variants-panel es el nombre legacy (productos) del mismo
   componente — mismo bloque hasta que esas vistas migren a kds-detail-panel. */
.kds-detail-panel,
.variants-panel {
    margin: 0;
    padding: 0;
    background: var(--kds-table-row-hover, rgba(15, 23, 42, .07));
    border: 0;
    border-radius: 0;
}

.kds-detail-panel__title,
.variants-panel__title {
    display: flex;
    align-items: center;
    color: var(--color-blue-dark, #2E6DB4);
    margin-bottom: 0;
    padding: .65rem 1.05rem .5rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* La tabla interior NO es una card: dentro de la costura pierde fondo, bordes,
   sombra y radios — el gris del bloque corre de borde a borde y las filas se
   apoyan directo sobre él. */
.kds-detail-panel__table,
.variants-panel__table {
    width: 100%;
    margin-bottom: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.kds-table__detail .kds-table tbody td {
    background: transparent;
}

.kds-detail-panel__foot,
.variants-panel__foot {
    padding: .55rem 1.05rem .7rem;
    font-size: .78rem;
    color: var(--ds-text-muted, #606060);
}

/* El título ya no necesita el azul del filete: hereda el gris de encabezado y el
   acento queda para el icono, que es lo que identifica de qué es el detalle. */
.kds-detail-panel__title,
.variants-panel__title {
    color: var(--ds-text-muted, #606060);
}
.kds-detail-panel__title > i,
.variants-panel__title > i {
    color: var(--color-teal, #2EB8A8);
}

/* Chevron de despliegue: en linea, ANTES del nombre. Un solo dialecto para
   todo el sistema: la vista envuelve su texto ancla en .kds-expand-name y
   antepone el <i .kds-expand-chev>. Gris discreto; toma color con el hover
   de la fila y gira al abrir. El estado is-expanded puede vivir en el <tr>
   (listas planas) o en el <tbody> (grillas con fila de detalle propia). */
.kds-expand-name {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.kds-table .kds-expand-chev {
    flex: 0 0 auto;
    display: inline-block;
    font-size: .625rem;
    color: var(--ds-text-subtle, #adb5bd);
    transition: transform .18s ease, color .12s ease;
}

.kds-table tbody tr:hover .kds-expand-chev,
.kds-table .is-expanded .kds-expand-chev {
    color: var(--color-teal-dark, #1FA090);
}

.kds-table .is-expanded .kds-expand-chev { transform: rotate(90deg); }

/* Movil: la fila de detalle abierta se apila como bloque pegado a su card
   (las reglas de card de abajo re-displayan todos los tr; estas ganan por
   especificidad y por venir despues no pisan nada mas). */
@media (max-width: 767.98px) {
    .kds-table tbody tr.kds-table__detail.is-open {
        display: block;
        margin: -.4rem .8rem .7rem;
        padding: 0;
        border: 1px solid var(--ds-border, #eef0f3);
        border-top: 0;
        border-radius: 0 0 var(--ds-radius-card, .875rem) var(--ds-radius-card, .875rem);
        background: var(--ds-surface-sunken, #f8f9fa);
        box-shadow: none;
    }
    .kds-table--cards.kds-table > tbody > tr.kds-table__detail.is-open {
        margin: -.3rem 0 .55rem;
    }
    .kds-table tbody tr.kds-table__detail.is-open > td,
    .kds-table--cards.kds-table > tbody > tr.kds-table__detail.is-open > td {
        position: static;
        display: block;
        width: 100%;
        padding: .5rem .6rem;
        border: 0;
        text-align: left;
        background: none;
        box-shadow: none;
    }
    .kds-table tr[data-kds-expand].is-expanded > td { background: none; }
}

/* ---- Móvil: cada fila colapsa a una card robusta (rótulo | valor) ---- */
@media (max-width: 767.98px) {
    .kds-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
    .kds-table, .kds-table tbody, .kds-table tr, .kds-table td { display: block; width: 100%; }

    .kds-table tbody tr {
        margin: .7rem .8rem;
        padding: .85rem 1rem;
        border: 1px solid var(--ds-border-strong, #dee2e6);
        border-radius: var(--ds-radius-card, .875rem);
        background: var(--ds-surface, #fff);
        box-shadow: var(--ds-shadow-soft, 0 .375rem 1.125rem rgba(17, 24, 39, .06));
    }
    .kds-table tbody tr:hover { background: var(--ds-surface, #fff); }
    /* En un panel plano (el formulario plano), en un comprobante o en un cajón las cards van al ras del contenido: la
       sangría de arriba es de las listas, donde las cards viven adentro de su panel (#1260). En un cajón quedaban más a
       la derecha que su encabezado (#1369). */
    .kds-panel--plano .kds-table tbody tr,
    .kds-comprobante .kds-table tbody tr,
    .kds-drawer__body .kds-table tbody tr { margin-left: 0; margin-right: 0; }
    .kds-table tbody tr[data-status="suspendido"] {
        box-shadow: var(--ds-shadow-soft, 0 .375rem 1.125rem rgba(17, 24, 39, .06));
        border-left: .1875rem solid var(--color-amber, #E8B30E);
    }
    .kds-table tbody tr[data-status="eliminado"] {
        box-shadow: var(--ds-shadow-soft, 0 .375rem 1.125rem rgba(17, 24, 39, .06));
        border-left: .1875rem solid var(--color-rose, #E6607B);
    }

    /* Celda genérica = fila [rótulo fijo] [valor que fluye]. El valor ENVUELVE
       (overflow-wrap parte tokens sin espacios); el badge/valor NO se estira. */
    .kds-table tbody td {
        display: flex;
        align-items: baseline;
        gap: .9rem;
        padding: .5rem 0;
        border: 0;
        border-bottom: 1px solid var(--ds-border, #eee);
        text-align: left;
        overflow-wrap: anywhere;
    }
    .kds-table tbody tr td:last-child { border-bottom: 0; }

    .kds-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 6rem;
        /* El rótulo siempre arranca a la izquierda, aunque la celda de un importe venga con text-end. */
        text-align: left;
        color: var(--ds-text-muted, #606060);
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    /* Checkbox de selección (sin rótulo): fila propia arriba. */
    .kds-table tbody td:not([data-label]):not(.kds-table__cell--actions) {
        display: block;
        padding-bottom: .5rem;
    }

    /* Acciones: botones a lo ancho, repartidos parejo (grid que envuelve si son varios).
       Especificidad td.clase para ganarle a la regla genérica de celda. */
    .kds-table tbody td.kds-table__cell--actions {
        display: block;
        padding-top: .7rem;
        border-bottom: 0;
    }
    .kds-table__cell--actions .btn-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
        gap: .4rem;
        width: 100%;
    }
    .kds-table__cell--actions .btn-group .btn {
        width: 100%;
        margin: 0;
        border-radius: .5rem;
    }
}

/* Contenedor con scroll horizontal para tablas anchas en desktop (el kds-panel es
   overflow:hidden, así que sin esto una tabla más ancha que el panel se recorta).
   En móvil las filas son cards (no desbordan) → se desactiva para no recortar sombras. */
.kds-table-scroll { overflow-x: auto; }

/* El thead LLEGA al borde y el pulgar del scroll sólo se ve a la altura de las FILAS
   (pedido del dueño): el carril del scroll pertenece al contenedor y le comía el ancho
   al header. Truco en dos partes, con --kds-thead-h medido por el JS del toolbar:
   (1) el fondo del contenedor pinta la franja del carril del color del header hasta esa
   altura (el header se ve continuo hasta el borde); (2) el track del scrollbar arranca
   con margin-top = esa altura, así el pulgar viaja únicamente junto a los productos. */
.kds-table-scroll {
    background: linear-gradient(
        to bottom,
        var(--kds-table-head-bg, var(--color-gray-dark, #333333)) 0,
        var(--kds-table-head-bg, var(--color-gray-dark, #333333)) var(--kds-thead-h, 0px),
        transparent var(--kds-thead-h, 0px)
    );
}
.kds-table-scroll::-webkit-scrollbar { width: .625rem; height: .625rem; }
.kds-table-scroll::-webkit-scrollbar-track { background: transparent; margin-top: var(--kds-thead-h, 0px); }
.kds-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .45);
    border-radius: 62.4375rem;
}
.kds-table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .7); }

/* Pie de tabla (totales): fila de cierre con fondo hundido y borde fuerte — sin esto
   un tfoot rendería pelado y el "Total" parece flotar despegado de la tabla. */
.kds-table tfoot th,
.kds-table tfoot td {
    padding: .55rem 1rem;
    background: var(--ds-surface-sunken, #f8f9fa);
    border-top: 2px solid var(--ds-border-strong, #dee2e6);
    font-size: .82rem;
    color: var(--ds-heading, #334155);
}
/* Panel de tabla en listas: full-bleed (edge-to-edge, como la toolbar) + tope flush
   (el thead oscuro sticky es el borde superior, sin borde/radius/línea blanca) */
.kds-panel:has(.kds-table-scroll) {
    margin: 0 calc(-1.5rem - var(--kds-content-bleed, 0px)) 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ...PERO sólo cuando el panel ES la pantalla. Una tabla adentro de un
   FORMULARIO es otra cosa: ahí el panel es un bloque más entre otros, y
   sangrarlo hasta los bordes lo desalinea de todo lo que tiene al lado —
   arranca 24px antes que el panel de arriba y se mete por debajo del rail.
   Adentro de un layout en columnas, el panel de tabla se comporta como
   cualquier otro panel: con su caja, su radio y su sombra.

   Un TABLERO (kds-board) es el mismo caso y por el mismo motivo: ahí la tabla no
   es la pantalla, es un panel al lado de otros. Sangrada se le monta encima al
   panel de la columna de al lado —literalmente, se superponen— y además rompe la
   lectura, porque queda una tarjeta sin bordes entre tarjetas con bordes.

   Un CAJÓN (kds-drawer) también: el panel con tabla de un cajón (el detalle
   plegado de Facturar, #1351) sangrado se sale del cuerpo del cajón y le pone
   una barra para el costado.

   Las esquinas, igual cuadradas: una tabla del KDS nunca es redondeada (#1214). */
.kds-form-layout .kds-panel:has(.kds-table-scroll),
.kds-form-page .kds-panel:has(.kds-table-scroll),
.kds-form-layout__main .kds-panel:has(.kds-table-scroll),
.kds-form-layout__rail .kds-panel:has(.kds-table-scroll),
.kds-board .kds-panel:has(.kds-table-scroll),
.kds-drawer .kds-panel:has(.kds-table-scroll) {
    margin: 0 0 var(--ds-space-xl, 2rem);
    border: 1px solid var(--ds-border-strong, #e6e9ee);
    border-radius: 0;
    box-shadow: var(--ds-shadow-soft, 0 .375rem 1.125rem rgba(17, 24, 39, .06));
    overflow: hidden;
}

/* ...salvo que el panel sea PLANO (kds-panel--plano): en un formulario plano la tabla va directo bajo su rótulo, sin
   caja, como todo lo demás, y en el teléfono cada renglón es su tarjeta sin otra caja alrededor (#1260, Nueva factura).
   Misma fuerza que la regla de arriba y escrita después: gana el plano. */
.kds-form-layout .kds-panel--plano:has(.kds-table-scroll),
.kds-form-page .kds-panel--plano:has(.kds-table-scroll),
.kds-form-layout__main .kds-panel--plano:has(.kds-table-scroll),
.kds-form-layout__rail .kds-panel--plano:has(.kds-table-scroll),
.kds-board .kds-panel--plano:has(.kds-table-scroll),
.kds-drawer .kds-panel--plano:has(.kds-table-scroll) {
    border: 0;
    box-shadow: none;
}

/* Un selector marcado por el servidor dentro de una tabla: el borde en rosa y sin el ícono de Bootstrap, que en una
   columna angosta tapa lo elegido («21 %» quedaba «21 ⓘ»). Igual que kds-input y kds-qty (#1338). La misma forma
   que la regla de Bootstrap que pone el ícono, para ganarle. */
.kds-table .form-select.is-invalid:not([multiple]):not([size]) {
    --bs-form-select-bg-icon: none;
    padding-right: 2.25rem;
    border-color: var(--color-rose, #E6607B);
}

/* Tablas cuadradas en todo el admin (#1214). style.css —compartido con la tienda— les pone a
   las tablas de Bootstrap el efecto «vidrio»: esquinas de 10px, sombra flotante y el recorte
   que redondea la cabecera oscura. Estos archivos sólo se cargan en el admin, así que acá se
   neutraliza sin tocar la tienda. Un panel que lleva una tabla también queda cuadrado: si no,
   su recorte le redondea la cabecera a la tabla. */
.table {
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.kds-panel:has(.kds-table, .table, .kds-pe) {
    border-radius: 0;
}
/* En listas con tabla de scroll interno el FAB de Kummi flota sobre el footer (no sobre
   la tabla), así que no hace falta el carril de 90px de .main-content: lo achicamos para
   que la tabla llegue casi hasta el footer sin hueco. */
@media (min-width: 768px) {
    .main-content:has(.kds-table-scroll) { padding-bottom: 1rem; }
}

/* ---- Header de la tabla con meta integrada (marco AppSheet) ----
   La ÚLTIMA columna (Acciones) lleva, en la MISMA fila del thead sticky: la etiqueta
   "Acciones" al inicio (sobre el primer botón de la fila) y, a la derecha del todo, el
   conteo "Mostrando…" + la paginación. Sin banda ni fila extra: es el propio header. */
/* width:1% + nowrap = la columna ABRAZA su contenido (label+meta arriba, cluster de
   acciones abajo) y el sobrante se reparte a las columnas que lo necesitan (Nombre). */
.kds-table thead th.kds-table__actions-head { text-align: left; width: 1%; white-space: nowrap; }
/* Con el conteo arriba, el rótulo "Acciones" no se escribe (#1267): la columna la manda lo que ocupan los
   botones, no la palabra. Sigue para el lector de pantalla. Sólo si la columna ES de acciones (sus celdas son
   kds-table__cell--actions): Movimientos usa el mismo encabezado para "Quién" y ese rótulo se ve. Sin conteo
   (subtablas) se ve como siempre. */
.kds-table:has(> tbody > tr > td.kds-table__cell--actions) > thead .kds-table__actions-head-inner:has(.kds-table__count) { justify-content: flex-end; }
.kds-table:has(> tbody > tr > td.kds-table__cell--actions) > thead .kds-table__actions-head-inner:has(.kds-table__count) .kds-table__actions-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.kds-table__actions-head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
}
.kds-table__head-meta {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-transform: none;
    letter-spacing: 0;
}
.kds-table__count {
    font-size: .74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}
.kds-table__pager-btns { display: inline-flex; gap: .3rem; }
.kds-table__pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .4375rem;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    text-decoration: none;
    font-size: .78rem;
    transition: background .13s;
}
.kds-table__pager-btn:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.kds-table__pager-btn.is-disabled { opacity: .32; pointer-events: none; }

@media (max-width: 767.98px) {
    .kds-table-scroll { overflow-x: visible; }
}

/* ============================================================
 * kds-table--cards-producto — la card RICA de Productos (foto, SKU, precio, stock,
 * switches Activo/Servicio/Visible). Opt-in EXPLICITO junto a .kds-table--cards:
 * sus areas de grilla existen solo en una fila con forma de producto. Cualquier otra
 * lista usa la card generica de mas abajo (#947). Reusa el MISMO DOM y JS
 * (checkbox, toggles, acciones, ids) — solo re-layout por CSS.
 * ============================================================ */
@media (max-width: 767.98px) {
    /* Sin card-dentro-de-card: el panel que envuelve la card-table pierde su
       superficie en mobile (asi solo se ven las cards individuales, y su sombra
       no la recorta el overflow:hidden del panel). */
    .kds-panel:has(.kds-table--cards-producto) {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
        margin-bottom: 0;
    }

}

.kds-table-scroll:has(> .kds-table--cards) { container: kds-tabla / inline-size; }

/* kds-table--cards-telefono (#1389): una tabla que vive en la columna de un formulario o de una ficha (lo que se
   aplica a cada comprobante, las formas de pago, las retenciones, lo que pagó un recibo). Va junto con
   .kds-table--cards: es tabla en escritorio y tablet aunque la columna mida menos de 960px, y recién en el teléfono
   pasa a tarjeta, con la misma tarjeta de siempre. Lo logra midiendo su espacio sólo en el teléfono: sin contenedor
   kds-tabla, las reglas de tarjeta no aplican. */
.kds-table-scroll:has(> .kds-table--cards.kds-table--cards-telefono) { container: none; }
@media (max-width: 767.98px) {
    .kds-table-scroll:has(> .kds-table--cards.kds-table--cards-telefono) { container: kds-tabla / inline-size; }
}

@container kds-tabla (max-width: 959.98px) {
    /* Lo que antes daba el colapso movil de la base (solo por ancho de pantalla):
       ahora la card tambien se arma con el telefono ACOSTADO o en un panel angosto. */
    .kds-table--cards-producto.kds-table { display: block; width: 100%; }
    .kds-table--cards-producto.kds-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    /* Una card por fila con poco lugar; dos o mas cuando entran (al girar). */
    .kds-table--cards-producto.kds-table > tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
        gap: .55rem;
        width: 100%;
    }
    .kds-table--cards-producto.kds-table > tbody > tr.variants-row,
    .kds-table--cards-producto.kds-table > tbody > tr.rental-row,
    .kds-table--cards-producto.kds-table > tbody > tr.kds-table__detail,
    .kds-table--cards-producto.kds-table > tbody > tr:has(td[colspan]) { grid-column: 1 / -1; }
    .kds-table--cards-producto.kds-table > tbody > tr > td.is-col-hidden { display: none; }

    .kds-table--cards-producto.kds-table > tbody > tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "chk  name name name name name"
            "img  sku  sku  sku  tipo tipo"
            "prc  prc  prc  stk  stk  stk"
            "est  est  est  est  est  est";
        align-items: center;
        gap: .4rem .5rem;
        width: auto;
        margin: 0;
        padding: .85rem 1rem;
        border: 1px solid var(--ds-border-strong, #dee2e6);
        border-radius: var(--ds-radius-card, .875rem);
        background: var(--ds-surface, #fff);
        box-shadow: var(--ds-shadow-soft, 0 .375rem 1.125rem rgba(17, 24, 39, .06));
    }

    /* Celda base: sin flex rotulo:valor, sin bordes internos */
    .kds-table--cards-producto.kds-table > tbody > tr > td {
        display: block;
        padding: 0;
        border: 0;
        overflow-wrap: anywhere;
    }
    /* Rotulos ::before OFF por defecto (los re-activo solo donde aportan) */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label]::before { content: none; }

    /* Filas-mensaje (empty state / colspan) NO son cards: fila normal a lo ancho */
    .kds-table--cards-producto.kds-table > tbody > tr:has(td[colspan]) { display: block; }
    .kds-table--cards-producto.kds-table > tbody > tr > td[colspan] {
        position: static;
        display: block;
        width: auto;
        padding: 1.5rem 1rem;
        text-align: center;
        background: none;
        box-shadow: none;
    }

    /* Checkbox de seleccion: en flujo, primera fila a la izquierda del nombre
       (el chip flotante de antes quedaba encima de la foto). */
    .kds-table--cards-producto.kds-table > tbody > tr > td:first-child:not([colspan]) {
        grid-area: chk;
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }
    .kds-table--cards-producto.kds-table > tbody > tr > td:first-child input {
        width: 1.0625rem;
        height: 1.0625rem;
        margin: 0;
    }

    /* Ubicacion de cada celda en la grilla */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Imagen"]   { grid-area: img; }
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Nombre"]   { grid-area: name; }
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="SKU"]      { grid-area: sku; align-self: center; }
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Tipo"]     { grid-area: tipo; justify-self: end; align-self: center; }
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="P. c/IVA"] { grid-area: prc; }
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Stock"]    { grid-area: stk; justify-self: end; }
    /* Estado (#1265): sólo lo que no es lo normal (Inactivo, Oculto, Servicio), las insignias en fila;
       los cambios están en las acciones de la tarjeta. Vacía (un producto común) no ocupa lugar. */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Estado"]   { grid-area: est; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Estado"]:empty { display: none; }
    .kds-table--cards-producto.kds-table > tbody > tr > td.kds-table__cell--actions { grid-column: 1 / -1; order: 99; }

    /* Columnas EXTRA que el usuario prendio en "Columnas" (Costo, IVA %, precio por lista,
       Garantia...): no tienen lugar fijo en la card, asi que van como pares rotulo/valor,
       de a tres por renglon, antes de las acciones. Sin esto caian sueltas y sin rotulo
       debajo de los botones. */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label]:not([data-label="Imagen"]):not([data-label="Nombre"]):not([data-label="SKU"]):not([data-label="Tipo"]):not([data-label="P. c/IVA"]):not([data-label="P. s/IVA"]):not([data-label="Stock"]):not([data-label="Estado"]):not(.is-col-hidden) {
        grid-column: span 2;
        order: 50;
        display: flex;
        flex-direction: column;
        gap: .1rem;
        min-width: 0;
        font-size: .8rem;
        font-variant-numeric: tabular-nums;
    }
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label]:not([data-label="Imagen"]):not([data-label="Nombre"]):not([data-label="SKU"]):not([data-label="Tipo"]):not([data-label="P. c/IVA"]):not([data-label="P. s/IVA"]):not([data-label="Stock"]):not([data-label="Estado"]):not(.is-col-hidden)::before {
        content: attr(data-label);
        flex: none;
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--ds-text-subtle, #999);
    }
    /* P. s/IVA: secundario, oculto en la card */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="P. s/IVA"] { display: none; }

    /* Thumb */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Imagen"] .table-product-img,
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Imagen"] .table-product-img-placeholder {
        width: 3rem;
        height: 3rem;
        border-radius: .625rem;
        object-fit: cover;
    }

    /* Nombre = protagonista */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Nombre"] {
        font-weight: 700;
        font-size: .95rem;
        color: var(--ds-text, #212529);
        line-height: 1.25;
    }
    /* En card el nombre es el protagonista: mostrar completo (sin clamp) */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Nombre"] .kds-cell-clamp {
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }
    /* SKU = mono atenuado */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="SKU"] {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .76rem;
        color: var(--ds-text-muted, #606060);
    }
    /* Precio grande + sufijo c/IVA */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="P. c/IVA"] {
        font-size: 1.02rem;
        font-weight: 800;
        color: var(--ds-heading, #334155);
        font-variant-numeric: tabular-nums;
    }
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="P. c/IVA"]::after {
        content: " c/IVA";
        font-size: .66rem;
        font-weight: 600;
        color: var(--ds-text-subtle, #999);
    }
    /* Stock con rotulo chico + su badge */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Stock"] {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        font-size: .78rem;
        color: var(--ds-text-muted, #606060);
    }
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label="Stock"]::before {
        content: "Stock";
        font-size: .72rem;
        font-weight: 600;
        color: var(--ds-text-muted, #606060);
    }

    /* Acciones = fila horizontal scrolleable con divisor arriba */
    .kds-table--cards-producto.kds-table > tbody > tr > td.kds-table__cell--actions {
        border-top: 1px solid var(--ds-border, #eee);
        padding-top: .6rem;
        margin-top: .1rem;
    }
    .kds-table--cards-producto.kds-table > tbody > tr > td.kds-table__cell--actions .btn-group {
        display: flex;
        flex-wrap: nowrap;
        gap: .4rem;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .kds-table--cards-producto.kds-table > tbody > tr > td.kds-table__cell--actions .btn-group::-webkit-scrollbar { display: none; }
    .kds-table--cards-producto.kds-table > tbody > tr > td.kds-table__cell--actions .btn-group .btn {
        flex: 0 0 auto;
        width: auto;
        border-radius: .5rem;
        white-space: nowrap;
    }

    /* Atenuar productos inactivos (progressive enhancement con :has) */
    .kds-table--cards-producto.kds-table > tbody > tr:has(> td[data-label="Estado"] [data-estado="inactivo"]) {
        opacity: .62;
    }

    /* Filas de variantes/rental expandidas: full-width, sin grilla de card */
    .kds-table--cards-producto.kds-table > tbody > tr.variants-row,
    .kds-table--cards-producto.kds-table > tbody > tr.rental-row {
        display: block;
        padding: 0;
        margin: 0 .8rem;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    /* Columnas que el usuario apagó en "Columnas": tampoco en la card. Va al final y con más
       peso que las reglas de Stock y de los switches, que si no la pisan. */
    .kds-table--cards-producto.kds-table > tbody > tr > td[data-label].is-col-hidden { display: none; }
}

/* ============================================================
 * kds-table--cards — CARD GENERICA para cualquier lista (#947)
 * ============================================================
 * Responde al ESPACIO de la tabla, no al ancho de la pantalla: el contenedor
 * .kds-table-scroll es un container (kds-tabla). Cuando la tabla tiene menos de 960px
 * para vivir (telefono parado o ACOSTADO, tablet, panel angosto) cada fila se arma
 * como card; con mas lugar vuelve a ser tabla.
 *
 *   titular  td[data-kds-card="titulo"] | td[data-label="Nombre"] | la primera con rotulo
 *            -> arriba, a todo el ancho, en negrita
 *   datos    el resto: pares rotulo/valor en una grilla que llena el ancho
 *            (2 columnas con el telefono parado, 4-5 acostado)
 *   vacios   las celdas con "—" no ocupan lugar (kds-table.js marca .is-vacio)
 *   acciones td.kds-table__cell--actions -> al pie, a lo ancho, con el texto visible
 *            (en touch no hay hover que muestre el rotulo del icono)
 *   cards    una por fila con poco lugar; dos o mas cuando entra (al girar)
 *
 * Productos lleva ademas .kds-table--cards-producto y conserva su card rica.
 * ============================================================ */
@container kds-tabla (max-width: 959.98px) {
    .kds-table--cards:not(.kds-table--cards-producto).kds-table { display: block; width: 100%; }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
        gap: .65rem;
        width: 100%;
        padding: .65rem;
        background: var(--ds-surface-sunken, #f8f9fa);
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
        align-content: start;
        gap: .6rem .9rem;
        width: auto;
        margin: 0;
        padding: .8rem .9rem .7rem;
        border: 1px solid var(--ds-border-strong, #dee2e6);
        border-radius: var(--ds-radius-card, .875rem);
        background: var(--ds-surface, #fff);
        box-shadow: var(--ds-shadow-soft, 0 .375rem 1.125rem rgba(17, 24, 39, .06));
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr:hover { background: var(--ds-surface, #fff); }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
        min-width: 0;
        width: auto;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        text-align: left;
        font-size: .82rem;
        overflow-wrap: anywhere;
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: none;
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--ds-text-subtle, #999);
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr { position: relative; }
    /* Casilla para marcar la fila (cambiar varios juntos): arriba a la derecha de la card,
       sin rotulo; el titulo le deja lugar. */
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td:not([data-label]):not(.kds-table__cell--actions):not([colspan]) {
        position: absolute;
        top: .75rem;
        right: .8rem;
        width: auto;
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr:has(> td:not([data-label]):not(.kds-table__cell--actions):not([colspan])) > td[data-kds-card="titulo"],
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr:has(> td:not([data-label]):not(.kds-table__cell--actions):not([colspan])) > td[data-label="Nombre"],
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td:not([data-label]):first-child + td[data-label] {
        padding-right: 1.9rem;
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td.text-nowrap { white-space: normal !important; }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td.is-vacio,
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td.is-col-hidden { display: none; }

    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td[data-kds-card="titulo"],
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr:not(:has(> td[data-kds-card="titulo"])) > td[data-label="Nombre"],
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr:not(:has(> td[data-kds-card="titulo"], > td[data-label="Nombre"])) > td[data-label]:first-child,
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr:not(:has(> td[data-kds-card="titulo"], > td[data-label="Nombre"])) > td:not([data-label]):first-child + td[data-label] {
        grid-column: 1 / -1;
        order: -1;
        font-size: .95rem;
        font-weight: 700;
        color: var(--ds-text, #212529);
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td[data-kds-card="titulo"]::before,
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr:not(:has(> td[data-kds-card="titulo"])) > td[data-label="Nombre"]::before,
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr:not(:has(> td[data-kds-card="titulo"], > td[data-label="Nombre"])) > td[data-label]:first-child::before,
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr:not(:has(> td[data-kds-card="titulo"], > td[data-label="Nombre"])) > td:not([data-label]):first-child + td[data-label]::before { content: none; }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table .kds-cell-clamp {
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }

    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td.kds-table__cell--actions {
        grid-column: 1 / -1;
        order: 99;
        flex-direction: row;
        padding-top: .55rem;
        border-top: 1px solid var(--ds-border, #eee);
        white-space: normal;
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td.kds-table__cell--actions .kds-action-rail {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        width: 100%;
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td.kds-table__cell--actions .kds-action {
        gap: .35rem;
        grid-column: auto;
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td.kds-table__cell--actions .kds-action__label {
        position: static;
        padding: 0;
        background: none;
        color: inherit;
        font-size: .76rem;
        font-weight: 600;
        opacity: 1;
        transform: none;
        filter: none;
        pointer-events: auto;
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td.kds-table__cell--actions .kds-action__label::after { content: none; }

    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr:has(> td[colspan]) {
        grid-column: 1 / -1;
        display: block;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr > td[colspan] {
        display: block;
        padding: 1.5rem 1rem;
        text-align: center;
    }
    .kds-table--cards:not(.kds-table--cards-producto).kds-table > tbody > tr.kds-table__detail { grid-column: 1 / -1; }
}

/* ---- Columnas ocultas por vista (#625): el motor de kds-table.js marca th/td ---- */
.kds-table th.is-col-hidden,
.kds-table td.is-col-hidden { display: none; }

/* ── Celdas con cuerpo: foto + texto, y el dato con su aclaracion debajo ────
   Una tabla donde todas las celdas pesan igual obliga a leerlas todas para
   encontrar la que importa. Estas dos clases dan jerarquia sin agregar
   columnas: la foto ancla la fila y el sub-rotulo dice que ES el numero, en
   vez de gastar un encabezado en aclararlo. */
.kds-cell-media {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.kds-cell-media__txt { min-width: 0; }

.kds-cell-sub {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--ds-text-subtle, #999);
    line-height: 1.3;
    margin-top: .12rem;
    white-space: nowrap;
}

.kds-cell-stock { display: flex; flex-direction: column; gap: .1rem; min-width: 9rem; }

/* La fila a la que le falta material: se marca entera, no solo su numero. */
.kds-table tbody tr.is-faltante { background: color-mix(in srgb, var(--color-rose, #E6607B) 5%, transparent); }
.kds-table tbody tr.is-faltante:hover { background: color-mix(in srgb, var(--color-rose, #E6607B) 9%, transparent); }

/* ── kds-id / kds-num: los NÚMEROS de una tabla ────────────────────────────
   Un identificador (#64, un SKU, un comprobante) y una cifra no son texto:
   se leen en columna, de arriba a abajo, buscando uno. Con la tipografía
   normal cada dígito mide distinto, las cifras no se alinean entre filas y
   hay que leer cada una. Con cifras de ancho fijo la columna se escanea.

   Antes esto se resolvía con fw-bold y <strong> de Bootstrap, que dan peso
   pero no alineación — y son justamente lo que el KDS viene a reemplazar.

     <a class="kds-id">#64</a>          identificador del registro
     <span class="kds-num">1.204</span> una cifra
     <span class="kds-num kds-num--fuerte">8 un</span>  la cifra que importa */
.kds-id,
.kds-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.kds-id {
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    /* El identificador casi siempre es el link a la ficha, y ahi heredaba el azul
       de <a> de Bootstrap: el unico azul de una fila que es toda gris y teal. El
       numero manda por su peso, no por su color; el teal aparece al apuntarlo,
       como en el resto de las acciones del sistema. */
    color: var(--ds-text, #212529);
    text-decoration: none;
}

a.kds-id:hover,
a.kds-id:focus-visible {
    color: var(--color-teal, #2EB8A8);
    text-decoration: none;
}

.kds-num { color: var(--ds-text, #212529); }

/* La cifra que el que mira vino a buscar: lo demás de la fila la acompaña. */
.kds-num--fuerte { font-weight: 700; }

/* Una cifra en cero no es un dato, es la ausencia de uno: se apaga para que
   la vista salte a las filas que sí tienen algo. */
.kds-num--cero { color: var(--ds-text-subtle, #adb5bd); font-weight: 500; }

/* Los links DENTRO de una celda: heredan el color del texto y se distinguen al
   apuntarlos. Una tabla llena de azul deja de tener jerarquía — todo lo que es
   navegable grita lo mismo que el dato que se vino a leer. */
.kds-table tbody td a {
    color: inherit;
    text-decoration: none;
}

.kds-table tbody td a:hover,
.kds-table tbody td a:focus-visible {
    color: var(--color-teal, #2EB8A8);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* ============================================================
   LA FILA QUE ESTÁ RECORTANDO — tr.is-activa
   ============================================================
   Cuando una tabla no sólo muestra sino que MANDA —sus filas ponen el recorte de un
   kds-board—, hace falta que se vea cuál está puesta: el resto de la pantalla está
   hablando de esa fila. Una barrita teal a la izquierda y un fondo apenas tocado,
   sin pintar la fila entera: adentro siguen viviendo los badges y las barras, y si
   el fondo grita, ninguno se lee. */

.kds-table tbody tr.is-activa {
    background: color-mix(in srgb, var(--color-teal, #2EB8A8) 6%, transparent);
    box-shadow: inset .1875rem 0 0 var(--color-teal, #2EB8A8);
}

/* ============================================================
   LA TABLA QUE LE HACE LUGAR A UN EDITOR — .is-editando-inline
   ============================================================
   Cuando un renglón abre un editor adentro suyo, el ancho se pelea con columnas que en
   ese momento no le importan a nadie: el que está contestando "cuánto rinde una
   abrazadera" no está mirando el costo, ni escribiendo una nota, ni por borrar la fila.

   Las columnas marcadas `data-col-secundaria` se corren mientras dura la edición y
   vuelven al cerrarla. Es OPT-IN puro: una tabla que no marca ninguna columna no cambia
   en nada, y quién es secundaria lo decide cada pantalla, no el componente. */
.kds-table.is-editando-inline [data-col-secundaria] {
    display: none;
}

/* Lo que NO se tira: el resto que vuelve al deposito como pieza utilizable. Va en verde
   debajo de la merma porque es la contracara — la misma columna cuenta las dos mitades de
   lo que sale de la pieza, y confundirlas es confundir una perdida con material que sigue. */
.kds-vuelve { color: var(--color-teal-dark, #1FA090); }

/* El titulo de una card, apilado tambien sin la caja .kds-table-scroll. Una tabla en cards
   que vive suelta (el detalle de un pedido adentro de un cajon) no tiene el contenedor que
   arma la card canonica, y en el telefono cae en la celda generica [rotulo][valor] en
   fila: un titulo con nombre, insignias y renglones debajo queda con el nombre aplastado
   en una letra de ancho. Apilado, como en la card canonica. */
@media (max-width: 767.98px) {
    .kds-table--cards.kds-table > tbody > tr > td[data-kds-card="titulo"] {
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
    }
    .kds-table--cards.kds-table > tbody > tr > td[data-kds-card="titulo"][data-label]::before {
        flex: none;
    }
}