/* ===========================
   Seven de Burgers — UI Pixel Retro (tematizable)
   Archivo: shared/styles.css
   Versión consolidada (fonts + cocina legible)
   =========================== */

/* -----------------------------------------------------------
   0) VARIABLES BASE + ALIAS (compatibles con /shared/theme.js)
   ----------------------------------------------------------- */
:root{
  color-scheme: dark;

  /* Defaults */
  --bg:#0b0f19; --text:#eef4ff;
  --panel1:#121a2a; --panel2:#0f1726;

  --ink1: var(--text); --ink2:#d7deee; --muted:#b8c6d8;

  --primary:#ffc242;
  --accent:#7cc9ff;
  --ok:#2fd27d; --warn:#ffd27f; --danger:#ff6b6b;

  /* Alias compat */
  --panel: var(--panel1);
  --panel-2: var(--panel2);
  --ink: var(--ink1);
  --muted-2: color-mix(in srgb, var(--muted) 80%, var(--ink1) 20%);
  --accent-2: var(--accent);

  /* Fuentes (theme.js puede overescribir) */
  --font-base: 'Press Start 2P', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --font-display: var(--font-base);
  --font: var(--font-base);

  /* Derivados */
  --stroke: rgba(255,255,255,.10);
  --shadow: 0 12px 28px rgba(0,0,0,.35);
  --r: 16px; --gap: 16px; --pad: 16px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --decor-glow: 0 0 18px color-mix(in srgb, var(--primary) 25%, transparent);

  /* Gradientes botones */
  --btn1: color-mix(in srgb, var(--primary) 92%, white 8%);
  --btn2: color-mix(in srgb, var(--primary) 75%, black 25%);
  --btnBorder: color-mix(in srgb, var(--primary) 30%, black 70%);
  --btnShadow: color-mix(in srgb, var(--primary) 55%, black 45%);

  --btnOk1:        color-mix(in srgb, var(--ok) 90%, white 10%);
  --btnOk2:        color-mix(in srgb, var(--ok) 78%, black 22%);
  --btnOkBorder:   color-mix(in srgb, var(--ok) 30%, black 70%);
  --btnOkShadow:   color-mix(in srgb, var(--ok) 55%, black 45%);

  --btnWarn1:      color-mix(in srgb, var(--warn) 90%, white 10%);
  --btnWarn2:      color-mix(in srgb, var(--warn) 70%, black 30%);
  --btnWarnBorder: color-mix(in srgb, var(--warn) 30%, black 70%);
  --btnWarnShadow: color-mix(in srgb, var(--warn) 55%, black 45%);

  --btnDanger1:      color-mix(in srgb, var(--danger) 90%, white 10%);
  --btnDanger2:      color-mix(in srgb, var(--danger) 70%, black 30%);
  --btnDangerBorder: color-mix(in srgb, var(--danger) 30%, black 70%);
  --btnDangerShadow: color-mix(in srgb, var(--danger) 55%, black 45%);

  /* Cards */
  --card-foot-h: 86px;

  /* Táctil mínimo */
  --tap: 44px;
}

/* ============================================================
   FALLBACK para navegadores sin color-mix() (Safari < 16.4, etc.)
   Valores pre-calculados basados en el tema oscuro default.
   ============================================================ */
@supports not (background: color-mix(in srgb, red 50%, blue 50%)) {
  :root {
    --btn1: #ffc95c;
    --btn2: #bf9132;
    --btnBorder: #4d3a1a;
    --btnShadow: #805e1e;

    --btnOk1: #5ce69e;
    --btnOk2: #249e5e;
    --btnOkBorder: #0e3d24;
    --btnOkShadow: #196a3f;

    --btnWarn1: #ffe09e;
    --btnWarn2: #bf9e5f;
    --btnWarnBorder: #4d3f26;
    --btnWarnShadow: #806a40;

    --btnDanger1: #ff8a8a;
    --btnDanger2: #bf5050;
    --btnDangerBorder: #4d2020;
    --btnDangerShadow: #803535;

    --muted-2: #90a0c0;
    --decor-glow: 0 0 18px rgba(255,194,66,.25);

    --stroke: rgba(255,255,255,.10);
  }
}


/* -----------------
   1. FUENTES LOCALES
   ----------------- */
/* @font-face Press Start 2P removido — cargado via HTML <link> con subset */
/* @font-face Alfa Slab One removido — cargado via HTML <link> con subset */
/* @font-face Carter One removido — cargado via HTML <link> con subset */

/* ---- Reset / Base ---- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100%; }
html, body{ overflow-x:hidden; }
html { -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.4;
  letter-spacing:.2px;
  color:var(--ink1);
  background:
    radial-gradient(120% 90% at 0% 0%,
      color-mix(in srgb, var(--panel2) 92%, black 8%) 0%,
      color-mix(in srgb, var(--panel2) 80%, black 20%) 40%,
      var(--bg) 100%
    ),
    var(--bg);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
img, svg, video, canvas{ max-width:100%; height:auto; }
.ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.break{ word-break:break-word; overflow-wrap:anywhere }
::selection{
  background:color-mix(in srgb, var(--accent) 28%, transparent);
  color:#fff;
}

/* ---- Utils ---- */
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
.row{ display:flex; align-items:center; gap:8px; min-width:0; }
.right{ text-align:right } .center{ text-align:center } .nowrap{ white-space:nowrap }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace }
.muted{ color:var(--muted) }
.small{ font-size:13px }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  font-size:13px;
  background:#132b3b; color:var(--muted); border:1px solid var(--stroke);
}
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- Header ---- */
.header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0;
  padding:calc(10px + var(--safe-top)) 14px 10px;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--stroke);
}
.brand{
  display:flex; align-items:center; gap:10px;
  cursor:pointer; min-width:0;
}
.brand .dot{
  width:10px; height:10px; background:var(--accent);
  border-radius:3px; box-shadow:0 0 14px var(--accent);
}
.title-sub{ font-size:13px; color:var(--muted); }
.brand > div > div:first-child,
h1,h2,h3,h4,
.title-sub,
.tabs-admin .tab,
.k-card .price{
  font-family:var(--font-display);
}

