:root{
    --ink:#F5E8E2;
    --graphite:#332B28;
    --graphite-light:#F3E4DE;
    --felt:#269B68;
    --felt-light:#187A50;
    --maroon:#B34040;
    --maroon-light:#C95353;
    --led:#E8590C;
    --paper:#F8EEEA;
    --paper-line:#DFC8BE;
    --paper-ink:#332B28;
    --paper-fade:#746762;
    --yape:#8A05BE;
    --yape-light:#A82BE0;
    --fiado:#B06E16;
    --fiado-light:#C98A28;
    --coral:#D97868;
    --coral-light:#C76455;
    --coral-bg:rgba(217,120,104,0.12);
    --coral-sidebar:rgba(217,120,104,0.16);
    --coral-hover:rgba(217,120,104,0.20);
    --warm-card:#FBF2EE;
    --warm-ticket:#FBF2EE;
  }
  *{box-sizing:border-box;}
  button, a, input, select, textarea{ touch-action:manipulation; }
  *{ -webkit-tap-highlight-color:transparent; }
  :focus-visible{
    outline:2px solid var(--felt-light);
    outline-offset:2px;
    border-radius:4px;
  }
  [hidden]{ display:none !important; }
  body{
    margin:0;
    font-family:'Inter',system-ui,sans-serif;
    background:#F1E2DC;
    color:var(--paper-ink);
    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(--paper);
    border:1px solid var(--paper-line);
    border-radius:20px;
    padding:22px 22px 30px;
    box-shadow:0 24px 60px rgba(0,0,0,0.10);
    display:flex; flex-direction:column; flex:1;
  }
  @media (max-width:640px){
    body{ padding:12px 8px; }
    .pos{ border-radius:14px; 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));
      }
    }
  }
  .pos-header{
    display:flex; justify-content:space-between; align-items:center;
    margin:0 0 6px 4px; flex-wrap:wrap; gap:8px;
  }
  .pos-title{
    font-family:'Space Mono',monospace; font-weight:700; font-size:13px;
    letter-spacing:0.18em; text-transform:uppercase; color:var(--graphite); margin:0;
  }
  .header-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .history-btn{
    background:var(--paper); color:var(--paper-ink); border:1px solid var(--paper-line);
    border-radius:20px; padding:6px 14px; font-family:'Space Mono',monospace;
    font-size:11px; letter-spacing:0.08em; cursor:pointer; max-width:220px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .history-btn:hover{ background:var(--paper); border-color:var(--paper-fade); }
  .history-btn.active{ background:var(--felt); border-color:var(--felt-light); }
  .history-btn.fiados-btn.active{ background:var(--fiado); border-color:var(--fiado-light); }
  .storage-warning{
    font-family:'Space Mono',monospace; font-size:11px; color:var(--maroon);
    margin:0 0 10px 4px;
  }
  .page-nav{
    display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;
    border-bottom:1px solid rgba(0,0,0,0.08); padding-bottom:12px;
  }
  .nav-btn{
    background:var(--paper); color:var(--graphite); border:1px solid var(--paper-line);
    border-radius:20px; padding:8px 16px; font-family:'Space Mono',monospace;
    font-size:12px; letter-spacing:0.06em; cursor:pointer;
  }
  .nav-btn:hover{ border-color:var(--felt-light); }
  .nav-btn.active{ background:var(--graphite); color:var(--paper); border-color:var(--graphite); }
  @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(--paper);
      border-top:1px solid rgba(0,0,0,0.08); 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.06);
    }
    .page-nav .nav-btn{
      flex:1; min-width:0; min-height:48px;
      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(--graphite); color:var(--paper); 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(--felt); }
    #fiadosCount{ background:var(--fiado); }
    .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:#746762 !important; }
    .qty-btn:hover{ background:var(--paper) !important; border-color:var(--paper-line) !important; }
    .line-del:hover{ color:var(--maroon) !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:28px; transform:translateX(-50%);
    background:var(--graphite); color:var(--paper); font-family:'Inter',sans-serif;
    font-size:13px; line-height:1.45; white-space:pre-line;
    padding:11px 16px; border-radius:10px; max-width:min(420px, calc(100vw - 32px));
    box-shadow:0 10px 26px rgba(0,0,0,0.28); z-index:9999;
    text-align:center; pointer-events:none;
    animation:toast-in 0.18s ease-out;
  }
  @keyframes toast-in{
    from{ opacity:0; transform:translate(-50%, 8px); }
    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,236px) minmax(0,1fr);
      grid-template-rows:auto auto auto 1fr;
    }
    .pos > .pos-header{
      grid-column:1 / -1; grid-row:1;
      margin:0; padding:12px 20px;
      background:var(--paper); border-bottom:1px solid var(--paper-line);
    }
    .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,236px) minmax(0,1fr); grid-template-rows:1fr;
    }
    .pos-app > .page-nav{
      grid-column:1; grid-row:1; min-height:0; overflow-y:auto;
      display:flex; flex-direction:column; gap:4px;
      background:var(--coral-sidebar); border-right:1px solid var(--paper-line);
      border-bottom:none; margin-bottom:0; padding:16px 12px 20px;
    }
    .pos-app > .page-nav .nav-btn{
      display:flex; align-items:center; gap:11px;
      width:100%; min-width:0;
      background:none; border:none; border-radius:10px;
      padding:11px 13px;
      color:var(--paper-ink); font-family:'Inter',sans-serif;
      font-size:13.5px; font-weight:600; letter-spacing:0.01em;
      text-align:left; cursor:pointer; position:relative;
      transition:background 0.12s ease, color 0.12s ease;
    }
    .pos-app > .page-nav .nav-btn:hover{ background:var(--coral-hover); color:var(--graphite); }
    .pos-app > .page-nav .nav-btn.active{ background:var(--coral); color:#fff; }
    .pos-app > .page-nav .nav-btn[data-page="caja"]:not(.active){ background:var(--coral-bg); color:var(--coral); }
    .pos-app > .page-nav .nav-btn[data-page="caja"]:not(.active):hover{ background:var(--coral-hover); }
    .pos-app > .page-nav .nav-btn .nav-icon{ font-size:16px; line-height:1; flex-shrink:0; }
    .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:'Space Mono',monospace; font-size:9.5px; font-weight:700;
      background:var(--warm-card); color:var(--paper-ink);
      border-radius:9px; padding:1px 6px; min-width:20px; text-align:center;
    }
    .pos-app > .page-nav .nav-btn.active .nav-count{ background:rgba(255,255,255,0.25); color:#fff; }
    .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{ flex-wrap:wrap; }
    .page-nav .nav-btn{ flex-direction:column; gap:2px; }
    .page-nav .nav-btn .nav-label{ white-space:normal; }
    .page-nav .nav-btn.active{ background:var(--coral); color:#fff; border-color:transparent; }
    .nav-more-btn{
      flex:1; min-width:0; min-height:48px;
      display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px;
      background:none; border:none; border-radius:0;
      padding:4px 2px;
      font-family:'Inter',sans-serif; font-size:10.5px; line-height:1.25; letter-spacing:0.04em;
      color:var(--paper-ink); cursor:pointer; position:relative;
    }
    .nav-more-btn .nav-icon{ font-size:14px; line-height:1; }
    .nav-more-btn.active{ color:var(--felt); }
    .page-nav .nav-btn[data-page="fiados"],
    .page-nav .nav-btn[data-page="admin"]{ display:none; }
    .page-nav.more-open .nav-btn[data-page="fiados"],
    .page-nav.more-open .nav-btn[data-page="admin"]{
      display:flex; flex:1 1 100%; order:99;
      flex-direction:row; align-items:center; justify-content:center; gap:8px;
      min-height:44px; min-width:0;
      background:var(--graphite-light); border-top:1px solid var(--paper-line);
      font-size:12px; font-weight:600; color:var(--paper-ink);
    }
    .page-nav.more-open .nav-btn[data-page="fiados"].active,
    .page-nav.more-open .nav-btn[data-page="admin"].active{ background:var(--coral); color:#fff; }
    body:has(.page-nav.more-open) .pos{ padding-bottom:142px; }
  }

  /* ---------- F4: Caja — total integrado en la cabecera (sin LED gigante) ---------- */
  #pageCaja .receipt-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    text-align:left;
  }
  #pageCaja .receipt-head-title{
    font-family:'Space Mono',monospace; font-weight:700; font-size:12.5px;
    letter-spacing:0.14em; color:var(--coral);
  }
  #pageCaja .receipt-head .date{ margin-top:2px; letter-spacing:0.05em; }
  #pageCaja .receipt-total-chip{
    display:flex; align-items:baseline; gap:6px; flex-shrink:0;
    background:var(--paper); border:1px solid var(--paper-line); border-radius:8px;
    padding:5px 10px;
  }
  #pageCaja .receipt-total-chip-label{
    font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:0.1em;
    color:var(--paper-fade); font-weight:700;
  }
  #pageCaja .receipt-total-chip-value{
    font-family:'Space Mono',monospace; font-weight:700; font-size:17px; color:var(--felt);
    white-space:nowrap;
  }

  /* ---------- 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:2px solid var(--felt-light); outline-offset:2px;
  }