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

/* -----------------
   1. FUENTES LOCALES
   ----------------- */
@font-face{
  font-family:'Press Start 2P';
  font-style:normal; font-weight:400; font-display:swap;
  src:url("https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2") format("woff2");
}
@font-face{
  font-family:'Alfa Slab One';
  font-style:normal; font-weight:400; font-display:swap;
  src:url("https://fonts.gstatic.com/s/alfaslabone/v21/6NUQ8F2fN5-TSy3aZC-qLw.woff2") format("woff2");
}
@font-face{
  font-family:'Carter One';
  font-style:normal; font-weight:400; font-display:swap;
  src:url("https://fonts.gstatic.com/s/carterone/v20/q5uFpOE3QqiFRDO6R9Q.woff2") format("woff2");
}

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

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

/* ===== 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{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  transition:all .18s ease;
  min-height:34px;
  text-align:center;
}
#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);
  }
}
#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,.45),
             0 0 10px color-mix(in srgb, var(--primary) 40%, transparent);
  font-weight:700;
}
@supports not (selector(:has(*))){
  #seasonings input[type="radio"]:checked + span{
    color:var(--primary);
    font-weight:700;
  }
}

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