/* ---- Container & grid ---- */
.container{ max-width:1120px; margin:0 auto; padding:16px }
.grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  min-width:0;
}

/* ---- Buttons ---- */
.btn{
  border:2px solid var(--btnBorder);
  background:linear-gradient(var(--btn1), var(--btn2));
  color:#1a1200; font-weight:700;
  padding:10px 14px; border-radius:12px;
  cursor:pointer; box-shadow:0 6px 0 var(--btnShadow), 0 10px 18px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  white-space:nowrap; user-select:none; touch-action:manipulation;
  max-width:100%; min-height:var(--tap);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn[disabled], .btn:disabled{
  opacity:.55; cursor:not-allowed; transform:none;
  box-shadow:0 0 0 #000, 0 6px 12px rgba(0,0,0,.15);
}
.btn.small{ font-size:13px; padding:8px 12px; min-height:var(--tap); }
.btn.ghost{
  border:2px solid color-mix(in srgb, var(--ink1) 25%, transparent);
  background:var(--panel2); color:var(--ink1); box-shadow:none;
}
.btn.tiny{
  padding:6px 10px; font-size:11px; line-height:1.2;
  border-radius:10px; min-height:var(--tap);
}

/* ---- Tabs ---- */
.tabs{
  display:flex; gap:12px; flex-wrap:wrap;
  align-items:flex-start; min-width:0;
}
.btn.tab{
  border:2px solid color-mix(in srgb, var(--ink1) 25%, transparent);
  background:var(--panel2); color:var(--ink1); box-shadow:none;
  min-height:44px; line-height:1; max-width:100%;
}
.btn.tab .ellipsis{ max-width:100%; }
.btn.tab.is-active{
  border:2px solid var(--btnBorder);
  background:linear-gradient(var(--btn1), var(--btn2)); color:#1a1200;
  box-shadow:0 6px 0 var(--btnShadow), 0 10px 18px rgba(0,0,0,.35);
}

/* ---- Tabs Admin ---- */
.tabs-admin{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;
  align-items:flex-start; min-width:0;
}
.tabs-admin .tab{
  padding:10px 12px; border-radius:12px;
  border:2px solid color-mix(in srgb, var(--ink1) 18%, transparent);
  background:var(--panel1); color:var(--ink1); cursor:pointer; max-width:100%;
}
.tabs-admin .tab.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent) inset;
}

/* ---- Cards ---- */
.card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  min-height:260px;
  padding:16px 16px calc(var(--card-foot-h) + 16px);
  border:2px solid var(--primary); border-radius:14px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--panel2) 85%, black 15%),
    var(--panel1)
  );
  box-shadow:var(--shadow), inset 0 0 0 2px rgba(255,255,255,.06);
  min-width:0;
}
.card h3{
  margin:0 0 6px;
  font-size:clamp(16px,2.2vw,22px);
  line-height:1.2;
  word-break:break-word;
  font-family:var(--font-display);
}
.price{
  color:var(--primary); font-weight:900;
  font-size:clamp(15px,2vw,19px);
}
.card .price s{ opacity:.6; margin-right:6px; }
.card .price .tag{
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
}
.icon{
  width:72px; height:72px; image-rendering:pixelated;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.1);
  background:#131d30;
}

/* Card contenido extra */
.card .scroll-body{
  max-height: calc(100% - var(--card-foot-h) - 60px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.card details,
.card .ing-acc,
.card .ing-list,
.card .k-chips,
.card .desc,
.card ul{
  margin-bottom: calc(var(--card-foot-h) + 8px);
}

/* Pie fijo */
.card .row:last-child{
  position:absolute; left:16px; right:16px; bottom:16px;
  display:flex; align-items:center; gap:12px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08); min-width:0;
}
.card .row:last-child .row{
  margin-left:auto; display:flex; gap:10px;
  flex-wrap:wrap; justify-content:flex-end; min-width:0;
}
.card .row:last-child .btn{ min-width:122px }

/* Estado seleccionada */
.card.is-selected{
  border-color: color-mix(in srgb, var(--ok) 60%, white 40%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 25%, transparent) inset, var(--shadow);
}
.card.is-selected .power-fill{ width:100% !important; }
.card .selected-pill{
  display:none;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--ok) 35%, black 65%);
  background:linear-gradient(180deg, color-mix(in srgb, var(--ok) 20%, transparent), transparent);
  color:var(--ok);
  font-weight:800; font-size:12px; white-space:nowrap;
}
.card.is-selected .selected-pill{ display:inline-flex; gap:6px; align-items:center; }
.card.is-selected .selected-pill::before{ content:"✓"; font-weight:900; }

/* ---- Panel ---- */
.panel{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--panel2) 85%, black 15%),
    var(--panel1)
  );
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:16px; margin-bottom:16px;
  min-width:0;
}

