/* =====================================================================================================
   Vitrina — admin panel theme (dark, same palette as the store; see the shared tokens at the top of
   store.css). Every rule is scoped to body.admin-mode. Desktop: fixed sidebar with icons and counts;
   tablets: icon rail; phones: floating bottom bar (app.css shows it, this file styles it).
   ===================================================================================================== */
body.admin-mode{ --side-w: 252px; }
body.admin-mode::before{
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(37,99,235,0.20), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(34,211,238,0.08), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(140,180,255,0.05) 1px, transparent 0) 0 0 / 26px 26px,
    var(--bg);
}
body.admin-mode .brand-hero{ display:none; }
body.admin-mode ::selection{ background: rgba(59,130,246,0.45); color:#fff; }
body.admin-mode :focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 2px; }
body.admin-mode #storeTabs, body.admin-mode #searchBtn, body.admin-mode #hdrCartBtn, body.admin-mode .cart-fab{ display:none !important; }

/* ---------- page header (title of the section + actions) ---------- */
.admin-title{ display:none; }
body.admin-mode .admin-title{ display:flex; align-items:center; gap:12px; margin-right:auto; min-width:0; flex:1 1 auto; }
body.admin-mode .admin-title > span{ display:flex; flex-direction:column; min-width:0; }
body.admin-mode .admin-title b{ font-family: var(--font-display); font-size: 24px; font-weight:700; letter-spacing:-0.025em; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.admin-mode .admin-title small{ font-size:12.5px; color: var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-title-mark{ height:32px; width:auto; filter: drop-shadow(0 0 12px rgba(59,130,246,0.45)); }
body.admin-mode .topbar{
  position: sticky; top:0; z-index: 240; flex-wrap:nowrap; gap:12px; margin: 0 -28px 22px; padding: calc(14px + env(safe-area-inset-top, 0px)) 28px 14px;
  background: rgba(5,11,24,0.78); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
body.admin-mode .topbar-actions{ margin-left:0; flex-wrap:nowrap; }
body.admin-mode .hdr-btn, body.admin-mode #logoutBtn{
  background: rgba(255,255,255,0.04); border:1px solid var(--line); color: var(--text-dim); border-radius: 999px; padding: 8px 14px; height:38px; text-decoration:none;
}
body.admin-mode .hdr-btn:hover, body.admin-mode #logoutBtn:hover{ color: var(--text); background: rgba(255,255,255,0.08); border-color: var(--line-strong); }
body.admin-mode .segmented{ background: rgba(255,255,255,0.04); border-color: var(--line); }
body.admin-mode .segmented button{ color: var(--text-dim); }
body.admin-mode .segmented button[aria-pressed="true"]{ background: var(--accent-grad); color:#fff; box-shadow: var(--glow); }

/* ---------- sidebar (desktop) / icon rail (tablet) ---------- */
.side-brand, .side-label, .side-foot{ display:none; }
.tab .tlbl{ white-space:nowrap; }
@media (min-width: 721px){
  body.admin-mode .wrap{ margin: 0 0 0 var(--side-w); max-width:none; padding: 0 28px 70px; }
  body.admin-mode main{ max-width: 1320px; }
  body.admin-mode .admin-title-mark{ display:none; }
  body.admin-mode #adminTabs{
    position: fixed; left:0; top:0; bottom:0; z-index: 260; width: var(--side-w);
    display:flex; flex-direction:column; gap:2px; margin:0; overflow-x:hidden; overflow-y:auto;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 12px 16px; border-radius:0; border:0; border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(9,18,38,0.96), rgba(5,11,24,0.97));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); scrollbar-width: thin;
  }
  body.admin-mode .side-brand{ display:flex; align-items:center; gap:11px; padding: 2px 8px 18px; margin-bottom: 4px; border-bottom:1px solid var(--line); }
  body.admin-mode .side-brand img{ height:36px; width:auto; flex-shrink:0; filter: drop-shadow(0 0 14px rgba(59,130,246,0.5)); }
  body.admin-mode .side-brand span{ display:flex; flex-direction:column; min-width:0; }
  body.admin-mode .side-brand b{
    font-family: var(--font-display); font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    background: var(--text-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  body.admin-mode .side-brand small{ font-size:11px; color: var(--text-faint); white-space:nowrap; }
  body.admin-mode .side-label{ display:block; padding: 16px 12px 6px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--text-faint); }
  body.admin-mode #adminTabs .tab{
    position:relative; flex-shrink:0; width:100%; justify-content:flex-start; gap:12px; padding: 10px 12px; border-radius: 12px;
    font-size:14px; font-weight:600; color: var(--text-dim); background:none; box-shadow:none;
    transition: background .18s, color .18s;
  }
  body.admin-mode #adminTabs .tab svg{ width:19px; height:19px; flex-shrink:0; transition: color .18s, filter .18s; }
  body.admin-mode #adminTabs .tab:hover{ background: rgba(255,255,255,0.05); color: var(--text); }
  body.admin-mode #adminTabs .tab[aria-selected="true"]{
    color:#fff; background: linear-gradient(90deg, rgba(59,130,246,0.24), rgba(59,130,246,0.05)); box-shadow: inset 0 0 0 1px rgba(96,165,250,0.22);
  }
  body.admin-mode #adminTabs .tab[aria-selected="true"]::before{
    content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius: 0 3px 3px 0; background: var(--accent-grad); box-shadow: 0 0 12px rgba(56,189,248,0.8);
  }
  body.admin-mode #adminTabs .tab[aria-selected="true"] svg{ color:#7dd3fc; filter: drop-shadow(0 0 6px rgba(56,189,248,0.65)); }
  body.admin-mode #adminTabs .tab .count{ margin-left:auto; background: var(--amber); color: var(--on-amber); min-width:20px; height:20px; font-size:11px; }
  body.admin-mode .side-foot{ display:block; margin-top:auto; padding-top: 14px; border-top:1px solid var(--line); }
  body.admin-mode .side-store{
    width:100%; display:flex; align-items:center; gap:12px; padding: 10px 12px; border-radius: 12px; font-size:14px; font-weight:600;
    border:1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--text-dim); transition: all .18s;
  }
  body.admin-mode .side-store:hover{ color: var(--text); border-color: rgba(96,165,250,0.35); background: rgba(59,130,246,0.1); }
  body.admin-mode .side-store svg{ width:18px; height:18px; }
}
@media (min-width: 721px) and (max-width: 1099px){
  body.admin-mode{ --side-w: 76px; }
  body.admin-mode #adminTabs{ padding-left: 10px; padding-right: 10px; align-items:center; }
  body.admin-mode .side-brand{ padding: 2px 0 14px; justify-content:center; width:100%; }
  body.admin-mode .side-brand img{ height:28px; }
  body.admin-mode .side-brand span, body.admin-mode .tab .tlbl, body.admin-mode .side-store .tlbl{ display:none; }
  body.admin-mode .side-label{ padding:0; font-size:0; height:1px; width:36px; background: var(--line); margin: 10px auto; flex-shrink:0; }
  body.admin-mode #adminTabs .tab, body.admin-mode .side-store{ justify-content:center; padding: 11px 0; width:52px; }
  body.admin-mode #adminTabs .tab[aria-selected="true"]::before{ left:-10px; }
  body.admin-mode #adminTabs .tab .count{ position:absolute; top:4px; right:2px; min-width:17px; height:17px; font-size:10px; padding:0 4px; }
}

