/* ============================================================================
   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); }

/* ---- 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; }

/* ---- 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; }
}

/* ===================== 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). */
@media (min-width: 992px) {
    .lonky-pos-layout { height: calc(100vh - 135px); }
}

/* 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%; }
}

/* 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 (Pagado/Balance/Cambio) en fila compacta arriba, no apilado a un costado. */
    .lonky-pay-summary { flex: 0 0 auto; display: flex; justify-content: space-around; text-align: center !important; }
    .lonky-pay-summary > div { margin-bottom: 0 !important; }
    /* 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; }
}