/* ---- Campos ---- */
.field{ margin:10px 0; min-width:0; }
label{
  display:block; margin-bottom:6px;
  color:var(--muted); font-size:13px;
}
input[type=text],
input[type=number],
input[type=date],
input[type=datetime-local],
input[type=url],
input[type=tel],
select,
textarea{
  width:100%; padding:12px;
  border-radius:10px; border:1px solid var(--stroke);
  background:color-mix(in srgb, var(--panel2) 90%, black 10%);
  color:var(--ink1);
  font-size:16px;
}
textarea{ min-height:80px; }
.hr{ height:1px; background:var(--stroke); margin:12px 0; }
input:-webkit-autofill{
  -webkit-text-fill-color: var(--ink1);
  -webkit-box-shadow: 0 0 0px 1000px color-mix(in srgb, var(--panel2) 90%, black 10%) inset;
  box-shadow: 0 0 0px 1000px color-mix(in srgb, var(--panel2) 90%, black 10%) inset;
}

/* ---- Listas limpias ---- */
.ul-clean{
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:9px 10px; align-items:center; min-width:0;
}
.ul-clean input[type=checkbox]{
  width:18px; height:18px;
  accent-color:var(--primary);
}
.ul-clean .tag{
  font-size:13px; color:var(--muted-2);
}

/* ===== Modal ===== */
.modal{
  position:fixed; inset:0;
  display:none; place-items:center;
  background:rgba(0,0,0,.55); z-index:70;
  overscroll-behavior:contain;
  contain:layout paint;
}
.modal.open{ display:grid; }
.modal-card{
  width:min(760px,94vw);
  max-height:86vh;
  overflow:auto;
  background:color-mix(in srgb, var(--panel1) 96%, black 4%);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:var(--shadow);
  -webkit-overflow-scrolling:touch;
}
.modal-head{
  padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--stroke);
}
.modal-body{ padding:14px; }
.modal-foot{
  position:sticky; bottom:0;
  padding:12px;
  background:color-mix(in srgb, var(--panel1) 96%, black 4%);
  border-top:1px solid var(--stroke);
}
.total-bar{
  display:flex; align-items:center; gap:12px;
  justify-content:space-between;
  flex-wrap:wrap; row-gap:8px;
}
.total{ color:var(--primary); font-weight:900; font-size:18px; }

/* Scroll interno seguro */
#modal .modal-body,
#cartModal #cartBody{
  max-height: calc(100vh - 210px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* >>> Chips “Incluye” */
.k-chips{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.k-chip{
  font-size:13px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  min-height:34px; display:inline-flex; align-items:center;
}

/* ---- Toast ---- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; z-index:50;
  display:none; align-items:center; gap:10px;
  background:color-mix(in srgb, var(--panel1) 92%, black 8%);
  border:1px solid var(--stroke); padding:12px 14px;
  border-radius:12px; box-shadow:var(--shadow);
}
.toast.show{ display:flex; animation:pop .18s ease-out; }
@keyframes pop{
  from{ transform:translate(-50%,8px); opacity:.3 }
  to{ transform:translate(-50%,0); opacity:1 }
}

/* ---- Kanban genérico ---- */
.k-columns{
  display:grid; gap:16px;
  grid-template-columns:repeat(3,1fr);
  min-width:0;
}
.k-card{
  border:1px solid var(--stroke); border-radius:12px; padding:12px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--panel2) 82%, black 18%),
    color-mix(in srgb, var(--panel1) 92%, black 8%)
  );
  margin-bottom:10px; min-width:0;
}
.k-head .title{
  font-size:15px; margin-bottom:6px;
  font-family:var(--font-display);
}
.k-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.k-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.k-badge{
  background:#132b3b; border:1px solid var(--stroke);
  padding:2px 8px; border-radius:999px;
  font-size:13px; color:var(--muted);
}
.k-badge.ok{ background:#183a2a; }
.k-badge.warn{ background:#3a2f18; }

/* ---- Tablas ---- */
.table-wrap, .table-scroll{
  overflow:auto; -webkit-overflow-scrolling: touch;
  border:1px solid var(--stroke); border-radius:12px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--panel1) 92%, black 8%),
    color-mix(in srgb, var(--panel2) 86%, black 14%)
  );
}
.table-wrap table,
.table-scroll table{
  min-width:720px; border-collapse:collapse;
}
.k-table{
  width:100%; border-collapse:collapse; font-size:14px;
}
.k-table th,.k-table td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:middle;
}
.k-table th{
  text-align:left; color:var(--muted); white-space:nowrap;
}
.k-table td{ white-space:nowrap; }

/* ---- Happy Hour pill ---- */
#hhPill{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px; border-radius:999px;
  background:color-mix(in srgb,var(--panel1) 88%, black 12%);
  border:1px solid var(--stroke);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
#hhPill.on{
  border-color: color-mix(in srgb, var(--ok) 40%, black 60%);
}
#hhText{ font-weight:800; letter-spacing:.2px; }
#hhMsg{ color:var(--muted); }
[data-eta-text]{ font-variant-numeric: tabular-nums; }

/* ---- Historial ---- */
#tblHist.k-table th,
#tblHist.k-table td{
  white-space:nowrap; vertical-align:middle;
}
#tblHist .btn.small.ghost{
  padding:6px 8px; line-height:1; font-size:11px;
}

