/* legacy: capa de transición del cutover (docs/design-system/CUTOVER.md D4). No agregar reglas aquí. */
@layer legacy {
/**
 * V4 Design System - Components
 * Reusable UI components (buttons, cards, inputs, badges)
 */

/* ===== BUTTONS ===== */

/* Icon Buttons */
.icon-button-compact {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    border: none;
    background: var(--bg);
    color: var(--fg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-button-compact:active {
    transform: scale(0.92);
}

/* Primary Button */
.btn-primary {
    height: 56px;
    padding: 0 28px;
    border-radius: 14px;
    border: none;
    background: var(--accent);
    color: var(--white);
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-primary:active {
    transform: scale(0.96);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Secondary Button */
.btn-secondary {
    height: 56px;
    padding: 0 28px;
    border-radius: 14px;
    border: 2px solid var(--border);
    background: var(--surface-1);
    color: var(--fg-2);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--surface-2);
    border-color: var(--fg-2);
}

.btn-secondary:active {
    transform: scale(0.96);
}

/* Danger Button */
.btn-danger {
    height: 56px;
    padding: 0 28px;
    border-radius: 14px;
    border: none;
    background: var(--bad);
    color: var(--white);
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: var(--bad-shade);
    transform: translateY(-2px);
}

.btn-danger:active {
    transform: scale(0.96);
}

/* Ghost Button */
.btn-ghost {
    height: 56px;
    padding: 0 28px;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: var(--fg-2);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.btn-ghost:hover {
    background: var(--bg);
}

.btn-ghost:active {
    transform: scale(0.96);
}

/* Back Button (text variant) */
.back-button {
    padding: 12px 24px;
    border-radius: var(--r-md);
    border: 2px solid var(--fg-2);
    background: var(--surface-1);
    color: var(--fg-2);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.back-button:hover {
    background: var(--bg);
    border-color: var(--fg-1);
    color: var(--fg-1);
}

.back-button:active {
    transform: scale(0.96);
}

/* Back Button (icon-only square variant, used in page headers) */
/* DEPRECATED: usar .kx-page-header__back — no usar */
.btn-back {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    background: var(--surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--fg-2);
    transition: all 0.2s;
    flex-shrink: 0;
    cursor: pointer;
}

.btn-back:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-1);
}

/* ===== CARDS ===== */

/* Base Card */
.card {
    background: var(--surface-1);
    border-radius: var(--r-xl);
    padding: 24px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* Large Card */
.card-lg {
    background: var(--surface-1);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: var(--shadow-md);
}

/* ===== INPUTS ===== */

/* Text Input */
.input {
    width: 100%;
    height: 50px;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    background: var(--surface-1);
    transition: all 0.2s ease;
}

.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.input::placeholder {
    color: var(--fg-3);
}

/* Large Input */
.input-lg {
    width: 100%;
    height: 56px;
    border-radius: 14px;
    border: 2px solid var(--border);
    padding: 0 20px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    background: var(--surface-1);
    transition: all 0.2s ease;
}

.input-lg:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Select Input */
.select {
    width: 100%;
    height: 50px;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    background: var(--surface-1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* ===== BADGES ===== */

.badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 700;
}

.badge-primary {
    background: var(--accent-tint);
    color: var(--accent-dark);
}

.badge-success {
    background: var(--ok-tint);
    color: var(--ok);
}

.badge-warning {
    background: var(--warn-tint);
    color: var(--warn);
}

.badge-danger {
    background: var(--bad-tint);
    color: var(--bad-shade);
}

/* Product Badge (circular counter) */

/* ===== CHIPS/TAGS ===== */

.chip,
.filter-chip {
    padding: 12px 24px;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    background: var(--surface-1);
    color: var(--fg-2);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    text-decoration: none;
}

.chip.active,
.filter-chip.active {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.chip:hover:not(.active),
.filter-chip:hover:not(.active) {
    border-color: var(--accent);
    background: var(--accent-tint);
}

/* ===== DIVIDERS ===== */

.divider {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-2);
    margin: 24px 0;
    position: relative;
}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 2px;
    background: var(--border);
}

.divider::before {
    left: 0;
}

.divider::after {
    right: 0;
}

/* ===== FORM GROUPS ===== */

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-1);
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    height: 50px;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    background: var(--surface-1);
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.form-select {
    width: 100%;
    height: 50px;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    background: var(--surface-1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* ===== TOAST NOTIFICATIONS ===== */

.toast {
    padding: 14px 24px;
    border-radius: 14px;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
    max-width: 360px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.toast-success {
    background: var(--ok);
    color: white;
}

.toast-error {
    background: var(--bad);
    color: white;
}

/* ============================================================
   KX-* DESIGN SYSTEM — namespace kx-
   Nuevo sistema de componentes reutilizables para modo admin.
   No choca con redesign.css porque usa el prefijo kx-.
   ============================================================ */

/* ===== KX CHIP ===== */



/* ===== KX FILTER CHIP (nivel 2 del sistema de chips — ver docs/DESIGN_SYSTEM_CHIPS.md) =====
   Subfiltros dentro de una pestaña. Azul = "dónde estoy" (.kx-chip); NEGRO = "qué filtro"
   (este). Solo texto (sin icono), selección exclusiva por grupo, "Todos" primero.
   Un módulo define solo el LAYOUT de su fila (.kx-filter-group); nunca el aspecto. */
/* scale.css / redesign.css / a11y.css fuerzan tamaño, peso, color y borde de button/select con
   !important (escala de texto del usuario, piso anti-zoom iOS). Los chips de filtro son de tamaño
   fijo como .kx-chip (a11y.css), así que se igualan aquí. */


/* Tono semántico: el chip activo sigue negro; el tono es solo este punto. */





/* Select con aspecto de chip (rango, categoría, orden): mismo alto, borde y fuente. */

/* ===== KX TABLE =====
   Misma gramática que .kx-tv-list (docs/DESIGN_SYSTEM_TABLAS.md §2): encabezado 13px/600 sin
   mayúsculas, fila de 14/16 px, borde inferior 1px, y la fila CRECE al pasar el puntero
   (solo con hover real). Usar <table class="kx-table"> para datos tabulares/reportes y
   .kx-tv-list para listas de entidades con acciones. */






.kx-table__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Contenedor de scroll para .kx-table — sin esto una tabla de 5+ columnas
   desborda la página completa en 390px. Vive en la capa compartida porque
   .kx-table también es compartida (las tablas con prefijo por página usan
   su propio .<prefix>-table-wrap). */
.kx-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* ===== KX PAGINATION ===== */

/* ============================================================
   KX TABLE VIEW — vista de tabla/lista densa estándar del sitio
   Origen: /inventory/v4/, la vista de referencia del equipo — su chrome
   (toolbar sticky, buscador, chips, view toggle, grid de filas denso con
   hover-grow, paginador sticky) fue extraído aquí y /inventory/v4/ corre
   sobre estas mismas clases (inventory.css solo aporta columnas de
   producto). Reutilizable por cualquier tabla/lista futura, o para migrar
   las existentes que hoy usan .kx-table + .kx-pagination cuando necesiten
   más densidad: selector de tamaño de página, filas que crecen al hover,
   paginador sticky. El título y los botones de acción de cabecera NO viven
   aquí: usar .kx-page-header + .kx-action-btn (ya estándar, no tocado).

   Ejemplo compuesto (columnas propias de la vista via --kx-tv-cols en el
   contenedor .kx-tv-list; ver KX HOVER REVEAL más arriba para las acciones
   ocultas-hasta-hover de cada fila):
     <div class="kx-tv-toolbar">
       <div class="kx-search"> ... </div>
       <div class="kx-tv-toolbar__row">
         <div class="filter-chips">...<button class="kx-chip">...</button></div>
         <div class="kx-view-toggle">...</div>
       </div>
     </div>
     <div class="kx-tv-list" style="--kx-tv-cols: 1fr 100px 100px 200px;">
       <div class="kx-tv-list__header"> ...títulos de columna... </div>
       <div class="kx-tv-row kx-hover-reveal"> ...celdas + .kx-hover-reveal__target... </div>
     </div>
     <div class="kx-pagination kx-pagination--sticky"> ... </div>
   ============================================================ */

/* ----- Toolbar sticky (buscador + chips + view toggle) ----- */
/* Fix: .main-content tiene overflow-y:auto, lo que crea un scroll container
   que rompe position:sticky en el toolbar. :has() acota el fix a páginas
   que efectivamente tienen un .kx-tv-toolbar. */
.main-content:has(.kx-tv-toolbar) {
    overflow-y: visible;
}

/* ----- KX SEARCH — variante con icono a la izquierda + botón limpiar -----
 * Alternativa a la clase pelada .search-input (ver más arriba) cuando la
 * vista necesita botón de limpiar. Ambas conviven: .search-input pelado para
 * el caso simple sin limpiar (history.html, pos/products_grid.html,
 * quick_entry/review.html), .kx-search cuando se necesita el botón.
 * Usage:
 *   <div class="kx-search">
 *     <i data-lucide="search" class="kx-search__icon"></i>
 *     <input type="text" class="kx-search__input" placeholder="...">
 *     <button class="kx-search__clear" x-show="query" @click="query = ''"><i data-lucide="x"></i></button>
 *   </div>
 */





/* iOS Safari hace zoom al enfocar inputs < 16px */




/* ----- KX VIEW TOGGLE — switch list/grid ----- */

/* ----- KX TV LIST/ROW — grid denso con fila que crece al hover -----
 * Contenedor .kx-tv-list, cabecera .kx-tv-list__header, filas .kx-tv-row.
 * Columnas propias de cada vista via variable heredada `--kx-tv-cols`
 * (setearla una vez en el contenedor .kx-tv-list, la heredan header y filas):
 *   .kx-tv-list { --kx-tv-cols: minmax(200px,1fr) 100px 70px 100px 380px; }
 * Barra de acento izquierda opcional (severidad/estado por fila) via
 * `--kx-tv-accent` (color) + `--kx-tv-accent-opacity` (0-1), seteadas por
 * clases modificadoras propias de cada vista (ej. .stock-warning en
 * inventario). Combinar con .kx-hover-reveal en la fila +
 * .kx-hover-reveal__target en las acciones para revelar botones ocultos
 * con hover/foco (ver sección KX HOVER REVEAL).
 */
.kx-tv-list {
    margin-top: 8px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md, 14px);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
/* Encabezado: idéntico a .kx-table th (13px/600, sin mayúsculas; a11y.css ya retiró el uppercase micro). */
.kx-tv-list__header {
    display: grid;
    grid-template-columns: var(--kx-tv-cols, 1fr);
    gap: 16px;
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-2);
}
.kx-tv-row {
    display: grid;
    grid-template-columns: var(--kx-tv-cols, 1fr);
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    transition: padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur-fast) var(--ease);
    position: relative;
}
.kx-tv-row:last-child { border-bottom: none; }
/* Crece solo la fila con hover — reflowea vecinas, no usa transform, para
   no generar glitches de layout. Sólo con puntero real: en touch el :hover
   queda pegado tras el tap y la fila saltaría de tamaño. Mismo crecimiento
   vertical que .kx-table (22-24px); el horizontal NO cambia para no desalinear el encabezado. */
@media (hover: hover) {
    .kx-tv-row:hover {
        background: var(--surface-2);
        padding: 22px 16px;
        box-shadow: var(--shadow-md);
        z-index: 1;
    }
}
.kx-tv-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--kx-tv-accent, transparent);
    opacity: var(--kx-tv-accent-opacity, 0);
    transition: opacity 0.15s ease;
}

/* ----- KX TV ENTITY — celda de identidad (ícono + título + subtítulo) -----
 * Primera columna típica de una .kx-tv-row: quién/qué es esta fila.
 * Ícono y título crecen junto con el hover-grow de la fila (mismo look en
 * cualquier vista: producto, alerta, empleado, venta...).
 * Usage:
 *   <div class="kx-tv-entity">
 *     <div class="kx-tv-icon kx-tv-icon--warn"><i data-lucide="..."></i></div>
 *     <div class="kx-tv-entity__body">
 *       <div class="kx-tv-title">Nombre</div>
 *       <div class="kx-tv-subtitle">Detalle secundario</div>
 *     </div>
 *   </div>
 */
.kx-tv-entity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kx-tv-entity__body { min-width: 0; flex: 1; }

.kx-tv-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-2);
    flex-shrink: 0;
    transition: width 0.18s ease, height 0.18s ease, background 0.18s ease;
}
.kx-tv-icon svg, .kx-tv-icon i { width: 18px; height: 18px; transition: width 0.18s ease, height 0.18s ease; }
@media (hover: hover) {
    .kx-tv-row:hover .kx-tv-icon { width: 52px; height: 52px; background: var(--surface-1); }
    .kx-tv-row:hover .kx-tv-icon svg, .kx-tv-row:hover .kx-tv-icon i { width: 26px; height: 26px; }
}

.kx-tv-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    transition: font-size 0.18s ease;
}
@media (hover: hover) {
    .kx-tv-row:hover .kx-tv-title { font-size: 16px; }
}