/* ---------- common surfaces ---------- */
body.admin-mode .panel-card{ background: var(--card); border:1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 18px; }
body.admin-mode .panel-title{ font-size:16.5px; letter-spacing:-0.01em; }
body.admin-mode .kpi{ background: var(--card); border:1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 15px 16px; }
body.admin-mode .kpi b{ font-size: 22px; }
body.admin-mode .kpi.accent b{ background: var(--text-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.admin-mode .btn{ border-radius: 12px; }
body.admin-mode .btn-primary, body.admin-mode .btn-teal{ background: var(--accent-grad); color:#fff; box-shadow: var(--glow); }
body.admin-mode .btn-primary:hover, body.admin-mode .btn-teal:hover{ filter: brightness(1.1); }
body.admin-mode .btn-ghost{ background: rgba(255,255,255,0.04); border-color: var(--line); color: var(--text-dim); }
body.admin-mode .btn-ghost:hover{ background: rgba(255,255,255,0.08); color: var(--text); }
body.admin-mode .btn-danger{ background: linear-gradient(135deg, #e11d48, #fb7185); }
body.admin-mode .link-btn{ color: var(--blue); text-decoration:none; }
body.admin-mode .link-btn:hover{ color:#93c5fd; text-decoration: underline; }
body.admin-mode .chip{ background: rgba(255,255,255,0.04); border-color: var(--line); color: var(--text-dim); }
body.admin-mode .chip:hover{ background: rgba(255,255,255,0.08); color: var(--text); }
body.admin-mode .chip[aria-pressed="true"]{ background: var(--accent-grad); color:#fff; border-color: transparent; box-shadow: var(--glow); }
body.admin-mode .view-toggle button[aria-pressed="true"]{ background: var(--accent-grad); color:#fff; }
body.admin-mode .field input, body.admin-mode .field textarea, body.admin-mode .field select, body.admin-mode .search-field input, body.admin-mode .select,
body.admin-mode .coupon-row input, body.admin-mode .count-row input, body.admin-mode .adjust-row input, body.admin-mode .status-select,
body.admin-mode .rc-row select, body.admin-mode .rc-row input, body.admin-mode .zone-row input, body.admin-mode .audit-filters select, body.admin-mode .audit-filters input,
body.admin-mode .date-input, body.admin-mode .pos-split select, body.admin-mode .pos-split input, body.admin-mode .pos-disc input,
body.admin-mode .po-row select, body.admin-mode .po-row input, body.admin-mode .ann-edit input, body.admin-mode .ann-edit select,
body.admin-mode .dc-inputs input, body.admin-mode .dc-inputs select{
  background: rgba(3,9,20,0.55); border:1px solid var(--line-strong); color: var(--text); border-radius: 11px;
}
body.admin-mode .field input:focus, body.admin-mode .field textarea:focus, body.admin-mode .field select:focus, body.admin-mode .search-field input:focus,
body.admin-mode .coupon-row input:focus, body.admin-mode .po-row input:focus, body.admin-mode .po-row select:focus, body.admin-mode .count-row input:focus{
  outline:none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(34,211,238,0.16);
}
body.admin-mode select option, body.admin-mode select optgroup{ background:#0c1628; color: var(--text); }
body.admin-mode input[type="date"], body.admin-mode input[type="time"]{ color-scheme: dark; }
body.admin-mode .ocard{ background: rgba(255,255,255,0.03); border-color: var(--line); border-radius: 18px; transition: border-color .2s; }
body.admin-mode .ocard:hover{ border-color: var(--line-strong); }
body.admin-mode .tag.completada{ background: rgba(52,211,153,0.14); color:#34d399; }
body.admin-mode .tag.paid, body.admin-mode .tag.lista{ color:#34d399; background: rgba(52,211,153,0.12); }
body.admin-mode .onote, body.admin-mode .notice{ background: rgba(255,255,255,0.04); }
body.admin-mode .totals{ background: rgba(3,9,20,0.5); border:1px solid var(--line); }
body.admin-mode .pboard-card, body.admin-mode .pos-tile{ background: var(--card); border-color: var(--line); }
body.admin-mode .pos-tile:hover, body.admin-mode .pboard-card:hover{ border-color: rgba(96,165,250,0.35); }
body.admin-mode .pos-count{ background: var(--accent-grad); color:#fff; }
body.admin-mode .pos-ticket{ background: linear-gradient(180deg, rgba(17,31,58,0.97), rgba(9,17,34,0.98)); border-color: var(--line-strong); border-radius: 20px; }
body.admin-mode .pos-bar{ background: var(--accent-grad); color:#fff; }
body.admin-mode .pos-ticket.open .pos-bar{ background: rgba(255,255,255,0.05); color: var(--text); }
body.admin-mode .prow-thumb, body.admin-mode .img-preview, body.admin-mode .pos-tile .pimg{ background:#e8edf5; }
body.admin-mode .inv-edit:hover, body.admin-mode .crow:hover{ background: rgba(255,255,255,0.04); }
body.admin-mode .crow{ color: var(--text); }
body.admin-mode .tbl th{ color: var(--text-faint); text-transform:uppercase; letter-spacing:.06em; font-size:11px; }
body.admin-mode .tbl tr:hover td{ background: rgba(255,255,255,0.02); }
body.admin-mode .rank-bar{ background: rgba(255,255,255,0.06); }
body.admin-mode .rank-bar i{ background: var(--accent-grad); }
body.admin-mode .chart .bar{ fill: #3b82f6; }
body.admin-mode .chart svg{ max-height: 260px; }
body.admin-mode .banner{ border-radius: 14px; }
body.admin-mode .stock-box, body.admin-mode .maint-preview{ background: rgba(3,9,20,0.45); }
body.admin-mode .empty{ border-color: var(--line-strong); background: rgba(255,255,255,0.02); border-radius: 18px; }
body.admin-mode .skeleton{ background: var(--card); }

/* windows, toasts and the floating save button */
body.admin-mode .overlay{ background: var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.admin-mode .win{ background: linear-gradient(180deg, rgba(17,31,58,0.98), rgba(9,17,34,0.99)); border:1px solid var(--line-strong); border-radius: 24px; box-shadow: var(--shadow-win); }
body.admin-mode .win-foot{ background: rgba(8,16,32,0.92); border-top-color: var(--line); }
body.admin-mode .win-title{ color: var(--text); }
body.admin-mode .icon-btn{ color: var(--text-dim); border-radius: 11px; }
body.admin-mode .icon-btn:hover{ color: var(--text); background: rgba(255,255,255,0.08); }
body.admin-mode .toast{ background: rgba(12,24,46,0.94); color: var(--text); border:1px solid var(--line-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 50px -18px rgba(0,0,0,0.9); }
body.admin-mode .toast.warn{ background: rgba(76,18,34,0.95); color:#ffe4e8; border-color: rgba(251,113,133,0.45); }
body.admin-mode .toast-btn{ background: var(--accent-grad); color:#fff; }
body.admin-mode .sticky-save .btn{ box-shadow: 0 18px 40px -12px rgba(0,0,0,0.9), var(--glow); }
body.admin-mode .more-item{ color: var(--text); border-bottom-color: var(--line); }
body.admin-mode .more-item.on{ color: #7dd3fc; }
body.admin-mode .restart-box{ background: linear-gradient(180deg, rgba(17,31,58,0.98), rgba(9,17,34,0.99)); border:1px solid var(--line-strong); }

/* ---------- Inicio (dashboard) ---------- */
.dash-hero{
  position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px 20px; align-items:start;
  padding: 26px 28px; margin-bottom: 18px; border-radius: 24px; border:1px solid var(--line-strong);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(34,211,238,0.14), transparent 60%),
    radial-gradient(520px 320px at 0% 100%, rgba(37,99,235,0.26), transparent 60%),
    linear-gradient(160deg, rgba(16,32,64,0.92), rgba(7,14,30,0.94));
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.95);
}
.dash-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none;
  background: linear-gradient(rgba(140,180,255,0.06) 1px, transparent 1px) 0 0/30px 30px, linear-gradient(90deg, rgba(140,180,255,0.06) 1px, transparent 1px) 0 0/30px 30px;
  -webkit-mask-image: radial-gradient(ellipse at 90% 20%, #000, transparent 60%); mask-image: radial-gradient(ellipse at 90% 20%, #000, transparent 60%);
}
.dash-hello h2{
  margin:0; font-family: var(--font-display); font-weight:700; font-size: clamp(26px, 3.2vw, 36px); line-height:1.1; letter-spacing:-0.03em;
  background: var(--text-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dash-hello p{ margin: 8px 0 0; color: var(--text-dim); font-size:15px; }
.dash-hello p b{ color: var(--text); }
.dash-status{ display:inline-flex; align-items:center; gap:8px; padding: 7px 14px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; }
.dash-status i{ width:8px; height:8px; border-radius:50%; background: currentColor; }
.dash-status.open{ color:#34d399; background: rgba(52,211,153,0.1); border:1px solid rgba(52,211,153,0.3); }
.dash-status.open i{ animation: ping 2.2s ease-out infinite; box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
.dash-status.closed{ color:#fb7185; background: rgba(251,113,133,0.1); border:1px solid rgba(251,113,133,0.3); }
.quick-acts{ grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.qa{
  display:inline-flex; align-items:center; gap:8px; padding: 10px 16px; border-radius: 12px; font-size:13.5px; font-weight:600;
  border:1px solid var(--line-strong); background: rgba(255,255,255,0.05); color: var(--text); transition: transform .18s, background .18s, border-color .18s;
}
.qa svg{ width:17px; height:17px; flex-shrink:0; }
.qa:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.1); border-color: rgba(96,165,250,0.4); }
.qa-main{ background: var(--accent-grad); border-color: transparent; color:#fff; box-shadow: var(--glow); }
.qa-main:hover{ background: var(--accent-grad); filter: brightness(1.1); }
.dash-kpis{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-bottom: 18px; }
.dkpi{
  display:flex; gap:14px; align-items:flex-start; text-align:left; padding: 18px; border-radius: 20px; min-width:0;
  border:1px solid var(--line); background: var(--card); color: var(--text); box-shadow: var(--shadow); transition: transform .2s, border-color .2s;
}
.dkpi:hover{ transform: translateY(-3px); border-color: rgba(96,165,250,0.35); }
.dkpi-ic{ width:44px; height:44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dkpi-ic svg{ width:21px; height:21px; }
.k-blue .dkpi-ic{ background: rgba(59,130,246,0.16); color:#93c5fd; box-shadow: inset 0 0 0 1px rgba(59,130,246,0.3); }
.k-cyan .dkpi-ic{ background: rgba(34,211,238,0.13); color:#67e8f9; box-shadow: inset 0 0 0 1px rgba(34,211,238,0.28); }
.k-amber .dkpi-ic{ background: rgba(251,191,36,0.13); color:#fcd34d; box-shadow: inset 0 0 0 1px rgba(251,191,36,0.28); }
.k-rose .dkpi-ic{ background: rgba(251,113,133,0.13); color:#fda4af; box-shadow: inset 0 0 0 1px rgba(251,113,133,0.28); }
.dkpi-main{ display:flex; flex-direction:column; min-width:0; }
.dkpi-label{ font-size:12.5px; color: var(--text-dim); font-weight:600; }
.dkpi b{ font-family: var(--font-display); font-size: 25px; font-weight:700; letter-spacing:-0.02em; margin-top:4px; font-variant-numeric: tabular-nums; white-space:nowrap; }
.dkpi small{ font-size:12px; color: var(--text-faint); margin-top:3px; }
.dash-grid{ display:grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap:14px; margin-bottom:14px; }
.dash-grid-2{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.dash-grid > .panel-card + .panel-card{ margin-top:0; }
.dchart{ width:100%; height:auto; display:block; }
.dbar rect{ fill: url(#dashGrad); opacity:.75; transition: opacity .2s; }
.dbar:hover rect{ opacity:1; }
.dbar.today rect{ opacity:1; filter: drop-shadow(0 0 10px rgba(56,189,248,0.55)); }
.dbar.zero rect{ fill: rgba(255,255,255,0.08); }
.dval{ fill: var(--text-dim); font: 600 11px var(--font-body); }
.dday{ fill: var(--text-faint); font: 500 11.5px var(--font-body); }
.dbar.today .dday{ fill:#7dd3fc; font-weight:700; }
.dgrid{ stroke: rgba(140,180,255,0.09); stroke-dasharray: 4 5; }
.dash-orders{ display:flex; flex-direction:column; gap:8px; }
.dorder{
  display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left; padding: 11px 12px; border-radius: 14px;
  border:1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--text); transition: border-color .18s, background .18s;
}
.dorder:hover{ border-color: rgba(96,165,250,0.35); background: rgba(59,130,246,0.08); }
.dorder-main{ display:flex; flex-direction:column; min-width:0; }
.dorder-main b{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dorder-main small{ font-size:12px; color: var(--text-faint); }
.dorder-side{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.dorder-side b{ font-family: var(--font-display); font-size:14px; font-variant-numeric: tabular-nums; }
.dash-empty{ padding: 26px 12px; text-align:center; color: var(--text-faint); border:1px dashed var(--line-strong); border-radius: 14px; font-size:13.5px; }
@media (max-width: 1200px){ .dash-kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 980px){ .dash-grid, .dash-grid-2{ grid-template-columns: minmax(0,1fr); } }

/* ---------- phones: header with logo, floating bottom bar ---------- */
@media (max-width: 720px){
  body.admin-mode .wrap{ padding: 0 12px calc(100px + env(safe-area-inset-bottom, 0px)); }
  body.admin-mode .topbar{ margin: 0 -12px 16px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
  body.admin-mode .admin-title b{ font-size: 19px; }
  body.admin-mode .admin-title small{ display:none; }
  body.admin-mode #qrBtn{ display:none !important; }
  body.admin-mode .topbar-actions{ gap:6px; }
  body.admin-mode .admin-title-mark{ height:28px; }
  body.admin-mode .bottom-nav{
    left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; padding: 4px !important;
    border-radius: 22px; border:1px solid var(--line-strong) !important;
    background: rgba(9,18,36,0.86) !important; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 20px 50px -14px rgba(0,0,0,0.9);
  }
  body.admin-mode .bottom-nav button{ border-radius: 18px; min-height:54px; color: var(--text-faint); }
  body.admin-mode .bottom-nav button.on{ color:#fff; background: rgba(59,130,246,0.18); }
  body.admin-mode .bottom-nav button.on svg{ color:#7dd3fc; filter: drop-shadow(0 0 8px rgba(56,189,248,0.8)); }
  body.admin-mode .toasts{ bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.admin-mode .pos-ticket{ bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body.admin-mode .sticky-save{ bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .dash-hero{ padding: 20px; grid-template-columns: 1fr; }
  .dash-status{ justify-self:start; }
  .quick-acts{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin: 4px -20px 0; padding: 0 20px 2px; }
  .quick-acts::-webkit-scrollbar{ display:none; }
  .qa{ flex-shrink:0; }
  .dash-kpis{ gap:10px; }
  .dkpi{ flex-direction:column; gap:10px; padding: 14px; }
  .dkpi-ic{ width:36px; height:36px; border-radius: 11px; }
  .dkpi b{ font-size: 21px; }
}

/* ---------- suppliers ---------- */
.sup-owed{ color: #fda4af; }
.sup-top{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.sup-top-main{ flex:1; min-width: 200px; }
.sup-top-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.sup-top-acts .btn{ text-decoration:none; }
body.admin-mode .sup-sec{ margin:0; padding: 16px; box-shadow:none; background: rgba(255,255,255,0.03); }
.sup-sec .panel-head{ margin-bottom:10px; }
.sup-sec .panel-title{ font-size:15px; }
.sup-pay-grid{ display:grid; grid-template-columns: 1fr 1.4fr 1fr; gap:10px; }
.sup-row{ display:flex; align-items:center; gap:10px; padding: 10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.sup-row:last-child{ border-bottom:0; padding-bottom:0; }
.sup-row-main{ flex:1; min-width: 150px; display:flex; flex-direction:column; }
.sup-row-main b{ font-size:14px; }
.sup-row-main small{ font-size:12px; color: var(--text-faint); }
.sup-row-amt{ font-family: var(--font-display); font-variant-numeric: tabular-nums; min-width: 84px; text-align:right; }
.sup-row-gap{ width: 62px; }
.sup-import .maint-preview div{ padding: 2px 0; }
.sup-imp-create{ color: #86efac; } .sup-imp-update{ color: #7dd3fc; } .sup-imp-skip{ color: var(--text-faint); }
body.admin-mode #win-supplier .win{ max-width: 820px; }
@media (max-width: 640px){ .sup-pay-grid{ grid-template-columns: 1fr 1fr; } .sup-pay-grid .field:first-child{ grid-column: 1 / -1; } .sup-row-gap{ display:none; } }

/* POS: typed quantity; import summary */
.pos-qty{ width: 54px; height: 26px; padding: 0 2px; border:0 !important; background: transparent !important; color: var(--text); text-align:center; font: 600 14px var(--font-body); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; border-radius: 6px; }
.pos-qty::-webkit-outer-spin-button, .pos-qty::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.pos-qty:focus{ outline: none; background: rgba(34,211,238,0.12) !important; box-shadow: 0 0 0 2px rgba(34,211,238,0.35); }
.legacy-sum{ margin-top: 0; }

/* Caja: line sold by vial / mg / mL / units */
/* The ticket column is narrow: the name and its price maths take the whole first row, the controls go under it. */
/* Row 1: the name and its maths, with the line's buttons at the right. Row 2: unit and quantity. Row 3: price and total. */
.pos-line{ grid-template-columns: auto minmax(0, 1fr) auto; }
.pos-line > .pos-line-main{ grid-column: 1 / 3; grid-row: 1; }
.pos-line > .pos-line-btns{ grid-column: 3; grid-row: 1; align-self: start; justify-self: end; }
.pos-line > .stepper{ justify-self: start; }
.pos-line > .pos-part{ grid-column: 1 / -1; }
.pos-line:not(.has-unit) > .stepper{ grid-column: 1 / -1; }
.pos-line.has-unit > .stepper{ grid-column: 2 / -1; }
.pos-line-btns{ display:flex; align-items:center; gap:4px; }
.pos-line-btns .btn{ padding-left:8px; padding-right:8px; white-space:nowrap; }
.pos-line-btns .pos-rm{ width:30px; height:30px; flex:none; }
.pos-line-btns .pos-rm svg{ width:16px; height:16px; }
.pos-line.has-unit > .stepper{ justify-self: start; }
.pos-unit{ height: 34px; padding: 0 6px; border-radius: 10px; border:1px solid var(--line-strong); background: rgba(3,9,20,0.55); color: var(--text); font: 600 12.5px var(--font-body); max-width: 104px; }
.pos-part{ display:flex; align-items:center; gap:6px; }
.pos-qty.part{ width: 70px; height: 34px; border:1px solid var(--line-strong) !important; background: rgba(3,9,20,0.55) !important; border-radius: 10px; }
.pos-line .cart-sub b{ color: var(--text); }
/* Price and total of a ticket line, typed by hand in Caja. Teal dashed = worked out by the system from the other two. */
.pos-money{ grid-column: 1 / -1; display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.pos-money label{ display:flex; align-items:center; gap:6px; min-width:0; height:34px; padding:0 8px; border-radius:10px; border:1px solid var(--line-strong); background: rgba(3,9,20,0.55); }
.pos-money label:focus-within{ border-color: rgba(34,211,238,0.6); box-shadow: 0 0 0 2px rgba(34,211,238,0.25); }
.pos-money span{ flex:none; font: 600 11px var(--font-body); color: var(--muted); white-space:nowrap; }
.pos-money input{ flex:1; min-width:0; width:100%; height:30px; padding:0; border:0 !important; background: transparent !important; box-shadow:none !important; outline:none; color: var(--text); text-align:right; font: 600 14px var(--font-body); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.pos-money input::-webkit-outer-spin-button, .pos-money input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
body.admin-mode .pos-money input:focus, body.admin-mode .pos-money input:focus-visible{ outline:none !important; box-shadow:none !important; border:0 !important; }
.pos-money input.changed{ color: #fbbf24; }
.pos-money input.calc, .pos-qty.part.calc{ color: var(--teal); }
.pos-money label:has(input.calc), .pos-qty.part.calc{ border-style: dashed !important; border-color: rgba(45,212,191,0.6) !important; }
.pos-line .cart-sub s{ opacity:.65; }
/* Supplier a ticket line is dispatched from */
.pos-sup{ grid-column: 1 / -1; display:flex; align-items:center; gap:6px; min-width:0; height:34px; padding:0 8px; border-radius:10px; border:1px solid var(--line-strong); background: rgba(3,9,20,0.55); }
.pos-sup span{ flex:none; font: 600 11px var(--font-body); color: var(--muted); }
.pos-sup select{ flex:1; min-width:0; height:30px; padding:0; border:0 !important; background: transparent !important; box-shadow:none !important; outline:none; color: var(--text); font: 600 12.5px var(--font-body); }
.pos-sup select option{ background:#0b1220; color:#e5edf7; }
.pos-cost{ color: var(--muted); }


/* ---------- audit fixes ---------- */
/* Two-column report cards: a long product name (nowrap) must shrink with its column, not widen the whole page. */
body.admin-mode .two-col{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.admin-mode .two-col > *, body.admin-mode .panel-card{ min-width: 0; }
@media (max-width: 760px){ body.admin-mode .two-col{ grid-template-columns: minmax(0, 1fr); } }
/* On a phone the notices go above the bottom bar; without top:auto they stayed glued to the top, over the search. */
@media (max-width: 720px){
  body.admin-mode .toasts{ top: auto; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  body.admin-mode .pos-meta{ flex-wrap: wrap; }
}
body.admin-mode .pos-meta > *{ min-width: 0; }
#backupBanner{ margin-top: 8px; }

/* ---------- number tiles and rows that lead to their detail ---------- */
button.kpi{ font: inherit; color: inherit; text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, border-color .15s ease, background .15s ease; position: relative; }
body.admin-mode button.kpi{ padding-right: 30px; }
body.admin-mode button.kpi::after{ content: "›"; position: absolute; top: 10px; right: 13px; color: var(--text-faint); font-size: 17px; line-height: 1; transition: transform .15s ease, color .15s ease; }
body.admin-mode button.kpi:hover{ transform: translateY(-2px); border-color: rgba(96,165,250,0.4); }
body.admin-mode button.kpi:hover::after{ color: var(--accent-2, #67e8f9); transform: translateX(2px); }
body.admin-mode button.kpi:active{ transform: scale(.985); }
body.admin-mode button.kpi:focus-visible, button.rank-go:focus-visible, button.dash-status:focus-visible{ outline: 2px solid rgba(34,211,238,0.7); outline-offset: 2px; }
button.rank-go{ font: inherit; color: inherit; text-align: left; width: 100%; background: none; border: 0; cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
body.admin-mode button.rank-go{ padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); }
body.admin-mode button.rank-go:hover{ background: rgba(96,165,250,0.08); }
button.dash-status{ font: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce){ body.admin-mode button.kpi, body.admin-mode button.kpi{ padding-right: 30px; }
body.admin-mode button.kpi::after{ transition: none; } }

/* ---------- filters: the "Filtros" button and the chips of the ones in use ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin: 0 0 12px; }
.filter-btn{ display:inline-flex; align-items:center; gap:7px; }
.filter-btn svg{ width:15px; height:15px; }
.filter-btn .n{ min-width:18px; height:18px; padding:0 5px; border-radius:999px; background: var(--accent, #3b82f6); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
body.admin-mode .filter-btn.on{ border-color: rgba(96,165,250,0.55); color: var(--text); }
body.admin-mode .chip.fchip{ display:inline-flex; align-items:center; gap:6px; border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.08); color: var(--text-dim); max-width:100%; }
.chip.fchip b{ color: var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip.fchip span{ font-size:11px; opacity:.7; }
.chip.fchip:hover span{ opacity:1; }
#win-filters select, #win-filters input[type=date]{ width:100%; }
#win-filters .win-foot{ justify-content: space-between; }

/* Product editor: units and cost by supplier */
.lot-row{ display:grid; grid-template-columns: minmax(0, 1fr) 84px 96px 34px; gap:6px; align-items:center; margin-top:6px; }
.lot-row.lot-head{ font: 600 11px var(--font-body); color: var(--muted); margin-top:4px; }
.lot-row input{ min-width:0; width:100%; }
.lot-foot{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.lot-foot #edLotsSum{ margin-left:auto; font-size:12.5px; }
body.admin-mode .tag.sup{ color:#93c5fd; background: rgba(96,165,250,0.12); }
#itemSupBody select{ max-width: 210px; height:36px; border-radius:10px; border:1px solid var(--line-strong); background: rgba(3,9,20,0.55); color: var(--text); padding:0 8px; font: 600 12.5px var(--font-body); }

/* Caja: editing an order, combos */
.pos-head-links{ display:flex; gap:14px; align-items:center; }
.pos-combo{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; margin:8px 0; border:1px dashed var(--line-strong); border-radius:12px; }
.pos-combo .check-row{ font-size:13px; }
.pos-combo-row{ display:flex; gap:8px; align-items:center; }
.pos-combo-row input{ flex:1; min-width:0; height:36px; border-radius:10px; border:1px solid var(--line-strong); background: rgba(3,9,20,0.55); color: var(--text); padding:0 10px; font: 600 14px var(--font-body); }
body.admin-mode .tag.combo{ color:#c4b5fd; background: rgba(167,139,250,0.14); }
.pos-tile .combo-tag ~ .hidden-tag{ top:30px; }
.lot-row select{ min-width:0; width:100%; height:40px; border-radius:10px; border:1px solid var(--line-strong); background: rgba(3,9,20,0.55); color: var(--text); padding:0 8px; }

/* Gifts */
body.admin-mode .tag.gift{ color:#5eead4; background: rgba(45,212,191,0.14); }
.pos-combo-line{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pos-combo-line .check-row{ min-width:0; }
.pos-combo-gift{ flex:none; color: var(--muted); font-size:12px !important; }
.pos-money input:disabled{ opacity:.45; }

.pos-add-more{ margin: 10px 0 2px; border-style: dashed !important; }
.pos-add-more svg{ width:16px; height:16px; margin-right:6px; }
/* Dense administrative data favors legibility over decoration. */
body.admin-mode .panel-card,body.admin-mode .tbl,body.admin-mode .pos-tile{ box-shadow:0 4px 16px rgba(0,0,0,.14); }
.pos-catalog-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.pos-catalog-tools [aria-pressed="true"]{border-color:#60a5fa;background:rgba(59,130,246,.16);color:#dbeafe}
.admin-tools{display:flex;justify-content:flex-end;margin-bottom:12px}
.admin-tools kbd{font:inherit;border:1px solid var(--line);border-radius:5px;padding:2px 6px;opacity:.75}
.command-palette{width:min(560px,calc(100vw - 32px));max-height:80vh;border:1px solid #334155;border-radius:20px;padding:24px;background:#0c182e;color:#eaf1ff;box-shadow:0 24px 80px #0008;overflow:auto}
.command-palette::backdrop{background:rgba(2,6,23,.75)}
.command-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.command-heading h2{margin:0;font-size:20px}
.command-palette label{display:block;margin-bottom:8px;font-weight:600}
.command-palette input{width:100%;min-height:48px;padding:12px;border:1px solid #475569;border-radius:10px;background:#050b18;color:inherit;font:inherit;font-size:16px}
.command-results{display:grid;gap:6px;margin:12px 0}
.command-result{min-height:48px;text-align:left;padding:12px 16px;border:1px solid #27364d;border-radius:10px;color:inherit;background:#14233b;font:inherit;cursor:pointer}
.command-result:hover{background:#1e3555}
.command-palette :focus-visible{outline:3px solid #60a5fa;outline-offset:3px}
.command-palette .muted{font-size:13px;line-height:1.6}
body.admin-mode .tbl th{ font-size:12px; color:var(--text-dim); letter-spacing:.025em; }
body.admin-mode .dkpi small,body.admin-mode .dorder-main small{ font-size:13px; color:var(--text-dim); }
body.admin-mode .pos-money label{ min-height:44px; }
body.admin-mode #adminBody[aria-busy="true"]{ cursor:progress; }
body.admin-mode .load-status{ margin-bottom:16px; }