/* ---- PANEL TEMAS ---- */
#panel-temas{ min-width:0; }
#panel-temas .theme-list{
  list-style:none; padding:0; margin:12px 0 0;
  display:flex; flex-direction:column; gap:10px; min-width:0;
}
#panel-temas .theme-item{
  display:grid; grid-template-columns:16px 1fr auto; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--stroke);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--panel2) 70%, black 30%),
    color-mix(in srgb, var(--panel1) 85%, black 15%)
  );
  border-radius:12px; min-width:0;
}
#panel-temas .theme-item .dot{
  width:12px; height:12px; border-radius:3px;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
}
#panel-temas .theme-item .title{
  min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
#panel-temas .theme-item .btn{ justify-self:end; }
#panel-temas .theme-item.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent) inset;
}
@media (max-width:420px){
  #panel-temas .theme-item{ grid-template-columns:16px 1fr; }
  #panel-temas .theme-item .btn{ grid-column:1/-1; justify-self:end; }
}

/* ---- Preferencias, scrollbars, print ---- */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:8px; border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-track{ background:transparent }
*{ -webkit-tap-highlight-color: rgba(255,255,255,.08); }
@media print{
  body{ background:#fff; color:#000; }
  .header, .side, .toast, .modal{ display:none !important; }
  .card{ box-shadow:none; background:#fff; border-color:#000; }
}

/* FIX interacción panel-temas */
#panel-temas, #panel-temas .card { overflow: visible; }
#panel-temas::before,
#panel-temas::after,
#panel-temas .card::before,
#panel-temas .card::after{
  pointer-events:none !important;
}
#panel-temas select,
#panel-temas button{
  position:relative; z-index:5; pointer-events:auto;
}

/* ===== Maridaje sugerido chips ===== */
#pairBox{
  display:flex; flex-wrap:wrap; gap:6px; min-width:0;
}
#pairBox .btn.tiny{
  border:1.5px solid color-mix(in srgb, var(--ink1) 22%, transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--panel2) 88%, black 12%),
    color-mix(in srgb, var(--panel1) 92%, black 8%)
  );
  color:var(--ink1);
  border-radius:999px; padding:6px 10px;
  font-size:13px; line-height:1.2;
  box-shadow:none; width:auto; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#pairBox .btn.tiny:hover{
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
#pairBox .btn.tiny:active{ transform:none; }
#pairBox .btn.tiny:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset:2px; box-shadow:none;
}
@supports (-webkit-touch-callout: none){
  #pairBox .btn.tiny{ font-size:14px; padding:8px 10px; }
}

/* ===== Barra de carrito fija ===== */
#cartBar{
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel1) 92%, black 8%),
    color-mix(in srgb, var(--panel2) 90%, black 10%)
  );
  border: 1px solid var(--stroke);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
body.has-cart{ padding-bottom:86px; }
#cartBar .sp{ flex:1 1 auto; }
#cartBarTotal{ color:var(--primary); font-weight:900; }
#openCart{ margin-left:auto; }

/* ===== Mission Bar (Misión Minis 3/3) ===== */
#missionBarWrapper{
  margin: 10px 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel1) 92%, black 8%),
    color-mix(in srgb, var(--panel2) 88%, black 12%)
  );
  border: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#missionBarTop{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#missionBarLabel{
  font-size: 13px;
  font-weight: 800;
  color: var(--ink1);
}
#missionBarHint{
  font-size: 12px;
  color: var(--muted);
}
#missionBarTrack{
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
#missionBarFill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #ff9f0a);
  box-shadow: 0 0 10px rgba(255,194,66,.7);
  transition: width .25s ease;
}

/* ===== Packs de íconos por tema ===== */
[data-theme-icon]{
  width:128px; height:128px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.08);
  background:color-mix(in srgb, var(--panel2) 86%, black 14%);
}
[data-theme-image]{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Imagen producto */
.card .media{
  display:flex; align-items:center; justify-content:center;
  height:140px; margin-top:4px;
}
.icon-img{
  width:128px; height:128px;
  max-width:180px; max-height:130px;
  image-rendering:pixelated;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.08);
  background:color-mix(in srgb, var(--panel2) 86%, black 14%);
  display:block;
}
@media (max-width:520px){
  .card .media{ height:120px; }
  .icon-img{
    width:112px; height:112px;
    max-width:160px; max-height:112px;
  }
}

/* ===== Responsive varios ===== */
@media (max-width:640px){
  .card{
    padding:14px 14px calc(var(--card-foot-h) + 14px);
  }
  .card .row:last-child{
    left:14px; right:14px; bottom:14px; gap:10px;
  }
  .card .row:last-child .btn{
    min-width:calc(50% - 5px);
  }
  .card h3{ font-size:18px; line-height:1.15; }
}
@media (max-width:520px){
  .container{ padding:12px; }
  .grid{
    gap:12px;
    grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  }
  .card{
    padding:12px 12px calc(var(--card-foot-h) + 12px);
    border-radius:12px; min-height:220px;
  }
  .card h3{
    font-size:clamp(16px,5.2vw,20px);
    line-height:1.15; margin:0 0 6px;
  }
  .card .row:last-child{
    left:12px; right:12px; bottom:12px; gap:8px;
  }
  .card .row:last-child .row{
    gap:6px; flex-wrap:nowrap; justify-content:flex-end;
  }
  .card .row:last-child .btn{
    min-width:auto; padding:10px 12px;
  }
  .btn{ padding:10px 12px; border-radius:12px; }
  .btn.small{ font-size:12px; padding:8px 10px; }
}
@media (max-width:370px){
  .card .row:last-child{
    flex-direction:column; align-items:stretch;
  }
  .card .row:last-child .row{
    width:100%; justify-content:space-between;
    gap:8px; flex-wrap:wrap;
  }
  .card .row:last-child .btn{
    flex:1 1 48%;
  }
}

