/* ============================================================================
   Lonky ERP — Theme (adopción del Atomic Design System)
   Fase 1: tokens + re-tematización de Bootstrap 5.3.
   Se carga DESPUÉS de Bootstrap para pisar sus defaults. Ver docs/design-system/tokens.md
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root {
    /* ---- Paleta del DS (escala 50–900) ---- */
    --lonky-blue-50:  #F3F4FF; --lonky-blue-100: #D5D8FA; --lonky-blue-200: #ABB1F6;
    --lonky-blue-300: #8189F1; --lonky-blue-400: #5962ED; --lonky-blue-500: #323CE9;
    --lonky-blue-600: #2830BA; --lonky-blue-700: #1E248B; --lonky-blue-800: #14185D; --lonky-blue-900: #090C2F;

    --lonky-orange-500: #EC7F4F;
    --lonky-yellow-500: #F7BF50;
    --lonky-red-500:    #DD3838;
    --lonky-green-500:  #79D94D;

    --lonky-grey-25:  #F9FAFB; --lonky-grey-50:  #F0F3F9; --lonky-grey-100: #EAEFF6;
    --lonky-grey-200: #D8DFE9; --lonky-grey-300: #B1BACA; --lonky-grey-400: #8A96AD;
    --lonky-grey-500: #61708C; --lonky-grey-600: #475368; --lonky-grey-700: #3F4A5C;
    --lonky-grey-800: #2E3643; --lonky-grey-900: #1D222B;

    --lonky-bg:    #F3F4FA;   /* fondo de la app (neutral grey) */
    --lonky-sand:  #FAFAFA;   /* fondo del sidebar */
    --lonky-white: #FFFFFF;

    /* ---- Estados (se repiten en todo el sistema) ---- */
    --lonky-active-bg:   var(--lonky-blue-50);
    --lonky-active-fg:   var(--lonky-blue-500);
    --lonky-hover-bg:    var(--lonky-grey-100);
    --lonky-text:        var(--lonky-grey-900);
    --lonky-text-muted:  var(--lonky-grey-500);
    --lonky-label:       var(--lonky-grey-400);
    --lonky-border:      var(--lonky-grey-200);

    /* ---- Radius (por componente, exacto del kit) ---- */
    --lonky-radius-input: 4px;   /* inputs, select, dropdown, botones */
    --lonky-radius-card: 4px;    /* cards de dashboard */
    --lonky-radius-form: 12px;   /* contenedores de formulario */
    --lonky-radius-table: 8px;   /* header / paginación de tabla */
    --lonky-radius-pill: 999px;  /* badges, avatar, switch, áreas circulares */
    --lonky-radius: 8px;         /* general (cards con más presencia) */
    --lonky-radius-sm: 6px;      /* usado por el shell */

    /* ---- Anillo de foco canónico (blue/100) ---- */
    --lonky-focus-ring: 0 0 0 2px #E0E1FF;
    --lonky-btn-focus-glow: 0 0 16px rgba(0, 0, 0, .2);

    /* ---- Tipografía ---- */
    --lonky-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lonky-font-title: 'Poppins', 'Inter', sans-serif;

    /* ======================================================================
       Re-tematización de Bootstrap: pisamos sus variables con los tokens del DS
       ====================================================================== */
    --bs-primary:      #323CE9;
    --bs-primary-rgb:  50, 60, 233;
    --bs-danger:       #DD3838;  --bs-danger-rgb:  221, 56, 56;
    --bs-success:      #61AE3E;  --bs-success-rgb: 97, 174, 62;   /* green/600 para contraste con texto blanco */
    --bs-warning:      #F7BF50;  --bs-warning-rgb: 247, 191, 80;
    --bs-info:         #3E84E9;  --bs-info-rgb:    62, 132, 233;
    --bs-body-color:   #1D222B;  --bs-body-color-rgb: 29, 34, 43;
    --bs-body-bg:      #F3F4FA;
    --bs-border-color: #D8DFE9;
    --bs-secondary-color: #61708C;
    --bs-border-radius:    8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 12px;
    --bs-link-color:       #323CE9;  --bs-link-color-rgb: 50, 60, 233;
    --bs-link-hover-color: #2830BA;
    --bs-font-sans-serif:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Base + escala tipográfica (exacta del kit; base 13px) ---- */
body {
    font-family: var(--lonky-font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--lonky-text);
    background-color: var(--lonky-bg);
    --bs-body-font-size: 14px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--lonky-font-title);
    font-weight: 600;
    color: var(--lonky-text);
}
h1, .h1 { font-size: 26px; line-height: 32px; }
h2, .h2 { font-size: 22px; line-height: 26px; }
h3, .h3 { font-size: 17px; line-height: 22px; }
h4, .h4 { font-size: 15px; line-height: 20px; }
h5, .h5 { font-size: 13px; line-height: 16px; }
h6, .h6 { font-size: 12px; line-height: 15px; }
small, .small { font-size: 12px; }
.text-muted, .text-secondary { color: var(--lonky-text-muted) !important; }

/* ============================================================================
   BOTONES (valores exactos del kit — Fase 3)
   Tamaños: M (default) 40px · S (.btn-sm) 34px · L (.btn-lg) 48px. Radius 4px. weight 500.
   ============================================================================ */
.btn {
    --bs-btn-padding-y: 10px; --bs-btn-padding-x: 20px;
    --bs-btn-font-size: 15px; --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--lonky-radius-input);
    line-height: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-sm {
    --bs-btn-padding-y: 9px; --bs-btn-padding-x: 18px; --bs-btn-font-size: 13px;
    --bs-btn-border-radius: var(--lonky-radius-input); line-height: 16px;
}
.btn-lg {
    --bs-btn-padding-y: 14px; --bs-btn-padding-x: 28px; --bs-btn-font-size: 15px;
    --bs-btn-border-radius: var(--lonky-radius-input); line-height: 20px;
}