/* ----- KX TV ACTIONS / ACTION BTN — botones por fila -----
 * Un solo lenguaje de botón de acción para cualquier .kx-tv-row, reemplaza
 * soluciones ad-hoc por vista (kx-button suelto, eq-icon-btn, etc). Combinar
 * con .kx-hover-reveal en la fila + .kx-hover-reveal__target en el wrapper
 * de acciones para revelarlos solo con hover/foco.
 * Tonos: --primary (verde, constructiva) / --neutral (gris, default) /
 *        --warn (ámbar) / --danger (rojo, destructiva).
 * Modificador --icon: cuadrado 54x54 sin label, para filas con 2+ acciones.
 * Usage:
 *   <div class="kx-tv-actions">
 *     <button class="kx-tv-action-btn kx-tv-action-btn--neutral kx-tv-action-btn--icon" title="Ver">
 *       <i data-lucide="eye"></i>
 *     </button>
 *   </div>
 */

.kx-tv-action-btn {
    height: 54px;
    padding: 6px 20px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 19px !important; /* scale.css: `button{font-size:...!important}` global */
    font-weight: 800;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    transition: all 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}



/* ===== KX EMPTY STATE ===== */





/* ===== KX BUTTON =====
   Sistema de botones (docs/DESIGN_SYSTEM_TABLAS.md §5). `.btn-primary/secondary/danger/ghost` y
   `.kx-button--*` son el MISMO botón: comparten variantes (colores, radio, peso, sombra, hover),
   que viven en redesign.css §9 con listas de selectores. Solo difieren en el TAMAÑO, que se elige
   por rol:  lg 56 px = CTA de formulario/modal/POS (= .btn-*)  ·  base 48 px = barra de
   acciones, cabecera, toolbar  ·  sm 40 px = fila de tabla / denso. */