/* ---- Kiosko sidebars ---- */
@media (min-width:1280px){
  body.has-sidebars main.container{
    max-width:none;
    margin-left:320px; margin-right:320px;
  }
  .side{ display:flex; }
  #cards{ min-height:420px; }
}
@media (max-width:1279.98px){
  .side{ display:none !important; }
  body.has-sidebars main.container{
    margin-left:auto; margin-right:auto;
  }
}

/* ---- Cocina V2 (lectura grande, scoped a .board) ---- */
.board{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(5,minmax(0,1fr));
}
/* Todo lo de cocina va scoped dentro de .board
   para no pisar estilos globales de kiosko/admin */
.board .col{
  font-size:14px;
}
.board .col h2{
  font-size:16px;
}
.board .order{
  font-size:13px;
}
.board .order-header{
  font-size:12px;
}
.board .order-id{
  font-size:11px;
}
.board .order-name{
  font-size:13px;
}
.board .order-items > li{
  font-size:12px;
}
.board .order-items ul.ing{
  font-size:11px;
}
.board .notes{
  font-size:11px;
}
/* Importante: scoped para no romper .total del carrito/modales */
.board .total{
  font-size:15px;
}
.board .order-actions .btn{
  font-size:11px;
  padding:6px 10px;
}

/* responsive columnas cocina */
@media (max-width:1100px){
  .board{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:720px){
  .board{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  .board{ grid-template-columns:1fr; }
}

/* ===== Tabs pegajosas ===== */
.tabs-sticky{
  position:sticky;
  top:calc(48px + var(--safe-top));
  z-index:25;
  padding-top:8px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(4px);
}

/* ===== Badge modo prueba ===== */
.badge{
  position:fixed; right:8px; bottom:8px; z-index:40;
  background:#111a; border:1px solid #345; color:#9fe;
  padding:4px 8px; border-radius:6px;
  font:12px/1.2 system-ui;
}

/* ===== Badge identidad (datos de cliente listos) ===== */
.id-badge{
  position: fixed;
  right: 10px;
  bottom: 60px;
  z-index: 60;
  background: color-mix(in srgb, var(--panel1) 90%, black 10%);
  border-color: color-mix(in srgb, var(--ok) 30%, black 70%);
  color: var(--ok);
  box-shadow: 0 8px 18px rgba(0,0,0,.4);
  font-size: 11px;
}

/* ===== Focus-visible global ===== */
:where(button, [role="button"], .btn, a, input, select, textarea):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}

/* ===== Fallback color-mix ===== */
@supports not (color: color-mix(in srgb, black 50%, white 50%)) {
  :root{
    --btn1: var(--primary);
    --btn2: #ad7c00;
    --btnBorder: #5a3b00;
    --btnShadow: #7a5200;

    --btnOk1: var(--ok);
    --btnOk2: #1e9659;
    --btnOkBorder: #0f5533;
    --btnOkShadow: #177447;

    --btnWarn1: var(--warn);
    --btnWarn2: #bb8e2a;
    --btnWarnBorder: #6a5010;
    --btnWarnShadow: #8a6a20;

    --btnDanger1: var(--danger);
    --btnDanger2: #b13a3a;
    --btnDangerBorder: #6b1f1f;
    --btnDangerShadow: #8a2c2c;
  }
  .panel{
    background: linear-gradient(180deg, #0f1726, #121a2a);
  }
  .tag, .k-badge { background:#132b3b; }
  .toast, .modal-foot, .modal-card, #cartBar {
    background:var(--panel1);
  }
  details.ing-acc{ background: var(--panel1); }
  .power-track{ background: rgba(255,255,255,.10); }
  .power-fill{ background: linear-gradient(90deg, var(--primary), #cc7a00); }
  #hhPill{ background: var(--panel1); }
}

/* ===== Hover seguro táctil ===== */
@media (hover:none){
  .btn:hover{ transform:none; }
}

/* ===== Micro performance ===== */
.header, .tabs-sticky, #cartBar{
  will-change:transform;
  contain:layout paint;
}
@media (prefers-reduced-motion: reduce){
  .power-fill{ transition:none; }
  .btn{
    box-shadow:0 6px 0 var(--btnShadow), 0 6px 12px rgba(0,0,0,.25);
  }
  #cartBar{
    box-shadow:0 10px 18px rgba(0,0,0,.28),
               inset 0 0 0 1px rgba(255,255,255,.04);
  }
}

/* ===== Sazonadores Papas Gajo UX ===== */
#seasonings{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:8px 10px;
  align-items:stretch;
  margin-top:6px;
}
#seasonings label{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
  min-height:36px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.05em;
  overflow:hidden;
}
#seasonings label::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 0% 0%, rgba(255,255,255,.15), transparent 60%);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
#seasonings input[type="radio"]{
  width:14px;
  height:14px;
  accent-color:var(--primary);
}
@media (hover:hover){
  #seasonings label:hover{
    border-color:color-mix(in srgb, var(--accent) 40%, transparent);
    background:rgba(255,255,255,.06);
    transform:translateY(-1px);
  }
}
#seasonings label:has(input[type="radio"]:checked){
  background:linear-gradient(90deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 60%, #ff9f0a 40%)
  );
  color:#111;
  border-color:color-mix(in srgb, var(--primary) 40%, black 60%);
  box-shadow:0 0 10px rgba(0,0,0,.55),
             0 0 14px color-mix(in srgb, var(--primary) 40%, transparent);
  font-weight:700;
  transform:translateY(-1px) scale(1.02);
}
#seasonings label:has(input[type="radio"]:checked)::before{
  opacity:1;
  transform:translate3d(10px, -6px, 0);
}
#seasonings label:has(input[type="radio"]:checked)::after{
  content:"★";
  position:absolute;
  top:4px;
  right:8px;
  font-size:11px;
  text-shadow:0 0 8px rgba(0,0,0,.6);
}
@supports not (selector(:has(*))){
  /* Fallback: al menos resaltar el texto del elegido */
  #seasonings input[type="radio"]:checked + span{
    color:var(--primary);
    font-weight:700;
    text-shadow:0 0 6px rgba(255,194,66,.7);
  }
}

