:root{
    /* ============================================================
       UX/1 — ALIASES DE COMPATIBILIDAD
       Los tokens del nuevo Design System se definen en
       css/design-system.css (cargado antes que base.css).
       Aquí SOLO se mapean las variables históricas -> nuevos tokens,
       para que los estilos existentes aún en proceso de migración
       sigan funcionando sin romper ninguna referencia.
       ============================================================ */

    /* viejos -> nuevos (paleta cálida clara) */
    --ink: var(--color-surface);
    color-scheme: light;
    accent-color: var(--color-primary);
    --graphite: var(--color-bg);
    --graphite-light: var(--color-bg-secondary);
    --graphite-hover: var(--color-border);
    --felt: var(--color-success);
    --felt-light: var(--color-success-light);
    --maroon: var(--color-error);
    --maroon-light: var(--color-error);
    --led: var(--color-warning);
    --paper: var(--color-surface);
    --paper-line: var(--color-border);
    --paper-ink: var(--color-text-primary);
    --paper-fade: var(--color-text-muted);
    --yape: var(--color-yape);
    --yape-light: var(--color-purple);
    --fiado: var(--color-warning);
    --fiado-light: var(--color-warning);
    --coral: var(--color-primary);
    --coral-light: var(--color-primary-light);
    --coral-bg: rgba(186,146,56,0.08);
    --coral-sidebar: rgba(186,146,56,0.06);
    --coral-hover: rgba(186,146,56,0.12);
    --warm-card: var(--color-surface);
    --warm-ticket: var(--color-surface);
    --overlay-rgba: rgba(45,42,38,0.50);
    --shadow-glow-blue: var(--shadow-glow-primary);
    --shadow-glow-green: var(--shadow-glow-success);

    /* semantic compat (mantenidos para no romper consumidores) */
    --color-text: var(--color-text-primary);
    --color-electric-blue: var(--color-primary);
    --color-electric-blue-light: var(--color-primary-light);
    --color-electric-blue-dark: var(--color-primary-dark);
    --color-purple: var(--color-yape);
    --color-purple-light: var(--color-yape);
    --color-purple-dark: var(--color-yape);
    --color-neon-green: var(--color-success);
    --color-neon-green-dim: var(--color-success-dim);
    --color-neon-green-glow: var(--color-success-glow);
    --color-success-green: var(--color-success);
    --color-success-green-light: var(--color-success-light);
    --color-success-green-dim: var(--color-success-dim);
    --color-success-green-glow: var(--color-success-glow);

    /* ---------- iconos SVG (utility) ---------- */
    --icon-size:18px;
  }
  *{box-sizing:border-box;}
  button, a, input, select, textarea{ touch-action:manipulation; }
  *{ -webkit-tap-highlight-color:transparent; }
  :focus-visible{
    outline:none;
    box-shadow:var(--ring-focus);
    border-radius:var(--radius-sm);
  }
  [hidden]{ display:none !important; }

  /* ---------- iconos SVG (sprites en index.html) ---------- */
  .icon{
    width:1em; height:1em; flex:none;
    display:inline-block; vertical-align:-0.125em;
    fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .icon-lg{ font-size:22px; }
  .icon-md{ font-size:18px; }
  .icon-sm{ font-size:14px; }
  body{
    margin:0;
    font-family:var(--font-ui);
    background:var(--color-bg);
    color:var(--color-text-primary);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:32px 16px;
  }
  .pos{
    width:100%; max-width:1440px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    padding:var(--space-6) var(--space-6) var(--space-8);
    box-shadow:var(--shadow-lg);
    display:flex; flex-direction:column; flex:1;
  }
  @media (max-width:640px){
    body{ padding:12px 8px; }
    .pos{ border-radius:var(--radius-lg); padding:14px 12px 20px; }
  }
  @supports (padding: max(0px)){
    body{
      padding-left:max(16px, env(safe-area-inset-left));
      padding-right:max(16px, env(safe-area-inset-right));
    }
    @media (max-width:640px){
      body{
        padding-left:max(8px, env(safe-area-inset-left));
        padding-right:max(8px, env(safe-area-inset-right));
      }
    }
  }
  /* ---------- PANEL: base contenedora (reutilizada por dash/history/brand-panel) ---------- */
  .panel, .dash-panel, .history-panel, .brand-panel{
    background:var(--color-surface);
    border-radius:var(--radius-lg);
    padding:var(--space-5) var(--space-6);
    box-shadow:var(--shadow-md);
    border:1px solid var(--color-border);
  }
  /* ---------- FIELD-LABEL: micro-etiqueta mono mayúsculas (base de campos) ---------- */
  .field-label,
  .modal-box .field label,
  .brand-field label,
  .fiado-fields label,
  .customer-phone-field label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.06em;
    color:var(--color-text-muted);
    text-transform:uppercase;
  }
  /* ---------- CONTROL: receta base de campo de entrada/select (reutilizable) ----------
     Definida como referencias para código nuevo; las variantes existentes mantienen
     su propio estilo (bg/radius/font-size difieren y no se fuerzan). */
  .control{
    border:1px solid var(--color-border);
    background:var(--color-surface-hover);
    color:var(--color-text-primary);
    outline:none;
    font-family:var(--font-ui);
    border-radius:var(--radius-sm);
    transition:border-color var(--transition-normal), box-shadow var(--transition-normal);
  }
  .control:focus{
    border-color:var(--color-electric-blue);
    box-shadow:var(--ring-focus);
  }
  /* ---------- BUTTON-BASE: receta mínima de botón (reutilizable) ----------
     No se fuerza sobre las variantes existentes (.key, .pay-tab, .nav-btn, etc.)
     por ser heterogéneas; se define como base para uso futuro y C3. */
  .button-base{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:none;
    cursor:pointer;
    font-family:var(--font-mono);
    font-weight:700;
    min-height:var(--control-h-md);
    border-radius:var(--radius-md);
    transition:transform 0.05s ease, filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  /* ---------- BADGE-BASE: micro-etiqueta mono (receta reutilizable) ----------
     No se fuerza sobre variantes existentes (.chip-stock, .pend-badge, .imp-badge,
     .admin-client-status, .fiado-overdue-badge) por diferir en radius/padding/display. */
  .badge-base{
    display:inline-block;
    white-space:nowrap;
    font-family:var(--font-mono);
    font-size:10px;
    line-height:1;
  }
  /* ---------- OVERLAY: base geométrica reutilizable para futuros overlays ----------
     Solo propiedades estructurales comunes. NO se aplica todavía a .modal-overlay ni
     .lock-overlay (preservar contrato visible actual, sus bg/z-index/display propios). */
  .overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .pos-header{
    display:flex; justify-content:space-between; align-items:center;
    margin:0 0 6px 4px; flex-wrap:wrap; gap:var(--space-2);
    background:var(--color-surface);
    border-bottom:1px solid var(--color-border);
  }
  .pos-title{
    font-family:var(--font-mono); font-weight:700; font-size:13px;
    letter-spacing:0.18em; text-transform:uppercase; color:var(--color-text-primary); margin:0;
  }
  .header-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
  .history-btn{
    background:var(--color-surface); color:var(--color-text-primary); border:1px solid var(--color-border);
    border-radius:var(--radius-pill); padding:6px 14px; font-family:var(--font-mono);
    font-size:11px; letter-spacing:0.08em; cursor:pointer; max-width:220px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    min-height:38px; display:inline-flex; align-items:center; gap:6px;
    transition: border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
  }
  .history-btn:hover{ border-color:var(--color-electric-blue); background:var(--color-surface-hover); }
  .history-btn:disabled{ opacity:0.45; cursor:not-allowed; }
  .history-btn.active{ background:var(--color-success); border-color:var(--color-success); color:#000; }
  .history-btn.fiados-btn.active{ background:var(--color-warning); border-color:var(--color-warning); color:#000; }
  .storage-warning{
    font-family:var(--font-mono); font-size:var(--font-xs); color:var(--color-error);
    margin:0 0 var(--space-4) var(--space-2);
    display:flex; align-items:center; gap:var(--space-2);
    padding:var(--space-2) var(--space-3);
    background:var(--color-error-bg);
    border:1px solid var(--color-error-border);
    border-radius:var(--radius-sm);
  }
    .page-nav{
      display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:16px;
      border-bottom:1px solid var(--color-border); padding-bottom:12px;
    }
  .nav-btn{
    background:var(--color-surface); color:var(--color-text-primary); border:1px solid var(--color-border);
    border-radius:var(--radius-pill); padding:8px 16px; font-family:var(--font-mono);
    font-size:12px; letter-spacing:0.06em; cursor:pointer;
    min-height:40px; display:inline-flex; align-items:center; gap:6px;
    transition: border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
  }
  .nav-btn:hover{ border-color:var(--color-electric-blue); background:var(--color-surface-hover); }
  .nav-btn:disabled{ opacity:0.45; cursor:not-allowed; }
  .nav-btn.active{ background:var(--color-text-primary); color:var(--color-bg); border-color:var(--color-text-primary); }

  /* ---------- Toast Types ---------- */
  .toast-success{
    background: var(--color-success-bg);
    color: var(--color-success-green);
    border-color: var(--color-success-border);
  }
  .toast-warning{
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning-border);
  }
  .toast-error{
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error-border);
  }
  .toast-info{
    background: var(--color-info-bg);
    color: var(--color-info);
    border-color: var(--color-info-border);
  }

  @media (max-width:980px){
    .page-nav{
      position:fixed; left:0; right:0; bottom:0; z-index:30;
      display:flex; flex-wrap:nowrap; gap:0;
      background:var(--color-surface);
      border-top:1px solid var(--color-border); border-bottom:none;
      margin-bottom:0;
      padding:6px 4px max(6px, env(safe-area-inset-bottom));
      box-shadow:0 -6px 14px rgba(0,0,0,0.30);
    }
    .page-nav .nav-btn{
      flex:1; min-width:0; min-height:var(--control-h-lg);
      display:flex; align-items:center; justify-content:center;
      background:none; border:none; border-radius:0;
      padding:4px 2px;
      font-size:10.5px; line-height:1.25; letter-spacing:0.04em;
      white-space:normal; position:relative;
    }
    .page-nav .nav-btn.active{
      background:var(--color-bg-secondary); color:var(--color-text-primary); border-color:transparent;
    }
    #historyCount, #fiadosCount{
      position:absolute; top:2px; right:2px;
      font-size:9px; line-height:1; padding:2px 5px; border-radius:8px;
      color:var(--paper); font-weight:700;
    }
    #historyCount{ background:var(--color-success); }
    #fiadosCount{ background:var(--color-warning); }
    .page, .receipt{ scroll-margin-bottom:88px; }
    .page, .receipt{ scroll-margin-bottom:calc(84px + env(safe-area-inset-bottom)); }
    .pos{ padding-bottom:88px; }
    .pos{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
    .toast{ bottom:66px; }
    .toast{ bottom:calc(66px + env(safe-area-inset-bottom)); }
  }
  @media (max-width:640px){
    .catalog-label, .led-label, .brand-hint, .history-meta, .fiado-move-info,
    .dash-card-label, .fiado-chevron, .dash-period-btn, .dash-section-title{ font-size:11.5px; }
    .history-btn, .key-small{ font-size:12px; }
    .nav-btn{ font-size:13px; }
  }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      transition:none !important;
      animation:none !important;
      scroll-behavior:auto !important;
    }
  }
  /* En pantallas táctiles, anula los estados :hover que quedan "pegados"
     tras un toque. Va con !important para vencer reglas de otros CSS. */
  @media (hover:none){
    .key:hover, .key-small:hover, .key-checkout:hover, .key-whatsapp:hover,
    .history-btn:hover, .nav-btn:hover, .scan-btn:hover, .link-btn:hover,
    .category-chip:hover, .type-tab:hover, .pay-tab:hover, .dash-tab-btn:hover,
    .dash-period-btn:hover, .chip-add:hover{ background:none !important; filter:none !important; }
    .chip-edit:hover, .chip-restock:hover, .chip-del:hover{ background:none !important; color:var(--color-text-muted) !important; }
    .qty-btn:hover{ background:var(--color-surface) !important; border-color:var(--color-border) !important; }
    .line-del:hover{ color:var(--color-error) !important; }
  }
  .key:active, .key-small:active, .key-checkout:active, .key-whatsapp:active,
  .qty-btn:active, .chip-add:active, .chip-edit:active, .chip-restock:active,
  .chip-del:active, .history-btn:active, .nav-btn:active, .scan-btn:active,
  .link-btn:active, .category-chip:active, .type-tab:active, .pay-tab:active,
  .dash-tab-btn:active, .dash-period-btn:active{
    filter:brightness(0.92); transform:translateY(1px);
  }
  .toast{
    position:fixed; left:50%; bottom:var(--space-6); transform:translateX(-50%);
    background:var(--color-surface); color:var(--color-text-primary);
    border:1px solid var(--color-border);
    font-family:var(--font-ui); font-size:var(--font-sm); line-height:1.45; white-space:pre-line;
    padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); max-width:min(420px, calc(100vw - var(--space-6)));
    box-shadow:var(--shadow-lg); z-index:9999;
    text-align:center; pointer-events:none;
    animation:toast-in var(--transition-normal) ease-out;
  }
  @keyframes toast-in{
    from{ opacity:0; transform:translate(-50%, var(--space-4)); }
    to{ opacity:1; transform:translate(-50%, 0); }
  }
  .page{ }

  /* ============ F4: navegación principal (sidebar desktop / bottom nav móvil) ============ */
  .pos-app{ display:block; }

  /* ---------- Desktop: pantalla de trabajo + sidebar ---------- */
  @media (min-width:981px){
    body{ padding:0; }
    .pos{
      max-width:none; width:100%; height:100vh; min-height:100vh;
      border:none; border-radius:0; box-shadow:none; padding:0;
      display:grid;
      grid-template-columns:minmax(0,256px) minmax(0,1fr);
      grid-template-rows:auto auto minmax(0,auto) minmax(0,1fr);
    }
    .pos > .pos-header{
      grid-column:1 / -1; grid-row:1;
      margin:0; padding:12px 20px;
      background:var(--color-surface); border-bottom:1px solid var(--color-border);
    }
    .pos > .storage-warning{ grid-column:1 / -1; grid-row:2; margin:0; padding:8px 20px; }
    .pos > .brand-panel{ grid-column:1 / -1; grid-row:3; }
    .pos > .pos-app{
      grid-column:1 / -1; grid-row:4; min-height:0;
      display:grid; grid-template-columns:minmax(0,256px) minmax(0,1fr); grid-template-rows:minmax(0,1fr);
      overflow:hidden;
    }
    .pos-app > .page-nav{
      grid-column:1; grid-row:1; min-height:0; overflow-y:auto;
      display:flex; flex-direction:column;
      background:var(--color-bg-secondary); border-right:1px solid var(--color-border);
      border-bottom:none; margin-bottom:0; padding:0;
    }

    /* Sidebar brand/logo */
    .pos-app > .page-nav::before{
      content: '';
      display: block;
      height: 64px;
      background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
      border-bottom: 1px solid var(--color-border);
      margin: 0 -12px 12px;
      padding: 0 16px;
    }

    .pos-app > .page-nav .nav-btn{
      display:flex; align-items:center; gap:12px;
      width:100%; min-width:0;
      background:none; border:none; border-radius:var(--radius-md);
      padding:12px 16px;
      color:var(--color-text-secondary); font-family:var(--font-ui);
      font-size:13.5px; font-weight:600; letter-spacing:0.01em;
      text-align:left; cursor:pointer; position:relative;
      margin: 0 8px 4px;
      transition:background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
    }
    .pos-app > .page-nav .nav-btn:hover{
      background:var(--color-primary);
      color:#fff;
      padding-left: 20px;
    }
    .pos-app > .page-nav .nav-btn.active{
      background:var(--color-primary);
      color:#fff;
      box-shadow: var(--shadow-sm);
    }
    .pos-app > .page-nav .nav-btn.active::before{
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 24px;
      background: var(--color-primary);
      border-radius: 0 3px 3px 0;
    }
    .pos-app > .page-nav .nav-btn[data-page="caja"]:not(.active){
      background:rgba(186,146,56,0.08);
      color:var(--color-primary);
    }
    .pos-app > .page-nav .nav-btn[data-page="caja"]:not(.active):hover{
      background:rgba(186,146,56,0.12);
    }
    .pos-app > .page-nav .nav-btn .nav-icon{
      font-size:18px; line-height:1; flex-shrink:0;
      width: 24px; text-align: center;
    }
    .pos-app > .page-nav .nav-btn .nav-label{
      flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .pos-app > .page-nav .nav-count{
      flex-shrink:0; font-family:var(--font-mono); font-size:10px; font-weight:700;
      background:var(--color-surface); color:var(--color-text-primary);
      border-radius:9px; padding:2px 8px; min-width:22px; text-align:center;
      border:1px solid var(--color-border);
    }
    .pos-app > .page-nav .nav-btn.active .nav-count{
      background:rgba(255,255,255,0.25); color:#fff; border-color: transparent;
    }

    /* Sidebar footer with user info */
    .pos-app > .page-nav::after{
      content: '';
      display: block;
      margin-top: auto;
      padding: 16px 12px;
      border-top: 1px solid var(--color-border);
    }

    .nav-more-btn{ display:none; }

    .pos-app > .page{ grid-column:2; grid-row:1; min-height:0; overflow-y:auto; }
  }

  /* ---------- Móvil: bottom nav compacto + menú "Más" ---------- */
  @media (max-width:980px){
    .page-nav{
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
      padding: 8px 8px max(8px, env(safe-area-inset-bottom));
      gap: var(--space-2);
    }
    .page-nav .nav-btn{
      flex: 1; min-width: 0; min-height: var(--control-h-lg);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 4px;
      background: none; border: none; border-radius: var(--radius-md);
      padding: 8px 4px;
      font-family: var(--font-ui);
      font-size: 10.5px; line-height: 1.25; letter-spacing: 0.04em;
      color: var(--color-text-secondary);
      cursor: pointer;
      transition: background 0.12s ease, color 0.12s ease;
      white-space: normal;
    }
    .page-nav .nav-btn .nav-icon{
      font-size: 20px; line-height: 1;
    }
    .page-nav .nav-btn:hover{
      background: var(--color-surface-hover);
      color: var(--color-text-primary);
    }
    .page-nav .nav-btn.active{
      background: var(--color-primary);
      color: #fff;
    }
    .page-nav .nav-btn .nav-label{
      font-weight: 600;
    }
    .pos{ padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  }

  /* ---------- F4: impresión con la nueva estructura ---------- */
  @media print{
    .pos, .pos-app{ display:block !important; }
    .pos-app > .page{ overflow:visible; }
  }

  /* ---------- F5: foco visible accesible (teclado) ---------- */
  :where(button, [role="button"], input, select, textarea, [tabindex]):focus-visible{
    outline:none; box-shadow:var(--ring-focus);
  }