/* Primary (relleno) */
.btn-primary {
    --bs-btn-bg: #323CE9;        --bs-btn-border-color: #323CE9;
    --bs-btn-hover-bg: #5962ED;  --bs-btn-hover-border-color: #5962ED;
    --bs-btn-active-bg: #5962ED;  --bs-btn-active-border-color: #5962ED;
    --bs-btn-disabled-bg: #B1BACA; --bs-btn-disabled-border-color: #B1BACA;
}
.btn-primary:focus-visible { background-color: #8189F1; border-color: #8189F1; box-shadow: var(--lonky-focus-ring); }

/* Secondary = outline gris → azul (mapeado a .btn-outline-secondary, muy usado en las vistas) */
.btn-outline-secondary {
    --bs-btn-color: #1D222B;        --bs-btn-border-color: #D8DFE9;
    --bs-btn-hover-bg: transparent; --bs-btn-hover-color: #323CE9; --bs-btn-hover-border-color: #D8DFE9;
    --bs-btn-active-bg: transparent; --bs-btn-active-color: #323CE9; --bs-btn-active-border-color: #323CE9;
    --bs-btn-disabled-color: #B1BACA; --bs-btn-disabled-border-color: #B1BACA;
}
.btn-outline-secondary:focus-visible { border-color: #323CE9; color: #323CE9; box-shadow: var(--lonky-focus-ring); }

.btn-outline-primary {
    --bs-btn-color: #323CE9;    --bs-btn-border-color: #323CE9;
    --bs-btn-hover-bg: #323CE9; --bs-btn-hover-border-color: #323CE9;
    --bs-btn-active-bg: #5962ED;
}

/* Danger / Success (Bootstrap 5.3 no los deriva de --bs-*) */
.btn-danger  { --bs-btn-bg: #DD3838; --bs-btn-border-color: #DD3838; --bs-btn-hover-bg: #CD2727; --bs-btn-hover-border-color: #CD2727; }
.btn-success { --bs-btn-bg: #61AE3E; --bs-btn-border-color: #61AE3E; --bs-btn-hover-bg: #48822E; --bs-btn-hover-border-color: #48822E; }

/* Link */
.btn-link { --bs-btn-color: #323CE9; --bs-btn-hover-color: #323CE9; --bs-btn-font-weight: 500; text-decoration: none; }
.btn-link:hover { background-color: #F3F4FF; }
.btn-link:focus-visible { background-color: #F3F4FF; color: #5962ED; }

/* Secondary sólido / dark → botón neutro del kit (sand + borde sutil) */
.btn-secondary, .btn-dark {
    --bs-btn-bg: #FAFAFA; --bs-btn-border-color: #D8DFE9; --bs-btn-color: #1D222B;
    --bs-btn-hover-bg: #F0F3F9; --bs-btn-hover-border-color: #D8DFE9; --bs-btn-hover-color: #1D222B;
    --bs-btn-active-bg: #EAEFF6; --bs-btn-active-border-color: #D8DFE9; --bs-btn-active-color: #1D222B;
    --bs-btn-disabled-bg: #FAFAFA; --bs-btn-disabled-color: #B1BACA; --bs-btn-disabled-border-color: #EAEFF6;
}
.btn-outline-dark {
    --bs-btn-color: #1D222B; --bs-btn-border-color: #D8DFE9;
    --bs-btn-hover-bg: #F0F3F9; --bs-btn-hover-color: #1D222B; --bs-btn-hover-border-color: #D8DFE9;
    --bs-btn-active-bg: #EAEFF6; --bs-btn-active-color: #1D222B;
}
.btn-light {
    --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #D8DFE9; --bs-btn-color: #1D222B;
    --bs-btn-hover-bg: #F0F3F9; --bs-btn-hover-border-color: #D8DFE9;
}
.btn-outline-danger  { --bs-btn-color: #DD3838; --bs-btn-border-color: #F99898; --bs-btn-hover-bg: #DD3838; --bs-btn-hover-border-color: #DD3838; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #CD2727; }
.btn-outline-success { --bs-btn-color: #61AE3E; --bs-btn-border-color: #ABE894; --bs-btn-hover-bg: #61AE3E; --bs-btn-hover-border-color: #61AE3E; --bs-btn-hover-color: #fff; }
.btn-outline-info    { --bs-btn-color: #3E84E9; --bs-btn-border-color: #ABCEF6; --bs-btn-hover-bg: #3E84E9; --bs-btn-hover-color: #fff; }

/* ---- Nav tabs (estilo del kit: activo con subrayado azul) ---- */
.nav-tabs { border-bottom: 1px solid #EAEFF6; }
.nav-tabs .nav-link {
    color: #61708C; border: none; border-bottom: 2px solid transparent;
    font-weight: 500; font-size: 13px; padding: 8px 14px; margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: #323CE9; border-color: transparent transparent transparent; isolation: auto; }
.nav-tabs .nav-link.active { color: #323CE9; background: none; border: none; border-bottom: 2px solid #323CE9; }
/* Contadores dentro de tabs: son números, NO badges de estado → sin el punto, neutro compacto */
.nav-link .badge::before, .pos-tab .badge::before { display: none; }
.nav-link .badge, .pos-tab .badge {
    background: #EAEFF6 !important; color: #61708C !important;
    padding: 1px 7px; font-weight: 600; gap: 0; min-width: 20px; justify-content: center;
}
.nav-link.active .badge, .pos-tab.active .badge { background: #F3F4FF !important; color: #323CE9 !important; }

.text-primary { color: var(--lonky-blue-500) !important; }
.bg-primary  { background-color: var(--lonky-blue-500) !important; }
.link-primary, a { color: var(--lonky-blue-500); }
a:hover { color: var(--lonky-blue-600); }

/* ============================================================================
   INPUTS / SELECT / TEXTAREA (valores exactos del kit — Fase 3)
   ============================================================================ */
.form-control, .form-select {
    min-height: 34px;                 /* tamaño M */
    padding: 6px 12px;
    border: 1px solid #EAEFF6;
    border-radius: var(--lonky-radius-input);
    color: #1D222B;
    font-size: 14px;
    background-color: #FFFFFF;
}
.form-control::placeholder { color: #B1BACA; }
.form-control:hover:not(:disabled), .form-select:hover:not(:disabled) { border-color: #323CE9; }
.form-control:focus, .form-select:focus {
    border-color: #323CE9;
    background-color: rgba(243, 244, 255, .5);
    box-shadow: var(--lonky-focus-ring);
    color: #1D222B;
}
.form-control:disabled, .form-select:disabled,
.form-control[readonly] { background-color: #F2F2F2; border-color: #BEBEBE; color: #BEBEBE; }
.form-control-lg, .form-select-lg { min-height: 40px; }   /* L */
.form-control-sm, .form-select-sm { min-height: 25px; padding: 3px 12px; font-size: 12px; } /* S */

/* Validación: borde de color (sin el ícono/anillo de Bootstrap) */
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
    border-color: #DD3838; background-image: none; box-shadow: none;
}
.form-control.is-invalid:focus { box-shadow: 0 0 0 2px rgba(221, 56, 56, .18); }
.form-control.is-valid, .was-validated .form-control:valid { border-color: #61AE3E; background-image: none; }
.invalid-feedback { color: #DD3838; font-size: 11px; }

/* Labels y textos de campo */
.form-label { font-size: 12px; font-weight: 500; color: #61708C; margin-bottom: 6px; }
.form-text { font-size: 11px; color: #61708C; }

/* Checkbox/radio/switch: valores del kit (checkbox r2, check y switch-on azul, foco) */
.form-check-input { border-color: #D8DFE9; }
.form-check:not(.form-switch) .form-check-input[type=checkbox] { border-radius: 2px; }
.form-check-input:checked { background-color: #323CE9; border-color: #323CE9; }
.form-check-input:focus { border-color: #323CE9; box-shadow: var(--lonky-focus-ring); }
.form-switch .form-check-input:checked { background-color: #323CE9; border-color: #323CE9; }

.btn:focus-visible { outline: none; box-shadow: var(--lonky-focus-ring); }

/* ============================================================================
   SUPERFICIES (cards)
   ============================================================================ */
.card {
    --bs-card-border-color: var(--lonky-border);
    --bs-card-border-radius: var(--lonky-radius-form);
    border-radius: var(--lonky-radius-form);
}
.card.shadow-sm, .shadow-sm { box-shadow: 0 1px 3px rgba(29, 34, 43, .06), 0 1px 2px rgba(29, 34, 43, .04) !important; }

/* ============================================================================
   TABLAS (exacto del kit: header sand r8, SIN uppercase, filas 50px, divisor sutil)
   ============================================================================ */
.table {
    --bs-table-color: #1D222B;
    --bs-table-border-color: rgba(0, 0, 0, .1);
    margin-bottom: 0;
}
.table > thead th {
    background-color: #FAFAFA;
    color: rgba(29, 34, 43, .65);
    font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0;
    padding: 10px 20px; border-bottom: none;
}
.table > thead tr th:first-child { border-top-left-radius: var(--lonky-radius-table); border-bottom-left-radius: var(--lonky-radius-table); }
.table > thead tr th:last-child  { border-top-right-radius: var(--lonky-radius-table); border-bottom-right-radius: var(--lonky-radius-table); }
.table > tbody > tr > td { padding: 12px 20px; border-bottom: .5px solid rgba(0, 0, 0, .1); vertical-align: middle; font-size: 14px; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #FAFAFA; }
/* Acciones de fila: respetar la alineación derecha de la celda (text-end) */
td.text-end > .d-flex { justify-content: flex-end; }
.table td .d-flex form { margin: 0; }

/* ============================================================================
   BADGES / STATUS (estilo pill neutra + punto de color)
   ============================================================================ */
.badge {
    display: inline-flex; align-items: center; gap: 8px;
    background-color: #FAFAFA !important; color: #1D222B !important;
    font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: var(--lonky-radius-pill);
}
.badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background-color: var(--badge-dot, #8A96AD); flex-shrink: 0;
}
/* El texto queda oscuro; el PUNTO toma el color semántico según la clase de fondo Bootstrap
   (cubre tanto .bg-* como las utilidades .text-bg-* de Bootstrap 5.3). */
.badge.bg-success,   .badge.text-bg-success  { --badge-dot: #32B5AC; }
.badge.bg-warning,   .badge.text-bg-warning  { --badge-dot: #FFA100; }
.badge.bg-info,      .badge.text-bg-info     { --badge-dot: #00A3FF; }
.badge.bg-danger,    .badge.text-bg-danger   { --badge-dot: #DD3838; }
.badge.bg-primary,   .badge.text-bg-primary  { --badge-dot: #323CE9; }
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-light,     .badge.text-bg-light,
.badge.bg-dark,      .badge.text-bg-dark     { --badge-dot: #8A96AD; }

/* ---- Alerts con radius del DS ---- */
.alert { --bs-alert-border-radius: var(--lonky-radius-input); border-radius: var(--lonky-radius-input); }
.dropdown-menu { --bs-dropdown-border-color: transparent; border-radius: var(--lonky-radius-input); box-shadow: 0 0 12px rgba(0, 0, 0, .1); }
.dropdown-item.active, .dropdown-item:active { background-color: #F3F4FF; color: #323CE9; }
.dropdown-item:hover, .dropdown-item:focus { background-color: #F0F3F9; }

/* ---- Código / slug inline (evita el rosa por defecto de Bootstrap) ---- */
code, .text-monospace code {
    color: #61708C; background: #F0F3F9; padding: 1px 6px;
    border-radius: 4px; font-size: .85em;
}

/* ---- Acciones de fila estilo "row-actions" (Editar | Eliminar) del listado ---- */
.quick-links { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.quick-links a, .quick-links button {
    background: none; border: none; padding: 0; font-size: 13px; line-height: 1.4;
    color: #323CE9; text-decoration: none; cursor: pointer;
}
.quick-links a:hover, .quick-links button:hover { text-decoration: underline; }
.quick-links button[type="submit"] { color: #DD3838; }  /* Eliminar destructivo */
.quick-links .sep { color: #D8DFE9; }

/* ============================================================================
   SHELL — Sidebar + Topbar (Fase 2 del design system)
   ============================================================================ */
.lonky-shell { min-height: 100vh; }

/* ---- Sidebar ---- */
.lonky-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 239px; z-index: 1030;
    background: var(--lonky-sand); border-right: 1px solid var(--lonky-border);
    display: flex; flex-direction: column; transition: width .18s ease;
}
.is-collapsed .lonky-sidebar { width: 77px; }

.lonky-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 16px; border-bottom: 1px solid var(--lonky-grey-100); min-height: 70px;
}
.lonky-brand {
    display: flex; align-items: center; gap: 10px; text-decoration: none; overflow: hidden;
    color: var(--lonky-blue-500); font-family: var(--lonky-font-title); font-size: 18px; font-weight: 600;
}
.lonky-brand i { font-size: 22px; flex-shrink: 0; }
.lonky-brand-text { color: var(--lonky-text); white-space: nowrap; }
.lonky-brand-text b { color: var(--lonky-blue-500); }
.lonky-collapse-btn {
    width: 26px; height: 26px; flex-shrink: 0; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--lonky-grey-200); border-radius: 6px;
    color: var(--lonky-grey-500); cursor: pointer;
}
.lonky-collapse-btn:hover { color: var(--lonky-blue-500); border-color: var(--lonky-blue-200); }

/* ---- Nav ---- */
.lonky-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 0; }
.lonky-nav-section { padding: 4px 0 16px; }
.lonky-nav-section + .lonky-nav-section { border-top: 1px solid var(--lonky-grey-100); padding-top: 12px; }
.lonky-nav-label {
    display: block; padding: 0 20px 6px; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--lonky-label);
}
.lonky-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; margin: 2px 8px; border-radius: var(--lonky-radius-sm);
    color: var(--lonky-text-muted); font-size: 14px; font-weight: 500;
    text-decoration: none; border: none; background: none; white-space: nowrap; cursor: pointer;
}
.lonky-nav-item i { font-size: 18px; flex-shrink: 0; width: 18px; text-align: center; }
.lonky-nav-item:hover { background: var(--lonky-hover-bg); color: var(--lonky-text); }
.lonky-nav-item.is-active { background: var(--lonky-active-bg); color: var(--lonky-active-fg); font-weight: 600; }
.lonky-nav-item.is-active i { color: var(--lonky-active-fg); }
.lonky-nav-danger { color: var(--lonky-red-500); }
.lonky-nav-danger:hover { background: #FFF5F5; color: var(--lonky-red-500); }

/* ---- Grupos desplegables (acordeón) ---- */
.lonky-nav-parent { width: calc(100% - 16px); text-align: left; }
.lonky-nav-parent .lonky-nav-text { flex: 1 1 auto; }
.lonky-nav-caret {
    font-size: 12px !important; width: 12px !important;
    transition: transform .18s ease; opacity: .6;
}
.lonky-nav-group.is-open .lonky-nav-caret { transform: rotate(180deg); }
/* Con el grupo cerrado, un hijo activo se señala en el padre. */
.lonky-nav-parent.has-active-child { color: var(--lonky-text); font-weight: 600; }
.lonky-nav-group.is-open .lonky-nav-parent { color: var(--lonky-text); }

/* Colapso animado sin JS de alturas: el grid va de 0fr a 1fr. Requiere que el
   submenú tenga UN solo hijo (.lonky-submenu-inner) — con los ítems sueltos solo
   colapsa la primera fila. */
.lonky-submenu {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .18s ease;
}
.lonky-nav-group.is-open .lonky-submenu { grid-template-rows: 1fr; }
.lonky-submenu-inner { min-height: 0; overflow: hidden; }
/* El título solo se usa en el flyout del sidebar colapsado. */
.lonky-submenu-title { display: none; }

.lonky-nav-child {
    font-size: 13px; padding: 6px 14px 6px 44px; margin: 1px 8px;
    position: relative; overflow: hidden;
}
/* Guía vertical que ata los hijos al padre. */
.lonky-nav-child::before {
    content: ''; position: absolute; left: 26px; top: 0; bottom: 0;
    width: 2px; background: var(--lonky-grey-100);
}
.lonky-nav-child.is-active::before { background: var(--lonky-active-fg); }

/* ---- Ítem "próximamente": inerte, sin afordancia de click ---- */
.lonky-nav-item.is-soon { opacity: .5; cursor: default; }
.lonky-nav-item.is-soon:hover { background: none; color: var(--lonky-text-muted); }
.lonky-nav-badge {
    font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 999px;
    background: var(--lonky-grey-100); color: var(--lonky-label); margin-left: auto;
}

/* ---- Footer del sidebar ---- */
.lonky-sidebar-footer { padding: 10px 0 14px; border-top: 1px solid var(--lonky-grey-100); }
.lonky-version { text-align: center; font-size: 11px; color: var(--lonky-grey-300); margin-top: 4px; }

/* ---- Colapsado: ocultar textos ---- */
.is-collapsed .lonky-nav-text,
.is-collapsed .lonky-brand-text,
.is-collapsed .lonky-version { display: none; }
.is-collapsed .lonky-nav-label { text-align: center; padding: 0 4px 6px; font-size: 8px; }
.is-collapsed .lonky-nav-item { justify-content: center; padding: 8px; margin: 2px 12px; }
.is-collapsed .lonky-sidebar-header { justify-content: center; padding: 18px 8px; }
.is-collapsed .lonky-brand { justify-content: center; }

/* ---- Colapsado: los submenús pasan a flyout al hover ----
   position: fixed para escapar del overflow-y del .lonky-nav; el top lo calcula
   Alpine al entrar el mouse (--lonky-flyout-top) porque el sidebar scrollea. */
.is-collapsed .lonky-nav-caret,
.is-collapsed .lonky-nav-badge { display: none; }
/* En el flyout sí hay lugar para el badge: se recupera. */
.is-collapsed .lonky-submenu .lonky-nav-badge { display: inline-block; }
.is-collapsed .lonky-nav-parent { width: auto; }

.is-collapsed .lonky-submenu {
    display: none; position: fixed;
    left: 77px; top: var(--lonky-flyout-top, 0);
    min-width: 208px; padding: 8px 0;
    background: var(--lonky-surface, #fff);
    border: 1px solid var(--lonky-grey-100);
    border-radius: var(--lonky-radius-sm);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    z-index: 1050;
}
/* Se abre por hover y también por foco de teclado, para no dejar afuera al tab. */
.is-collapsed .lonky-nav-group:hover .lonky-submenu,
.is-collapsed .lonky-nav-group:focus-within .lonky-submenu { display: block; }

.is-collapsed .lonky-submenu-title {
    display: block; padding: 2px 16px 8px; margin-bottom: 4px;
    border-bottom: 1px solid var(--lonky-grey-100);
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--lonky-label);
}
/* Dentro del flyout los hijos vuelven a comportarse como ítems normales. */
.is-collapsed .lonky-submenu .lonky-nav-text { display: block; }
.is-collapsed .lonky-submenu .lonky-nav-item {
    justify-content: flex-start; padding: 7px 16px; margin: 1px 6px;
}
.is-collapsed .lonky-submenu .lonky-nav-child::before { display: none; }

/* ---- Main + Topbar ---- */
.lonky-main { margin-left: 239px; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .18s ease; }
.is-collapsed .lonky-main { margin-left: 77px; }

.lonky-topbar {
    height: 70px; position: sticky; top: 0; z-index: 1020;
    background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .08);
    display: flex; align-items: center; gap: 12px; padding: 0 24px;
}
.lonky-page-title { font-family: var(--lonky-font-title); font-size: 18px; font-weight: 500; margin: 0; color: var(--lonky-text); }
.lonky-burger { background: none; border: none; font-size: 22px; color: var(--lonky-grey-600); }

.lonky-topbar-user { margin-left: auto; position: relative; }
.lonky-user-btn {
    display: flex; align-items: center; gap: 8px; background: none; border: none;
    color: var(--lonky-text); font-family: var(--lonky-font-title); font-weight: 500; cursor: pointer;
}
.lonky-avatar {
    width: 36px; height: 36px; border-radius: 999px; background: var(--lonky-blue-500); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0;
}
.lonky-user-btn .bi-chevron-down { font-size: 14px; color: var(--lonky-grey-400); }
.lonky-user-menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; z-index: 1040;
    background: #fff; border: 1px solid var(--lonky-grey-200); border-radius: var(--lonky-radius);
    box-shadow: 0 8px 24px rgba(29, 34, 43, .12); padding: 6px; overflow: hidden;
}
.lonky-user-email { padding: 8px 12px; font-size: 12px; color: var(--lonky-grey-400); border-bottom: 1px solid var(--lonky-grey-100); margin-bottom: 4px; }
.lonky-user-menu-item {
    display: flex; align-items: center; width: 100%; padding: 8px 12px; border: none; background: none;
    border-radius: var(--lonky-radius-sm); color: var(--lonky-text); font-size: 14px; cursor: pointer;
}
.lonky-user-menu-item:hover { background: var(--lonky-hover-bg); }

/* ---- Contenido ---- */
.lonky-content { flex: 1 1 auto; padding: 24px; }

/* ---- Overlay móvil ---- */
.lonky-overlay { display: none; }

/* ---- Responsive: sidebar off-canvas en < lg ---- */
@media (max-width: 991.98px) {
    .lonky-sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 239px; }
    .mobile-open .lonky-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
    .lonky-main { margin-left: 0 !important; }
    .lonky-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1029; }
    .mobile-open .lonky-overlay { display: block; }
    /* en móvil no colapsamos, mostramos full */
    .is-collapsed .lonky-nav-text, .is-collapsed .lonky-brand-text, .is-collapsed .lonky-version { display: revert; }
    .is-collapsed .lonky-nav-item { justify-content: flex-start; padding: 8px 14px; }
}

/* ============================================================================
   Layout POS fullscreen (modo inmersivo, sin sidebar)
   ============================================================================ */
/* touch-action: manipulation desactiva el doble-tap-para-zoom de iOS (molesto al tocar
   rápido el +/- de los steppers) SIN romper el pinch-zoom de accesibilidad. */
.lonky-pos-body { background: var(--lonky-bg); touch-action: manipulation; }
.lonky-pos-wrap { padding: 12px 16px; min-height: 100vh; }
.lonky-pos-flash { position: fixed; top: 12px; right: 12px; z-index: 1080; max-width: 360px; }

/* ============================================================================
   Accesibilidad + gaps del DS (Fase 5 — hallazgos de la auditoría UX/UI)
   ============================================================================ */
/* Foco de teclado visible en todos los interactivos del shell y del POS */
.lonky-nav-item:focus-visible, .lonky-collapse-btn:focus-visible, .lonky-burger:focus-visible,
.lonky-user-btn:focus-visible, .lonky-user-menu-item:focus-visible, .lonky-brand:focus-visible,
.lonky-tab:focus-visible, .pos-card:focus-visible, .pos-btn:focus-visible, .pos-btn-pay:focus-visible,
.pos-line-edit:focus-visible, .pos-line-del:focus-visible {
    outline: none; box-shadow: var(--lonky-focus-ring); border-radius: var(--lonky-radius-sm);
}
/* Addons de input-group ($ , unidades) tematizados */
.input-group-text {
    background: var(--lonky-sand); border-color: var(--lonky-border); color: var(--lonky-text-muted);
    border-radius: var(--lonky-radius-input);
}
/* Textarea del DS: alto propio y texto arriba */
textarea.form-control { min-height: 74px; padding: 8px 12px; }
/* Paginación de Bootstrap 5 tematizada al DS (activo lavanda, radius 4, foco anillo) */
.pagination {
    --bs-pagination-color: #61708C; --bs-pagination-hover-color: #323CE9;
    --bs-pagination-hover-bg: #F0F3F9; --bs-pagination-focus-box-shadow: var(--lonky-focus-ring);
    --bs-pagination-active-bg: #F3F4FF; --bs-pagination-active-color: #323CE9;
    --bs-pagination-active-border-color: #D8DFE9; --bs-pagination-border-color: #D8DFE9;
    --bs-pagination-border-radius: var(--lonky-radius-input); gap: 4px;
}
/* Respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ============================================================================
   Cards y líneas de producto — compartidas
   ----------------------------------------------------------------------------
   Nacieron en el POS y las reusa el selector de productos de las transferencias
   de stock (mismo gesto: elegir de una grilla visual y ver lo elegido al costado).
   Viven acá y no en un @push del POS justamente para poder reusarlas.
   ============================================================================ */

/* Stepper de cantidad */
.qty-stepper .btn { background-color: #323CE9; border-color: #323CE9; color: #fff; }
.qty-stepper .btn:hover { background-color: #2830BA; border-color: #2830BA; }
.qty-stepper .form-control { border-color: #323CE9; font-weight: 600; }
/* Las flechitas nativas del input number se comen el ancho del stepper y tapan el número
   (con 112px de caja quedaba un dígito ilegible). Los botones +/- ya cumplen esa función. */
.qty-stepper input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.qty-stepper input[type=number]::-webkit-outer-spin-button,
.qty-stepper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Cards de producto: imagen grande + barra de nombre/precio abajo */
.pos-card {
    position: relative; border: 2px solid #D8DFE9; border-radius: 6px;
    overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1; background: #F0F3F9;
    transition: border-color .12s, box-shadow .12s;
}
.pos-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.pos-card.in-cart { border-color: #323CE9; box-shadow: 0 0 0 2px rgba(22,163,163,.25); }
.pos-card-disabled { opacity: .55; cursor: not-allowed; }
.pos-card-disabled:hover { box-shadow: none; }
.pos-card-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.pos-card-noimg { display: flex; align-items: center; justify-content: center; color: #B1BACA; font-size: 2rem; }
.pos-card-badge {
    position: absolute; top: 6px; right: 6px; background: #323CE9; color: #fff;
    font-size: .68rem; padding: 1px 7px; border-radius: 10px;
}
.pos-card-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.6); color: #fff; padding: 5px 8px;
    display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.pos-card-name { font-size: .78rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-card-price { font-size: .82rem; font-weight: 700; white-space: nowrap; }

/* Líneas de lo elegido (carrito del POS / transferencia) */
.pos-line { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #EAEFF6; }
.pos-line-del { border: none; background: none; color: #8A96AD; font-size: 1.1rem; line-height: 1; padding: 0 2px; }
.pos-line-del:hover { color: #DD3838; }
.pos-line-img { width: 46px; height: 46px; border-radius: 4px; background-size: cover; background-position: center; flex-shrink: 0; }
.pos-line-noimg { display: flex; align-items: center; justify-content: center; background: #F0F3F9; color: #B1BACA; }
.pos-line-info { flex: 1 1 auto; min-width: 0; }
.pos-line-name { font-size: .85rem; font-weight: 600; line-height: 1.15; }
.pos-line-discount { color: #DD3838; }
.pos-line-edit { border: none; background: none; color: #8A96AD; padding: 0 4px; flex-shrink: 0; }
.pos-line-edit:hover { color: #323CE9; }
.pos-line-unit { width: 90px; text-align: right; font-size: .78rem; color: #61708C; flex-shrink: 0; }
.pos-line-total { width: 96px; text-align: right; font-size: .9rem; font-weight: 700; flex-shrink: 0; }

/* Línea en mobile (<lg): 2 filas para que el nombre respire (en desktop la columna es ancha
   y entra todo en una fila; en 360px se comprimía letra por letra). */
@media (max-width: 991.98px) {
    .pos-line {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) auto auto;
        grid-template-areas:
            "img  info  edit  del"
            "img  qty   unit  total";
        column-gap: 8px;
        row-gap: 8px;
        align-items: center;
        padding: 12px 10px;
    }
    .pos-line-img   { grid-area: img; align-self: start; width: 52px; height: 52px; }
    .pos-line-info  { grid-area: info; min-width: 0; }
    .pos-line-name  { white-space: normal; font-size: .95rem; line-height: 1.25; }
    .pos-line-edit  { grid-area: edit; align-self: start; justify-self: end; }
    .pos-line-del   { grid-area: del; align-self: start; justify-self: end; font-size: 1.35rem; }
    .qty-stepper    { grid-area: qty; justify-self: start; width: 112px !important; }
    .pos-line-unit  { grid-area: unit; width: auto; text-align: right; align-self: center; }
    .pos-line-total { grid-area: total; width: auto; text-align: right; align-self: center; }
}

/* Selector de productos de las transferencias: dos paneles con scroll propio, mismo gesto
   que el POS pero dentro del panel (que sí scrollea) → alto acotado en vez de pantalla completa.
   El min-height:0 va SIEMPRE (no dentro de un media query): sin él, el contenido ignora la
   altura del panel y se derrama por debajo de la card — el mismo bug de flexbox del POS. */
.lonky-picker-panel > .card,
.lonky-picker-panel .card-body,
.lonky-picker-panel .overflow-auto { min-height: 0; }
.lonky-picker-panel > .card { overflow: hidden; }

@media (min-width: 992px) {
    .lonky-picker-panel { height: clamp(360px, calc(100vh - 420px), 620px); }
}
@media (max-width: 991.98px) {
    /* En mobile los paneles van uno abajo del otro. max-height (y no height) para que el
       tope acote la lista larga de productos sin dejar un panel vacío ocupando media
       pantalla de aire cuando todavía no elegiste nada. */
    .lonky-picker-panel { max-height: 60vh; }
}

/* ===================== POS responsive (Tanda 1) ===================== */

/* Modales del POS: caja centrada en desktop (ancho por --pos-modal-max), fullscreen en <lg. */
.lonky-pos-modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.lonky-pos-modal {
    width: 100%;
    max-width: var(--pos-modal-max, 480px);
    max-height: 90vh;
    overflow: auto;
}
@media (max-width: 991.98px) {
    .lonky-pos-modal-dialog {
        align-items: stretch;
        /* 100dvh = altura REAL visible en iOS (100vh incluye la barra de Safari → footer cortado). */
        height: 100vh;
        height: 100dvh;
    }
    .lonky-pos-modal {
        max-width: none;
        /* 100% (del dialog, que es inset:0 = viewport exacto), NO 100vw: en iOS 100vw sobresale
           del viewport visual y provoca scroll horizontal de toda la página. */
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        /* Card como columna: el body scrollea y el header/footer quedan fijos → los botones de
           acción (Agregar/Cancelar/Cobrar) siempre visibles, con contenido corto o largo. */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    /* Solo scroll vertical en el cuerpo (evita el scroll horizontal del modal de variantes). */
    .lonky-pos-modal > .card-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; }
    .lonky-pos-modal > .card-header,
    .lonky-pos-modal > .card-footer { flex: 0 0 auto; }
    /* El título largo del header no debe empujar el ancho ni tapar la X: cede y envuelve. */
    .lonky-pos-modal > .card-header { gap: 8px; }
    .lonky-pos-modal > .card-header > span { min-width: 0; overflow-wrap: anywhere; }
}

/* Barra de total fija (mobile): pegada abajo, total siempre visible + Cobrar. */
.lonky-pos-cartbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1020;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}
.lonky-pos-cartbar-summary {
    flex: 1 1 auto;
    display: flex; align-items: center; gap: 8px;
    min-height: 44px;
    border: 0; background: transparent; text-align: left;
}
.lonky-pos-cartbar-pay { min-height: 44px; padding-inline: 20px; font-weight: 600; }

.lonky-pos-cart-head { padding: 8px 8px 0; }

/* Carrito en mobile como "página completa": NO usa position:fixed (dio problemas de anclaje al
   viewport en iOS — se seguía viendo el catálogo detrás). En su lugar, cuando showCart=true se
   ocultan la topbar y el catálogo con .lonky-hide-when-cart y el carrito queda como ÚNICO
   contenido visible → ocupa toda la pantalla. Simple y a prueba de balas. */
@media (max-width: 991.98px) {
    /* display:none !important para ganarle al d-flex !important de Bootstrap. */
    .lonky-hide-when-cart { display: none !important; }
    /* iOS hace auto-zoom al enfocar un input/select con font-size < 16px: lo forzamos a 16px. */
    .lonky-pos-body input,
    .lonky-pos-body select,
    .lonky-pos-body textarea { font-size: 16px; }
    /* Aire abajo para que la barra de total fija no tape el final del catálogo. */
    .lonky-pos-wrap { padding-bottom: 76px; }
}

/* Layout de venta: alto fijo solo en desktop; fluido en mobile (una columna, scroll natural).
   En desktop la PÁGINA no scrollea: el scroll vive dentro de cada panel (catálogo y carrito),
   así los botones de cobro quedan siempre a la vista sin bajar hasta el fondo.
   El :has() acota todo esto al modo venta — el modo apertura de caja sigue con scroll natural. */
@media (min-width: 992px) {
    .lonky-pos-wrap:has(.lonky-pos-layout) {
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    /* El div del modo venta envuelve topbar + layout: tiene que pasar el alto hacia abajo. */
    .lonky-pos-screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    /* El layout se queda con el alto que sobra debajo de la topbar. Antes era un
       calc(100vh - 135px): el número mágico no sobrevivía a que la topbar wrapeara.
       flex-wrap:nowrap es imprescindible: .row de Bootstrap envuelve, y una línea envuelta
       toma el alto de su ítem más alto en vez del alto del contenedor — con wrap las dos
       columnas seguían creciendo con su contenido aunque el layout ya estuviera acotado. */
    .lonky-pos-layout { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap; }
    /* min-height:0 en CADA eslabón de la cadena flex. Sin esto un flex item toma su
       min-height:auto (= el alto de su contenido), crece sin límite y el overflow-auto de
       adentro nunca llega a activarse: ese era el bug del catálogo derramándose sobre la
       página y empujando los botones de cobro a 2000px de scroll. */
    .lonky-pos-layout > [class*="col-"],
    .lonky-pos-layout .card,
    .lonky-pos-layout .card-body,
    .lonky-pos-layout .overflow-auto { min-height: 0; }
}

/* Filtros del catálogo: selects con ancho cómodo en desktop, colapsables en mobile. */
.lonky-pos-filter-select { min-width: 150px; }
@media (max-width: 991.98px) {
    .lonky-pos-filters { display: none; }
    .lonky-pos-filters.is-open { display: block; }
    .lonky-pos-filter-select { min-width: 0; flex: 1 1 100%; }
}

/* Recargo o descuento de la línea de pago: el selector de tipo y el valor conviven en una
   fila SOLO si entran. El grupo de botones nunca se comprime —"Descuento" recortado a
   "Descuen…" es peor que una fila más— y el valor es el que cede y baja.
   Bug real (2026-08-15): con los dos en columnas fijas de Bootstrap, en una notebook el
   botón "Recargo" salía cortado al medio. */
.lonky-pay-adj { display: flex; flex-wrap: wrap; gap: .5rem; }
.lonky-pay-adj-kind { flex: 0 0 auto; }
.lonky-pay-adj-kind .btn { white-space: nowrap; }
/* Sin max-width: cuando el valor baja a su propia fila tiene que llenarla, para quedar
   alineado con el resto del panel (cantidad, "A cobrar", el botón de añadir y el teclado
   miden todos lo mismo). Un input a media fila se lee como un control suelto. */
.lonky-pay-adj-value { flex: 1 1 10rem; min-width: 9rem; }

/* Modal de pago (Dividir pago) en mobile: apilar y aprovechar el alto del modal fullscreen
   (antes: col-4/col-8 apretadas arriba y medio modal vacío abajo). */
@media (max-width: 991.98px) {
    .lonky-pay-body { flex: 1 1 auto; min-height: 0; flex-direction: column; flex-wrap: nowrap; }
    /* Resumen en fila compacta arriba, no apilado a un costado. Envuelve en varias filas:
       con recargos y descuentos por medio de pago pueden convivir hasta 6 conceptos, y
       apretados en una sola fila quedan ilegibles. */
    .lonky-pay-summary {
        flex: 0 0 auto; display: flex; flex-wrap: wrap;
        justify-content: center; gap: .25rem .9rem; text-align: center !important;
    }
    .lonky-pay-summary > div { margin-bottom: 0 !important; flex: 0 0 auto; min-width: 5.5rem; }
    /* El vuelto tiene un input: en fila con los demás queda impracticable, va a lo ancho. */
    .lonky-pay-summary > .lonky-pay-cash { flex: 1 1 100%; max-width: 16rem; }
    .lonky-pay-summary > .lonky-pay-total { flex: 1 1 100%; border-top: 1px solid var(--bs-border-color); padding-top: .35rem; }
    /* La columna principal ocupa el resto; el teclado crece y sus teclas son más altas/táctiles. */
    .lonky-pay-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .lonky-pay-keypad { flex: 1 1 auto; }
    .lonky-pay-keypad .btn { padding-top: .9rem; padding-bottom: .9rem; font-size: 1.2rem; }
}

/* ===================== Tablas responsive (Tanda 2) ===================== */

/* Desktop: fallback de scroll horizontal para tablas muy anchas. */
@media (min-width: 768px) {
    .lonky-rtable-wrap { overflow-x: auto; }
}

/* ===================== Grilla de tablas (todo el panel) =====================
   Las tablas se dividen en filas Y columnas, como una planilla: con solo líneas horizontales
   la vista "sigue de largo" y es fácil leer el número de la columna equivocada. Las líneas
   verticales son finas y en gris claro (no negras como un Excel) para sumar estructura sin
   ensuciar el diseño.

   Aplica a TODA tabla del panel. Escapes:
     .table-plain  → tabla sin grilla (layout, totales, casos donde las líneas estorban)
   En <768px no aplica: ahí las tablas del componente ya se vuelven cards y las verticales
   no tendrían sentido. Los mails y los PDF llevan su propio CSS y no pasan por acá. */
@media (min-width: 768px) {
    .table:not(.table-plain) {
        border: 1px solid var(--lonky-border);
        /* Sin este reset, el borde exterior queda tapado por el propio de Bootstrap. */
        border-collapse: separate;
        border-spacing: 0;
    }
    .table:not(.table-plain) > thead > tr > th {
        background: var(--lonky-grey-50);
        border-bottom: 2px solid var(--lonky-border);
        color: #61708C;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    /* La línea vertical va en cada celda menos la primera de la fila: así no se duplica
       con el borde exterior de la tabla. */
    .table:not(.table-plain) > * > tr > * + * { border-left: 1px solid var(--lonky-grey-100); }
    .table:not(.table-plain) > * > tr > * { padding: 12px 14px; }
    .table-sm:not(.table-plain) > * > tr > * { padding: 8px 10px; }
    /* Celda de números: fondo apenas distinto para que el ojo siga la columna hacia abajo. */
    .table .rt-num { background: var(--lonky-grey-25); font-variant-numeric: tabular-nums; }
    /* El pie (totales) se despega del cuerpo. */
    .table:not(.table-plain) > tfoot > tr > * { border-top: 2px solid var(--lonky-border); background: var(--lonky-grey-25); }
}

/* ===================== Recuadros de cifras (stat boxes) ===================== */

/* Cuatro números en fila se leen como un renglón corrido si no tienen caja propia. Cada cifra
   va encuadrada, con la etiqueta arriba y el número grande abajo: se lee de un vistazo sin
   saber usar sistemas. Grid y no columnas de Bootstrap para que todas queden del mismo alto. */
.lonky-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
@media (max-width: 575.98px) {
    /* En el teléfono, 2×2: apiladas de a una ocupaban media pantalla y había que scrollear
       para ver si faltó algo, que es justamente el dato que se busca al entrar. */
    .lonky-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .lonky-stat { padding: 10px 12px; }
    .lonky-stat-value { font-size: 1.5rem; }
}
.lonky-stat {
    border: 1px solid var(--lonky-border);
    border-radius: var(--lonky-radius-input, 8px);
    background: #fff;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lonky-stat-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #61708C;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lonky-stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lonky-stat-hint { font-size: .78rem; color: #61708C; }
/* Estados: el color va en la caja entera, no solo en el número, para que se vea de lejos. */
.lonky-stat-ok      { border-color: #A7D8A0; background: #F2FAF1; }
.lonky-stat-ok      .lonky-stat-value { color: #3F7C33; }
.lonky-stat-danger  { border-color: #E9A5A5; background: #FDF3F3; }
.lonky-stat-danger  .lonky-stat-value { color: #C22F2F; }
.lonky-stat-pending { border-color: #EBCE9C; background: #FDF8EF; }
.lonky-stat-pending .lonky-stat-value { color: #9A6B18; }

/* Origen → destino: cada punto en su propia caja, con la flecha entre las dos. Antes era
   texto suelto y no se leía como "de acá va para allá". */
.lonky-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 12px;
}
.lonky-route-box {
    border: 1px solid var(--lonky-border);
    border-radius: var(--lonky-radius-input, 8px);
    background: var(--lonky-grey-25);
    padding: 14px 16px;
}
.lonky-route-arrow { display: flex; align-items: center; justify-content: center; color: #8A96AD; }
@media (max-width: 575.98px) {
    /* En pantalla angosta las cajas se apilan y la flecha pasa a apuntar hacia abajo. Rota
       solo la flecha: el camión de "en tránsito" girado 90° quedaba de trompa al piso. */
    .lonky-route { grid-template-columns: 1fr; }
    .lonky-route-arrow .bi-arrow-right { transform: rotate(90deg); }
}

/* Fila clickeable (ambos modos). */
.lonky-rtable tr[data-href] { cursor: pointer; }
@media (min-width: 768px) {
    .lonky-rtable tr[data-href]:hover { background: rgba(50, 60, 233, .04); }
}

/* Mobile: cada fila del tbody se vuelve una card con jerarquía. */
@media (max-width: 767.98px) {
    .lonky-rtable thead { display: none; }
    .lonky-rtable, .lonky-rtable tbody { display: block; width: 100%; }
    .lonky-rtable tr {
        display: block;
        position: relative;
        background: #fff;
        border: 1px solid #EAEFF6;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 12px 14px;
        touch-action: manipulation; /* sin double-tap-zoom en iOS */
    }
    .lonky-rtable td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: baseline;
        border: 0;
        padding: 3px 0;
        text-align: left !important;
    }
    /* Par etiqueta:valor por defecto (la etiqueta viene de data-label). */
    .lonky-rtable td::before {
        content: attr(data-label);
        color: #8A96AD;
        font-size: .8rem;
        font-weight: 500;
        flex-shrink: 0;
    }
    /* Rol: título de la card (grande, arriba, sin etiqueta; deja lugar al badge). */
    .lonky-rtable td.rt-title { display: block; font-size: 1.05rem; font-weight: 700; padding-right: 96px; }
    .lonky-rtable td.rt-title::before { content: none; }
    /* Rol: chip de estado, arriba a la derecha. */
    .lonky-rtable td.rt-badge { position: absolute; top: 12px; right: 12px; padding: 0; }
    .lonky-rtable td.rt-badge::before { content: none; }
    /* Rol: valor destacado (total), grande, con su etiqueta chica encima. */
    .lonky-rtable td.rt-emphasis { display: block; font-size: 1.25rem; font-weight: 700; color: #323CE9; }
    .lonky-rtable td.rt-emphasis::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 500; }
    /* Rol: columna que no aporta en mobile. */
    .lonky-rtable td.rt-hide-mobile { display: none; }
    /* Rol: fila de acciones abajo (sus botones NO disparan el link — ver el JS). */
    .lonky-rtable td.rt-actions {
        display: flex; justify-content: flex-end; gap: 8px;
        margin-top: 8px; padding-top: 8px; border-top: 1px solid #F0F3F9;
    }
    .lonky-rtable td.rt-actions::before { content: none; }
}

/* Encabezado de página: acciones full-width apiladas en mobile en vez de desbordar. */
@media (max-width: 767.98px) {
    .lonky-page-header { align-items: stretch; }
    .lonky-page-actions { width: 100%; }
    .lonky-page-actions > .btn,
    .lonky-page-actions > a,
    .lonky-page-actions > form { flex: 1 1 auto; }
}

/* ── Barra de trabajo del editor de producto ──────────────────────────────
   Navy de la marca para separarla de los campos blancos del form (no se
   confunde con el input Nombre que viene debajo). Ver x-product-form-header. */
.product-form-header {
    background: linear-gradient(100deg, var(--lonky-blue-800) 0%, var(--lonky-blue-900) 100%);
    color: #fff;
    box-shadow: 0 8px 20px -10px rgba(9, 12, 47, .5);
}
.product-form-header .pfh-chip {
    width: 2.5rem; height: 2.5rem;
    background: rgba(255, 255, 255, .12);
    color: #fff; font-size: 1.15rem;
}
.product-form-header .pfh-eyebrow {
    font-size: .68rem; letter-spacing: .09em;
    color: rgba(255, 255, 255, .62);
}
.product-form-header .pfh-title {
    font-size: 1.15rem; line-height: 1.25; color: #fff;
}
.product-form-header .pfh-save {
    background: #fff; color: var(--lonky-blue-800); border: none;
}
.product-form-header .pfh-save:hover {
    background: var(--lonky-blue-50); color: var(--lonky-blue-700);
}
.product-form-header .pfh-save:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .55);
}

/* Botón "volver al listado" dentro de la barra navy del editor de producto. */
.product-form-header .pfh-back {
    color: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
}
.product-form-header .pfh-back:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.product-form-header .pfh-back:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .45);
}

/* ─────────────────────────────────────────────────────────────────────────
   Ordenar arrastrando con el mouse.
   Lo comparten los valores de un atributo (S, M, L, XL) y el árbol de
   categorías: el orden ahí no es alfabético ni numérico, sólo lo sabe quien
   lo arma, así que se acomoda a mano.
   ───────────────────────────────────────────────────────────────────────── */
.lonky-drag-handle {
    cursor: grab;
    color: var(--lonky-gray-500, #6c757d);
    padding-left: .55rem;
    padding-right: .55rem;
    user-select: none;
}
.lonky-drag-handle:active { cursor: grabbing; }
.lonky-drag-handle:hover  { color: var(--lonky-blue-700, #0d47a1); }

/* La fila que se está arrastrando: se atenúa para que se vea de dónde salió. */
.lonky-drag-activo { opacity: .45; }

/* Fila del árbol de categorías mientras se arrastra algo encima. El borde dice
   qué va a pasar al soltar: arriba/abajo = hermana, recuadro = pasa a ser hija. */
tr.lonky-drop-antes  > td { box-shadow: inset 0 2px 0 0 var(--lonky-blue-600, #1565c0); }
tr.lonky-drop-despues > td { box-shadow: inset 0 -2px 0 0 var(--lonky-blue-600, #1565c0); }
tr.lonky-drop-dentro > td {
    background: var(--lonky-blue-50, #e3f2fd);
    box-shadow: inset 2px 0 0 0 var(--lonky-blue-600, #1565c0);
}

/* ============================================================
   NOVEDADES
   Tokens de docs/design-system/tokens.md. Ancho de lectura
   acotado a propósito: es texto para leer, no una tabla.
   ============================================================ */

.lonky-news { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; }

/* El número de versión NO es el protagonista: lo primero que se lee
   es qué cambió. Por eso va chico y en gris de metadata. */
.lonky-news-meta {
    font-size: 10px; line-height: 13px; font-weight: 500;
    color: var(--lonky-grey-400); letter-spacing: .02em;
}
.lonky-news-title {
    font-family: var(--lonky-font-title);
    font-size: 17px; line-height: 22px; font-weight: 600;
    color: var(--lonky-text); margin: 2px 0 12px;
}

.lonky-news-item {
    position: relative; padding: 0 0 28px 24px;
    border-left: 1px solid var(--lonky-grey-100);
}
.lonky-news-item:last-child { border-left-color: transparent; }
.lonky-news-item::before {
    content: ''; position: absolute; left: -5px; top: 4px;
    width: 9px; height: 9px; border-radius: 999px;
    background: var(--lonky-white);
    border: 2px solid var(--lonky-grey-200);
}
.lonky-news-item.is-unread::before {
    background: var(--lonky-blue-500);
    border-color: var(--lonky-blue-500);
}

.lonky-news-entry-body { font-size: 12px; line-height: 15px; color: var(--lonky-grey-500); }

.lonky-news-video { width: 100%; border-radius: 12px; display: block; margin: 12px 0; background: #000; }

/* Chips: pill gris igual en todos + punto de color, como el resto
   de los badges del sistema. */
.lonky-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--lonky-sand); border-radius: 999px;
    padding: 4px 8px; font-size: 12px; font-weight: 500;
    color: var(--lonky-text); white-space: nowrap;
}
.lonky-chip-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--lonky-grey-300); }
.lonky-chip-new .lonky-chip-dot { background: #323CE9; }
.lonky-chip-improvement .lonky-chip-dot { background: #00A3FF; }
.lonky-chip-fix .lonky-chip-dot { background: #32B5AC; }

/* Punto del sidebar. Un solo "pop" al aparecer: un punto que late
   para siempre es ansiedad, no información. */
.lonky-nav-dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--lonky-blue-500); margin-left: auto;
    animation: lonky-dot-pop .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes lonky-dot-pop { from { transform: scale(0); } to { transform: scale(1); } }

.lonky-news-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--lonky-blue-50);
    color: var(--lonky-blue-500);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 16px;
    font-size: 13px; animation: lonky-banner-in .24s cubic-bezier(.2, .8, .2, 1);
}
.lonky-news-banner a { color: inherit; font-weight: 600; }
.lonky-news-entry-area {
    font-size: 10px; line-height: 13px; font-weight: 500; text-transform: uppercase;
    letter-spacing: .04em; color: var(--lonky-grey-400);
}
.lonky-news-entry-more {
    background: none; border: 0; padding: 4px 0;
    font-size: 12px; font-weight: 500; color: var(--lonky-blue-500);
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
}
.lonky-news-entry-more:hover { text-decoration: underline; }

/* El outline del navegador dibujaba un recuadro cuadrado sobre el link, que en un
   botón sin fondo se lee como un borde de más. Se reemplaza por el anillo del design
   system, y sólo con :focus-visible: al hacer click con el mouse no queda marcado. */
.lonky-news-entry-more:focus { outline: none; }
.lonky-news-entry-more:focus-visible {
    outline: none; border-radius: 4px;
    box-shadow: 0 0 0 2px var(--lonky-blue-100, #D5D8FA);
}

.lonky-news-empty {
    text-align: center; padding: 48px 16px; color: var(--lonky-grey-400);
}
.lonky-news-empty i { font-size: 28px; display: block; margin-bottom: 10px; }
.lonky-news-empty p { font-size: 13px; margin: 0; }

/* ---- Modal de versión destacada ---- */
.lonky-highlight-backdrop {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(29, 34, 43, .45);
}
.lonky-highlight-panel {
    position: relative; width: 100%; max-width: 520px;
    max-height: 90vh; overflow-y: auto;
    background: var(--lonky-white); border-radius: 12px; padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.lonky-highlight-close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: 0; color: var(--lonky-grey-400); line-height: 1;
}
.lonky-highlight-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.lonky-news-banner-close { margin-left: auto; background: none; border: 0; color: inherit; line-height: 1; }
@keyframes lonky-banner-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.lonky-news-item { animation: lonky-news-in .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lonky-news-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Destacadas: la pieza contada en grande (tanda 1 del rediseño) ----
   Media arriba del título a propósito: la captura dice de qué se trata antes
   de leer una palabra (mismo criterio que Intercom/Notion). Sin placeholder
   cuando no hay imagen: el título ocupa ese lugar y el bloque respira igual. */
.lonky-news-featured + .lonky-news-featured { margin-top: 32px; }

.lonky-news-featured-image {
    width: 100%; border-radius: 12px; display: block;
    margin: 0 0 12px; background: var(--lonky-grey-100);
}
.lonky-news-featured-duration {
    font-size: 10px; line-height: 13px; font-weight: 500;
    color: var(--lonky-grey-400); margin: -6px 0 12px;
}
.lonky-news-featured-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lonky-news-featured-title {
    font-family: var(--lonky-font-title);
    font-size: 17px; line-height: 22px; font-weight: 600;
    color: var(--lonky-text); margin: 0 0 8px;
}
.lonky-news-featured-body {
    font-size: 13px; line-height: 18px; font-weight: 400;
    color: var(--lonky-grey-500); margin: 0 0 8px;
}
.lonky-news-featured-body:last-child { margin-bottom: 0; }

/* ---- Lista compacta: una línea por ítem, sin píldora — el peso visual
   tiene que bajar acá (spec de la tanda 1). Mismo lenguaje de colores que
   los chips, sólo que el punto ya no vive dentro de una pill. ---- */
.lonky-news-compact-divider {
    display: flex; align-items: center; gap: 10px;
    font-size: 10px; line-height: 13px; font-weight: 500;
    color: var(--lonky-grey-400); text-transform: uppercase; letter-spacing: .04em;
    margin: 20px 0 8px;
}
.lonky-news-compact-divider::before,
.lonky-news-compact-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--lonky-grey-100); }

.lonky-news-compact-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
/* Atenuada, NO oculta: si el vendedor escucha hablar de algo que no ve, la
   sección le miente; y un rol mal configurado falla suave (spec §7). */
.lonky-news-compact-item.is-muted { opacity: .55; }

.lonky-news-compact-dot {
    width: 6px; height: 6px; border-radius: 999px; flex: 0 0 auto; margin-top: 6px;
}
.lonky-news-compact-dot.is-new { background: #323CE9; }
.lonky-news-compact-dot.is-improvement { background: #00A3FF; }
.lonky-news-compact-dot.is-fix { background: #32B5AC; }

.lonky-news-compact-kind {
    font-size: 10px; line-height: 13px; font-weight: 500; text-transform: uppercase;
    letter-spacing: .04em; color: var(--lonky-grey-400); margin-right: 6px;
}
.lonky-news-compact-text {
    font-size: 13px; line-height: 18px; font-weight: 400; color: var(--lonky-grey-500);
}

@media (max-width: 767.98px) {
    .lonky-news { padding-inline: 4px; }
    .lonky-news-item { padding-left: 16px; }
}

/* Quien pidió menos movimiento no recibe ninguno. */
@media (prefers-reduced-motion: reduce) {
    .lonky-news-item, .lonky-news-banner, .lonky-nav-dot { animation: none; }
    .lonky-highlight-panel { transition: none; }
}