/* ===== Power Bar (cards) ===== */
.power-bar{ user-select:none }
.power-track{
  width:100%; height:8px; border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,.10);
}
.power-fill{
  width:0%; height:100%;
  background:linear-gradient(90deg, var(--primary), #ff9f0a);
  transition:width .28s ease;
}

/* ===== Acordeón de ingredientes (cards) ===== */
details.ing-acc{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:8px 10px;
}
details.ing-acc > summary{
  list-style:none; cursor:pointer; display:block;
}
details.ing-acc > summary::-webkit-details-marker{ display:none }
details.ing-acc .ing-list{ margin:10px 0 0; padding-left:18px }
details.ing-acc .ing-list li{ margin:4px 0; color:var(--ink2); font-size:13px }

/* ===== Notify · Dopamine (match /shared/notify.js) ===== */
/* XP bubble compacta (si usas showXpBubble) */
.xp-bubble{
  position:fixed; left:50%; bottom:18%;
  transform:translate(-50%, 14px) scale(.96);
  background: radial-gradient(circle at 30% 30%, #fff7d0, #ffc242);
  color:#1a1400; padding:8px 14px; border-radius:999px;
  border:2px solid #b37700;
  box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 22px rgba(255,194,66,.6);
  font-weight:800; letter-spacing:.2px; z-index:10000; opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
.xp-bubble.show{ opacity:1; transform:translate(-50%, 0) scale(1); }

/* toast-xp (+XP / logro) */
.toast-xp{
  position: fixed; left: 50%; bottom: 16%;
  transform: translate(-50%, 20px) scale(0.96);
  background: radial-gradient(circle at 30% 30%, #fff7d0, #ffc242);
  color:#1a1400; padding:8px 14px; border-radius:999px;
  border:2px solid #b37700;
  box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 22px rgba(255,194,66,.6);
  font-weight:800; letter-spacing:.2px; z-index:10000; opacity:0;
  transition: transform .22s ease, opacity .22s ease;
}
.toast-xp.show{ opacity:1; transform:translate(-50%, 0) scale(1); }
.toast-xp b{ font-size:14px; }

/* Partículas para toast-xp */
.toast-xp .xp-spark, .xp-spark{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, #fff, #ffd966 60%, #b37700 100%);
  animation: spark-move var(--life,700ms) ease-out forwards;
  pointer-events:none; filter: drop-shadow(0 0 6px rgba(255,200,60,.9));
}
@keyframes spark-move{
  from{ opacity:1; transform:translate(0,0) scale(1) }
  to{ opacity:0; transform:translate(calc(var(--dx)*70px), calc(var(--dy)*70px)) scale(.5) }
}

/* Tarjeta foil para regalos/logros grandes */
.toast-foil{
  position: fixed; left: 50%; bottom: 12%;
  transform: translate(-50%, 26px) scale(.98);
  width: min(92vw, 360px);
  border-radius: 16px; overflow: hidden; opacity: 0;
  transition: transform .24s ease, opacity .24s ease; z-index: 10000;
  background: #0b1220; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
}
.toast-foil.show{ opacity:1; transform:translate(-50%,0) scale(1) }
.toast-foil .foil-inner{ position:relative; padding:14px 14px 12px }
.toast-foil .foil-title{ font-weight:800; font-size:16px; color:#ffd966 }
.toast-foil .foil-body{ font-size:13px; color:#dbe4ff; margin-top:4px }
.toast-foil .foil-action{ margin-top:10px }

/* Brillo animado holográfico */
.toast-foil .foil-shine{
  position:absolute; inset:0;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0.02) 0%,
      rgba(255,255,255,0.06) 15%,
      rgba(255,215,130,0.12) 30%,
      rgba(255,255,255,0.06) 45%,
      rgba(255,255,255,0.02) 60%),
    radial-gradient(120px 80px at -10% -20%, rgba(255,214,90,.28), transparent 60%),
    radial-gradient(120px 80px at 110% 120%, rgba(255,180,255,.2), transparent 60%);
  mix-blend-mode: screen; pointer-events:none; animation: foil-pan 2.4s linear infinite; opacity:.85;
}
@keyframes foil-pan{
  0%{ transform:translateX(-20%) }
  50%{ transform:translateX(20%) }
  100%{ transform:translateX(-20%) }
}

/* ==========================
   Screensaver · Arcade Kiosko
   ========================== */

#screensaverLayer{
  position: fixed;
  inset: 0;
  z-index: 11000; /* por encima de modales, toasts, etc. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 0%,
      color-mix(in srgb, var(--panel2) 90%, black 10%) 0%,
      color-mix(in srgb, var(--bg) 85%, black 15%) 40%,
      #000 100%
    );
  color: var(--ink1);
  text-align: center;
  touch-action: manipulation;
}

#screensaverLayer.on{
  display: flex;
}

#screensaverLayer .ss-content{
  max-width: 720px;
  width: 100%;
  padding: 24px 18px;
  border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--primary) 45%, black 55%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--panel1) 90%, black 10%),
      color-mix(in srgb, var(--panel2) 92%, black 8%)
    );
  box-shadow:
    0 18px 40px rgba(0,0,0,.7),
    0 0 26px color-mix(in srgb, var(--primary) 30%, transparent);
  position: relative;
  overflow: hidden;
}

/* Borde glow tipo neón */
#screensaverLayer .ss-content::before{
  content: "";
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(
      from 140deg,
      rgba(255,194,66,.0),
      rgba(255,194,66,.85),
      rgba(124,201,255,.85),
      rgba(191,90,255,.7),
      rgba(255,194,66,.0)
    );
  opacity: .22;
  mix-blend-mode: screen;
  pointer-events: none;
}

#screensaverLayer .ss-inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

/* Título principal — grande para Elo */
#screensaverLayer .ss-title{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff7d0;
  text-shadow:
    0 0 10px rgba(255,194,66,.9),
    0 0 20px rgba(255,194,66,.7),
    0 0 32px rgba(255,194,66,.55);
}

/* Subtítulo / tagline */
#screensaverLayer .ss-sub{
  font-size: clamp(15px, 1.9vw, 18px);
  color: var(--muted);
  max-width: 580px;
}

/* CTA grande tipo botón (pero toda la pantalla ya es tap) */
#screensaverLayer .ss-cta{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--primary) 45%, black 55%);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 90%, white 10%),
    color-mix(in srgb, var(--primary) 70%, black 30%)
  );
  box-shadow:
    0 0 18px rgba(255,194,66,.8),
    0 10px 24px rgba(0,0,0,.7);
  color: #1a1200;
  font-weight: 800;
  font-size: clamp(16px, 2vw, 19px);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#screensaverLayer .ss-cta-icon{
  font-size: 20px;
}