/* ===== KX SECTION ===== */
.kx-section {
    background: var(--surface-1, white);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.kx-section__header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kx-section__body { padding: 1.5rem; }

/* ===== KX BADGE ===== */
.kx-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.kx-badge--success { background: color-mix(in srgb, var(--ok)     var(--tint-bg-amt), var(--surface-1)); color: color-mix(in srgb, var(--ok)     var(--tint-ink-amt), var(--tint-ink)); border: 1.5px solid var(--ok); }
.kx-badge--warning { background: color-mix(in srgb, var(--warn)   var(--tint-bg-amt), var(--surface-1)); color: color-mix(in srgb, var(--warn)   var(--tint-ink-amt), var(--tint-ink)); border: 1.5px solid var(--warn); }
.kx-badge--danger  { background: color-mix(in srgb, var(--bad)    var(--tint-bg-amt), var(--surface-1)); color: color-mix(in srgb, var(--bad)    var(--tint-ink-amt), var(--tint-ink)); border: 1.5px solid var(--bad); }
.kx-badge--neutral { background: var(--surface-2); color: var(--fg-2); border: 1.5px solid var(--border); }
.kx-badge--purple  { background: color-mix(in srgb, var(--accent) var(--tint-bg-amt), var(--surface-1)); color: color-mix(in srgb, var(--accent) var(--tint-ink-amt), var(--tint-ink)); border: 1.5px solid var(--accent); }

/* ===== SEARCH INPUT (uso con clase pelada, sin .search-wrapper) =====
   Puertadas por: templates/v4/sales/history.html, templates/v4/pos/components/products_grid.html,
   templates/v4/inventory/quick_entry/review.html. Ver plan de unificación 4.3. */
.search-input {
    width: 100%;
    height: 52px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    padding: 0 48px 0 18px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    background: var(--surface-1);
    transition: all 0.2s ease;
}
.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, white);
}
.search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-2);
}