/* Texto inferior “screensaver” / branding */
#screensaverLayer .ss-foot{
  margin-top: 12px;
  font-size: 12px;
  color: color-mix(in srgb, var(--muted) 80%, #fff 20%);
}

/* Flecha / indicador de toque en la parte baja (para Elo) */
#screensaverLayer .ss-hint{
  position: absolute;
  inset-inline: 0;
  bottom: 26px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  font-size: 13px;
  color: color-mix(in srgb, var(--muted) 75%, #fff 25%);
}
#screensaverLayer .ss-hint-icon{
  margin-left: 6px;
  font-size: 18px;
}

/* Animaciones suaves */
@keyframes ss-pulse{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.04); opacity:0.9; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes ss-breathe{
  0%{ opacity:.65; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-4px); }
  100%{ opacity:.65; transform:translateY(0); }
}

#screensaverLayer .ss-cta{
  animation:ss-pulse 1.7s ease-in-out infinite;
}
#screensaverLayer .ss-hint{
  animation:ss-breathe 1.8s ease-in-out infinite;
}

/* Modo sin animaciones */
@media (prefers-reduced-motion: reduce){
  #screensaverLayer .ss-cta,
  #screensaverLayer .ss-hint{
    animation:none;
  }
}

/* ====== Modal kiosko Seven (arcade) ====== */
#modal.k-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(255, 194, 66, 0.18), transparent 55%),
              rgba(0, 0, 0, 0.82);
  z-index: 9999;
}

#modal.k-modal.open {
  display: flex;
}

#modal .k-modal-panel {
  background: #050816;
  border-radius: 18px;
  padding: 14px 14px 12px;
  width: 92%;
  max-width: 420px;
  border: 2px solid #ffc242;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
  font-size: 14px;
}

#modal .k-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#modal .k-modal-title {
  font-family: "Press Start 2P", system-ui;
  font-size: 13px;
  text-transform: uppercase;
  color: #fffbeb;
}

#modal .modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  padding-right: 4px;
}

#modal .k-modal-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  padding-top: 6px;
}

#modal .k-total {
  font-size: 13px;
  color: #e5e7eb;
}

#modal .k-total span {
  font-weight: 700;
  color: #ffc242;
}

/* Ajustes de campos internos del modal */
#modal .field {
  margin-bottom: 8px;
}

#modal .field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  display: block;
  margin-bottom: 2px;
}

#modal .field textarea,
#modal .field input[type="number"] {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: #020617;
  color: #e5e7eb;
  font-size: 13px;
  padding: 6px 8px;
  box-sizing: border-box;
}

#modal .field textarea {
  min-height: 60px;
  resize: vertical;
}

/* Chips e inputs del modal */
#modal .k-chips .k-chip {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.7);
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
}

/* Sazonadores dentro del modal: respeta el highlight global pero alineado al layout del modal */
#modal #seasonings{
  margin-top:6px;
}
#modal #seasonings label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-right: 0;
  font-size: 12px;
  /* importante: no redefinir background/border aquí para no matar el :has() global */
}

/* Refuerzo explícito del seleccionado dentro del modal (por si la jerarquía CSS cambia) */
#modal #seasonings label:has(input[type="radio"]:checked){
  background:linear-gradient(90deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 60%, #ff9f0a 40%)
  );
  color:#111;
  border-color:color-mix(in srgb, var(--primary) 40%, black 60%);
  box-shadow:0 0 10px rgba(0,0,0,.55),
             0 0 14px color-mix(in srgb, var(--primary) 40%, transparent);
  font-weight:700;
}

.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.03) 100%),
    radial-gradient(circle at top left, rgba(255,194,66,.10) 0%, rgba(255,194,66,0) 38%);
  box-shadow: 0 14px 30px rgba(0,0,0,.50);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease,
    filter .16s ease;
}

.home-card:hover {
  transform: translateY(-4px) scale(1.012);
  border-color: rgba(255,194,66,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.04) 100%),
    radial-gradient(circle at top left, rgba(255,194,66,.18) 0%, rgba(255,194,66,0) 42%);
  box-shadow:
    0 20px 38px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,194,66,.08) inset;
}

.home-card:active {
  transform: translateY(-1px) scale(.988);
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
}

.home-card:focus-visible {
  outline: none;
  border-color: rgba(255,194,66,.65);
  box-shadow:
    0 0 0 3px rgba(255,194,66,.18),
    0 20px 38px rgba(0,0,0,.62);
}

.home-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255,194,66,0);
  transition: box-shadow .16s ease;
}

.home-card:hover::after,
.home-card:focus-visible::after {
  box-shadow: 0 0 0 1px rgba(255,194,66,.10) inset;
}

.home-card h3 {
  margin: 0;
  transition: color .16s ease, text-shadow .16s ease;
}

.home-card:hover h3 {
  color: #ffd36a;
  text-shadow: 0 0 12px rgba(255,194,66,.16);
}

.home-card .meta {
  color: #dbe4ff;
  opacity: .96;
  line-height: 1.2;
}

.home-card .actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.home-card .btn {
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.home-card:hover .btn {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,.38);
  filter: brightness(1.03);
}

.home-card .home-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  margin: 4px 0 2px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at center, rgba(255,194,66,.09) 0%, rgba(255,194,66,0) 46%),
    rgba(255,255,255,.03);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.home-card:hover .home-media {
  transform: scale(1.03);
  border-color: rgba(255,194,66,.22);
  background:
    radial-gradient(circle at center, rgba(255,194,66,.15) 0%, rgba(255,194,66,0) 52%),
    rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,194,66,.05);
}



/* ============================================================
   prefers-reduced-motion: mantiene el look arcade sin movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Las cards mantienen su estilo pero sin animacion */
  .home-card:hover {
    transform: none !important;
  }
  .home-card:active {
    transform: none !important;
  }

  /* Navegacion sin sticky animado */
  .nav {
    position: relative !important;
  }
  .topbar {
    position: relative !important;
  }

  /* Sin blur animado en fondos (costoso en GPU) */
  .nav, .topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* CRT scanlines desactivadas */
  .crt::before, .crt::after {
    display: none !important;
  }
  .screenGlow {
    animation: none !important;
    opacity: 0.3 !important;
  }

  /* Sin parallax en fondos gradient */
  body::before, body::after {
    animation: none !important;
  }
}


/* ============================================================
   Skeleton Screens — Pixel Art (estilo arcade 8-bit)
   ============================================================ */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  padding: 12px;
}

.skeleton-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
}

.skeleton-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(255,194,66,.12) 0%,
    rgba(255,194,66,.06) 30%,
    rgba(255,194,66,.12) 60%,
    rgba(255,194,66,.06) 100%
  );
  background-size: 200% 200%;
  animation: pixel-shimmer 2.2s ease-in-out infinite;
}

.skeleton-line {
  height: 14px;
  border-radius: 7px;
  background: rgba(255,255,255,.06);
  animation: pixel-pulse 1.8s ease-in-out infinite;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-line:nth-child(2) { animation-delay: 0.15s; }
.skeleton-line:nth-child(3) { animation-delay: 0.3s; }

.skeleton-price {
  width: 45%;
  height: 18px;
  border-radius: 9px;
  background: rgba(255,194,66,.15);
  margin-top: auto;
  animation: pixel-pulse 1.8s ease-in-out infinite;
  animation-delay: 0.45s;
}

@keyframes pixel-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes pixel-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* Loading label estilo arcade */
.skeleton-label {
  text-align: center;
  padding: 18px 0 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: rgba(255,194,66,.5);
  letter-spacing: 2px;
  animation: pixel-pulse 2s ease-in-out infinite;
}


/* ============================================================
   View Transitions API — navegacion animada estilo arcade
   ============================================================ */
::view-transition-old(root) {
  animation: vt-fade-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}
::view-transition-new(root) {
  animation: vt-slide-up 0.25s cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes vt-fade-out {
  to { opacity: 0; transform: scale(0.97); }
}
@keyframes vt-slide-up {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Transicion mas rapida para modales */
.modal-transition::view-transition-old(root) {
  animation-duration: 0.15s;
}
.modal-transition::view-transition-new(root) {
  animation-duration: 0.18s;
}


/* ===== Stock badges en kiosko ===== */
.stock-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.stock-badge.out {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.4);
  color: #ef4444;
}
.stock-badge.low {
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.4);
  color: #f59e0b;
  animation: stockPulse 1.5s ease-in-out infinite;
}
@keyframes stockPulse {
  0%,100% { opacity: 1; }
  50% { opacity: .6; }
}

/* Producto agotado en catalogo */
.catalog-card.out-of-stock {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(.5);
}
.catalog-card.out-of-stock .btn {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.4) !important;
  cursor: not-allowed;
}