/* ===== KX PAGE — contenedor de ancho estándar ===== */




/* ===== KX PAGE HEADER ===== */









/* ===== KX PAGE — RESPONSIVE ===== */


/* ===== KX ACTION BUTTON — touch-first header CTA (shared component) ===== */
/*
 * Usage:
 *   <button class="kx-action-btn kx-action-btn--primary">
 *       <i data-lucide="plus"></i><span>Label</span>
 *   </button>
 * Modifiers: --primary (terracota fill) | --secondary (neutral) | --accent (terracota tint)
 * Count badge: <span class="kx-action-btn__count">N</span> inside the button
 */
.kx-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border-radius: 13px;
    font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.13s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.13s ease,
                background 0.12s ease;
}

.kx-action-btn i,
.kx-action-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    stroke-width: 2 !important;
}

.kx-action-btn:active {
    transform: scale(0.95) !important;
    transition-duration: 0.07s !important;
}

/* Secondary — neutral utility */
.kx-action-btn--secondary {
    background: var(--surface-2);
    color: var(--fg-1);
    border: 1.5px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.kx-action-btn--secondary:hover {
    background: var(--surface-3);
    border-color: var(--fg-3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: var(--fg-1);
}

/* Accent — terracota tint (e.g. alert button when count > 0) */

/* Primary — terracota solid CTA */

/* Inline count badge */

/* Mobile responsive (scoped to header actions slot) */


/* Icon-only variant — compact square button, no text label */
/* El badge de conteo pasa de "pastilla inline" a insignia superpuesta en la esquina —
   mismo tratamiento que .kx-nav__badge (barra inferior) para consistencia visual. */

/* ===== KX TOOLTIP — small hover label bubble (pointer devices only) ===== */
/*
 * Usage: add class + data-tooltip to any element with position context.
 *   <a class="kx-action-btn kx-action-btn--icon-only kx-tooltip" data-tooltip="Alertas">…</a>
 * Touch devices skip the hover reveal entirely (no sticky tooltip on tap).
 */





/* ===== KX HOVER REVEAL — acciones ocultas hasta hover/foco en la fila o tarjeta =====
 * Origen: patron "acciones ocultas hasta hover" nacido en .row-actions/.card-actions-compact
 * de /inventory/v4/ (inventory.css) y replicado en .fiado-actions-cell de /sales/fiados/.
 * Se extrae aqui como componente unico para no duplicar la logica opacity/transform en cada
 * vista nueva con tabla o grid de tarjetas.
 *
 * Usage:
 *   1. Clase `kx-hover-reveal` en el contenedor que dispara el hover (fila <tr>, <div> de fila,
 *      tarjeta de producto, etc).
 *   2. Clase `kx-hover-reveal__target` en el bloque de acciones dentro de ese contenedor.
 *      Agregar `kx-hover-reveal__target--rise` si el contenedor es una tarjeta (grid) en vez
 *      de una fila de tabla/lista — cambia la direccion de entrada de horizontal a vertical.
 *
 * Revela con mouse (:hover) y con teclado (:focus-within) — nunca solo en click, para que
 * Tab no dañe foco invisible (WCAG 2.4.7). En touch (sin hover) queda siempre visible via
 * `@media (hover:none)`. `prefers-reduced-motion` ya lo cubre a11y.css globalmente (pisa
 * transition-duration en `*`).
 *
 * Ejemplo (fila de tabla):
 *   <tr class="kx-hover-reveal">
 *     <td>...</td>
 *     <td><div class="kx-hover-reveal__target"> ...botones... </div></td>
 *   </tr>
 *
 * Ejemplo (tarjeta de grid):
 *   <div class="product-card kx-hover-reveal">
 *     ...
 *     <div class="kx-hover-reveal__target kx-hover-reveal__target--rise"> ...botones... </div>
 *   </div>
 *
 * El layout interno (display, gap, justify-content, tamaños de boton) sigue siendo
 * responsabilidad de la vista — este componente solo resuelve el show/hide.
 */
.kx-hover-reveal__target {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.kx-hover-reveal:hover .kx-hover-reveal__target,
.kx-hover-reveal:focus-within .kx-hover-reveal__target {
    opacity: 1;
    transform: translateX(0);
}
@media (hover: none) {
    .kx-hover-reveal__target {
        opacity: 1;
        transform: none;
    }
}

/* ===== KX SCROLL STRIP — subtle prev/next arrows for horizontal-scroll rows ===== */
/*
 * Usage:
 *   <div class="kx-scroll-wrap" x-data="scrollStrip()" x-init="init($refs.track)">
 *       <button class="kx-scroll-arrow kx-scroll-arrow--left" x-show="canLeft" x-cloak @click="scrollBy(-1)" aria-label="Ver anteriores"><i data-lucide="chevron-left"></i></button>
 *       <div class="my-strip" x-ref="track" @scroll.passive="onScroll">...</div>
 *       <button class="kx-scroll-arrow kx-scroll-arrow--right" x-show="canRight" x-cloak @click="scrollBy(1)" aria-label="Ver más"><i data-lucide="chevron-right"></i></button>
 *   </div>
 * Requires src/static/js/v4/scroll-strip.js (registers the `scrollStrip` Alpine component).
 */

/* ===== KX BATCHBAR — barra flotante de selección múltiple =====
 * Pill oscura centrada que aparece solo cuando hay elementos
 * seleccionados. Reemplaza barras fijas de ancho completo por un
 * componente flotante con la misma animación de entrada/salida en
 * todas partes: slide-up + fade (220ms). Nace en Alertas (batchbar
 * de reposición) y es el patrón por defecto para cualquier flujo de
 * selección múltiple nuevo (pickers, tablas con acciones batch, etc).
 *
 * Usage:
 *   <div class="kx-batchbar" x-show="selected.length > 0" x-cloak
 *        x-transition:enter-start="kx-batchbar-start" x-transition:enter-end="kx-batchbar-end"
 *        x-transition:leave-start="kx-batchbar-end" x-transition:leave-end="kx-batchbar-start">
 *     <div class="kx-batchbar__inner">
 *       <div class="kx-batchbar__count" x-text="selected.length"></div>
 *       <div class="kx-batchbar__label">
 *         <strong x-text="...">…</strong>
 *         <span>texto de apoyo opcional</span>
 *       </div>
 *       <button type="button" class="kx-batchbar__clear" @click="...">Limpiar</button>
 *       <a/button class="kx-batchbar__cta">Acción principal</a/button>
 *     </div>
 *   </div>
 * Mismo patrón Alpine de clases con nombre que .kx-sheet-start/.kx-sheet-end
 * (shell.css) — el elemento con x-show lleva la transition CSS, las clases
 * start/end solo aportan el estado inicial/final de opacity + transform.
 */
.kx-batchbar {
    position: fixed; left: 0; right: 0; bottom: calc(var(--footer-h, 76px) + 12px + env(safe-area-inset-bottom, 0px)); z-index: 150;
    display: flex; justify-content: center; padding: 0 16px; pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2, .8, .2, 1);
}
.kx-batchbar__inner {
    pointer-events: auto;
    background: var(--fg-1); color: var(--surface-1);
    border-radius: var(--r-lg, 18px);
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .45);
    display: flex; align-items: center; gap: 14px;
    padding: 10px 12px 10px 18px;
    max-width: 640px; width: 100%;
}
.kx-batchbar__count {
    font-family: var(--font-mono); font-weight: 700; font-size: 18px;
    background: color-mix(in srgb, currentColor 14%, transparent); min-width: 38px; height: 38px; padding: 0 6px;
    border-radius: var(--r-sm, 10px); display: grid; place-items: center; flex-shrink: 0;
}
.kx-batchbar__label { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; }
.kx-batchbar__label strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-batchbar__label span { display: block; color: color-mix(in srgb, currentColor 58%, transparent); font-size: 11.5px; font-weight: 500; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-batchbar__clear {
    border: none; background: none; font-size: 12.5px; font-weight: 600; cursor: pointer;
    color: color-mix(in srgb, currentColor 65%, transparent); padding: 8px 10px; border-radius: var(--r-sm, 10px);
    transition: background .12s, color .12s; white-space: nowrap;
}
.kx-batchbar__clear:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: currentColor; }
.kx-batchbar__cta {
    background: var(--accent); color: #fff; border: none; cursor: pointer;
    padding: 12px 18px; border-radius: var(--r-md, 14px); font-weight: 700; font-size: 14px;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    text-decoration: none; transition: background .15s;
}
.kx-batchbar__cta:disabled { opacity: .5; cursor: not-allowed; }
.kx-batchbar__cta:hover:not(:disabled) { background: var(--accent-dark); }
.kx-batchbar__cta i,
.kx-batchbar__cta svg { width: 16px !important; height: 16px !important; }

/* Tokens de transición Alpine — mismo lenguaje que kx-sheet-start/kx-sheet-end */
.kx-batchbar-start { opacity: 0; transform: translateY(16px) scale(.97); }
.kx-batchbar-end   { opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
    .kx-batchbar { transition: none !important; }
}
@media (max-width: 480px) {
    .kx-batchbar__inner { gap: 10px; padding: 8px 8px 8px 14px; }
    .kx-batchbar__label span { display: none; }
    .kx-batchbar__cta { padding: 10px 14px; font-size: 13px; }
}
}