/* ────────────────────────────────────────────────────────────
   Comandas — Diseño minimalista estilo Apple
   ──────────────────────────────────────────────────────────── */
:root {
  --bg: #f7f4ec;
  --bg-2: #efe8d8;
  --card: #ffffff;
  --text: #001423;
  --text-2: #52616d;
  --text-3: #8a97a3;
  --navy: #001423;
  --mustard: #ffc244;
  --mustard-ink: #001423;
  --accent: #ffc244;
  --accent-hover: #f2b52c;
  --accent-soft: rgba(255, 194, 68, 0.16);
  --green: #1f9d55;
  --green-soft: rgba(31, 157, 85, 0.12);
  --orange: #f59e0b;
  --orange-soft: rgba(245, 158, 11, 0.14);
  --red: #e03e2f;
  --red-soft: rgba(224, 62, 47, 0.10);
  --purple: #7c5cbf;
  --purple-soft: rgba(124, 92, 191, 0.12);
  --teal: #0ea5a0;
  --teal-soft: rgba(14, 165, 160, 0.12);
  --border: rgba(0, 20, 35, 0.08);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0, 20, 35, 0.04), 0 8px 24px rgba(0, 20, 35, 0.06);
  --shadow-lg: 0 2px 4px rgba(0, 20, 35, 0.05), 0 16px 48px rgba(0, 20, 35, 0.12);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Inter", Helvetica, Arial, sans-serif;
  --sidebar-w: 240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent); color: #fff; }

/* ─── Tipografía ──────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; }
.t-title { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
.t-sub { color: var(--text-2); font-size: 14px; }
.muted { color: var(--text-3); font-size: 13px; }
.mono { font-variant-numeric: tabular-nums; }

/* ─── Layout ──────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--border);
  position: fixed; top: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column;
  z-index: 60;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand .logo {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--accent-soft);
  overflow: hidden;
}
.sidebar-brand .logo img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-brand .bname { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; line-height: 1.2; }
.sidebar-brand .bslug { font-size: 11px; color: var(--text-3); }

.nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
.nav-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 14px 12px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 1px 0;
  border-radius: 10px; color: var(--text);
  font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s ease;
  border: none; background: none; width: 100%; text-align: left;
  font-family: var(--font);
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-2); }
.nav-item:hover { background: rgba(0, 0, 0, 0.045); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active svg { color: var(--accent); }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--border); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.user-chip .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.user-chip .uname { font-size: 13px; font-weight: 600; line-height: 1.2; }
.user-chip .urole { font-size: 11px; color: var(--text-3); }
.user-chip .logout { margin-left: auto; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
.user-chip .logout:hover { color: var(--red); background: var(--red-soft); }

.main { flex: 1; margin-left: 0; padding: 28px 32px 48px; min-width: 0; }
.main.wide { margin-left: 0; }

/* ─── Menú móvil (hamburguesa) ───────────────────────────── */
.menu-toggle {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 70;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.menu-toggle svg { width: 22px; height: 22px; }
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
  .menu-toggle { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, 0.18); }
  .sidebar-overlay.show { display: block; }
  .main { margin-left: 0; padding: 18px 16px 30px; }
  .main.wide { margin-left: 0; }
  .page-head { align-items: flex-start; flex-direction: column; }
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .actions { display: flex; gap: 8px; }

/* ─── Tarjetas / grids ────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  border: 1px solid var(--border);
}
.card + .card { margin-top: 16px; }
.card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.card-sub { font-size: 13px; color: var(--text-2); margin-bottom: 14px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.stat-card { padding: 18px 20px; }
.stat-card .label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-card .value { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-card .delta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.stat-card .icon-badge { float: right; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.stat-card .icon-badge svg { width: 20px; height: 20px; }

/* ─── Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 18px; border-radius: 980px;
  font-size: 14px; font-weight: 600; font-family: var(--font);
  border: none; cursor: pointer; text-decoration: none;
  transition: all 0.15s ease; white-space: nowrap;
  background: var(--accent); color: #fff;
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-lg { padding: 12px 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-secondary { background: rgba(0, 0, 0, 0.06); color: var(--text); }
.btn-secondary:hover { background: rgba(0, 0, 0, 0.1); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #ff5147; }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: #40d663; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 12.5px; }
.btn svg { width: 16px; height: 16px; }

/* ─── Inputs ──────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.input, .select, .textarea {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 15px; font-family: var(--font); color: var(--text);
  background: rgba(255, 255, 255, 0.85);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 70px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.input-group { display: flex; gap: 8px; align-items: center; }
.input-group > svg { width: 16px; height: 16px; flex-shrink: 0; }
.input-group .input { flex: 1; }

/* ─── Tablas ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-3);
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.tbl td { padding: 11px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background 0.12s; }
.tbl tbody tr:hover { background: rgba(0, 0, 0, 0.02); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .actions-cell { text-align: right; white-space: nowrap; }

/* ─── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 980px;
  font-size: 12px; font-weight: 600;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-pending { background: var(--orange-soft); color: var(--orange); }
.b-preparing { background: var(--purple-soft); color: var(--purple); }
.b-ready { background: var(--teal-soft); color: var(--teal); }
.b-served { background: var(--accent-soft); color: var(--accent); }
.b-paid { background: var(--green-soft); color: var(--green); }
.b-cancelled { background: rgba(0, 0, 0, 0.07); color: var(--text-2); }
.b-web { background: var(--purple-soft); color: var(--purple); }
.b-pos { background: rgba(0, 0, 0, 0.06); color: var(--text-2); }
.b-delivery { background: var(--teal-soft); color: var(--teal); }
.b-takeaway { background: var(--orange-soft); color: var(--orange); }
.b-vip { background: #f5e8ff; color: var(--purple); }
.b-low { background: var(--red-soft); color: var(--red); }

/* ─── Toasts ──────────────────────────────────────────────── */
#toasts { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: rgba(29, 29, 31, 0.92); color: #fff;
  padding: 11px 18px; border-radius: 14px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.25s ease;
  display: flex; align-items: center; gap: 9px;
  max-width: 380px;
}
.toast.err { background: rgba(255, 59, 48, 0.95); }
.toast.ok { background: rgba(52, 199, 89, 0.95); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ─── Modal ───────────────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fade-in 0.18s ease;
}
.modal {
  background: var(--card); border-radius: 20px;
  box-shadow: var(--shadow-lg); width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto; padding: 26px;
  animation: modal-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.modal.lg { max-width: 720px; }
.modal h3 { font-size: 20px; margin-bottom: 4px; }
.modal .m-sub { color: var(--text-2); font-size: 13.5px; margin-bottom: 18px; }
.modal .m-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } }

/* ─── Login / Auth ────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #f5f5f7 0%, #eaeaf0 100%);
  padding: 24px;
}
.auth-card {
  width: 100%; max-width: 400px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
}
.auth-logo { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; overflow: hidden; background: var(--accent-soft); }
.auth-logo img { width: 100%; height: 100%; object-fit: cover; }
.auth-title { text-align: center; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.auth-sub { text-align: center; color: var(--text-2); font-size: 14px; margin: 4px 0 24px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; border-radius: 980px;
  background: #fff; border: 1px solid var(--border);
  font-size: 15px; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: var(--font);
  transition: all 0.15s;
}
.btn-google:hover { background: #f8f8fa; box-shadow: var(--shadow); }
.btn-google svg { width: 18px; height: 18px; }
.auth-error {
  background: var(--red-soft); color: var(--red);
  border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 500;
  margin-bottom: 14px; display: none;
}

/* ─── Cocina (kitchen) ────────────────────────────────────── */
.kitchen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.k-order {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; border-left: 4px solid var(--orange);
  display: flex; flex-direction: column; gap: 10px;
}
.k-order.preparing { border-left-color: var(--purple); }
.k-order .k-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.k-order .k-num { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.k-order .k-time { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.k-order .k-time svg { width: 13px; height: 13px; flex-shrink: 0; }
.k-order .k-items { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.k-order .k-items li { font-size: 14px; display: flex; gap: 8px; }
.k-order .k-items .qty { font-weight: 700; color: var(--accent); min-width: 20px; }
.k-order .k-items .note { color: var(--orange); font-size: 12.5px; }
.k-order .k-notes { font-size: 12.5px; color: var(--text-2); background: var(--bg); border-radius: 8px; padding: 7px 10px; }
.k-order .k-actions { display: flex; gap: 8px; margin-top: 2px; }
.k-order .k-customer { font-size: 12.5px; font-weight: 600; color: var(--purple); }

/* ─── Mesas (plano de sala estilo PDF) ───────────────────── */
.floor-wrap { display: flex; flex-direction: column; gap: 10px; }
.floor-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.floor-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.floor-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.floor-legend .lg::before { content: ''; width: 10px; height: 10px; border-radius: 50%; }
.floor-legend .lg-free::before { background: #94a3b8; }
.floor-legend .lg-ocupada::before { background: #f97316; }
.floor-legend .lg-preparando::before { background: #a855f7; }
.floor-legend .lg-lista::before { background: #14b8a6; }
.floor-zoom { display: flex; align-items: center; gap: 6px; }
.floor-zoom .zbtn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); color: var(--text-1); font-size: 17px; font-weight: 700;
  cursor: pointer; box-shadow: var(--shadow-sm); line-height: 1;
}
.floor-zoom .zbtn:hover { color: var(--accent); }
.floor-zoom .zval { min-width: 46px; text-align: center; font-weight: 700; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.floor-hint { font-size: 12.5px; color: var(--text-2); }
.floor-viewport { overflow: auto; border: 1px solid var(--border); border-radius: 16px; background: #f8fafc; max-height: 76vh; }
.floor-stage { position: relative; }
.floor-plan {
  position: relative; width: 1000px; height: 640px; transform-origin: 0 0;
  background-color: #f8fafc;
  background-image: linear-gradient(rgba(148,163,184,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.15) 1px, transparent 1px);
  background-size: 36px 36px;
}
.floor-plan::before { /* contorno de la sala */
  content: ''; position: absolute; inset: 14px;
  border: 2px solid rgba(100,116,139,.22); border-radius: 14px; pointer-events: none;
}
.floor-table {
  position: absolute; transform: translate(-50%, -50%); text-align: center;
  user-select: none; -webkit-user-select: none; touch-action: none;
  cursor: pointer;
}
.floor-table::before { /* anillo de estado */
  content: ''; position: absolute; inset: -5px; border-radius: 16px;
  box-shadow: 0 0 0 3px var(--ring, rgba(148,163,184,.4)); pointer-events: none;
  transition: box-shadow .15s;
}
.floor-table:hover::before { box-shadow: 0 0 0 3px var(--ring, rgba(148,163,184,.4)), 0 4px 14px rgba(15,23,42,.18); }
.floor-table.editable { cursor: grab; }
.floor-table.editable:active { cursor: grabbing; }
.floor-table.dragging { z-index: 60; opacity: .92; }
.floor-table.free { --ring: rgba(148,163,184,.45); }
.floor-table.ocupada { --ring: rgba(249,115,22,.6); }
.floor-table.preparando { --ring: rgba(168,85,247,.6); }
.floor-table.lista { --ring: rgba(20,184,166,.6); }
.floor-table .tbl-svg { display: block; margin: 0 auto; filter: drop-shadow(0 3px 5px rgba(15,23,42,.16)); }
.floor-table .t-label {
  margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--text-2); line-height: 1.3;
  background: rgba(255,255,255,.88); border-radius: 6px; padding: 1px 7px; display: inline-block;
  white-space: nowrap;
}
.floor-table .t-label .t-st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.floor-table.free .t-st { background: #94a3b8; }
.floor-table.ocupada .t-st { background: #f97316; }
.floor-table.preparando .t-st { background: #a855f7; }
.floor-table.lista .t-st { background: #14b8a6; }
.floor-table .t-total { font-weight: 800; color: var(--text-1); font-variant-numeric: tabular-nums; }
.floor-table .t-edit {
  position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card); color: var(--text-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow); z-index: 5;
}
.floor-table .t-edit:hover { color: var(--accent); }
/* Tableros estilo PDF: gris con bisel (rect) / madera (redondo) */
.floor-table .tbl-top { stroke-width: 2; }
.floor-table.rect .tbl-top { stroke: #B9C0CC; }
.floor-table.round .tbl-top { stroke: #B0763F; }
.floor-table .tbl-edge { fill: #C2C9D4; }
.floor-table .tbl-ink {
  fill: #464646; font-family: inherit;
  paint-order: stroke; stroke: rgba(255,255,255,.78); stroke-width: 2.5;
}
/* Sillas estilo PDF: 3 tonos marrón */
.floor-table .tbl-chair-back { fill: #B5774D; }
.floor-table .tbl-chair { fill: #CF8E58; }
.floor-table .tbl-chair-seat { fill: #E6A571; }

/* ─── Menú (picker) ───────────────────────────────────────── */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.menu-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; cursor: pointer; transition: all 0.15s;
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.menu-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.menu-card .m-img { height: 120px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; font-size: 44px; }
.menu-card .m-img img { width: 100%; height: 100%; object-fit: cover; }
.menu-card .m-body { padding: 12px 14px; flex: 1; }
.menu-card .m-name { font-weight: 600; font-size: 14.5px; }
.menu-card .m-desc { font-size: 12.5px; color: var(--text-2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-card .m-price { font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ─── Carrito ─────────────────────────────────────────────── */
.cart-panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; position: sticky; top: 20px; }
.cart-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.cart-item:last-child { border-bottom: none; }
.cart-item .ci-name { flex: 1; font-size: 14px; font-weight: 500; }
.cart-item .ci-price { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qty-ctl { display: flex; align-items: center; gap: 2px; }
.qty-ctl button {
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(0, 0, 0, 0.06); color: var(--text);
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
}
.qty-ctl button:hover { background: rgba(0, 0, 0, 0.12); }
.qty-ctl .q { min-width: 28px; text-align: center; font-weight: 700; font-size: 14px; }

/* ─── Wizard (registro) ───────────────────────────────────── */
.country-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 260px; overflow-y: auto; padding: 2px; }
.country-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: all 0.12s; font-size: 14px; font-weight: 500;
  background: #fff;
}
.country-opt:hover { border-color: var(--accent); }
.country-opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.country-opt .flag { font-size: 20px; }
.country-opt .cur { margin-left: auto; font-size: 12px; color: var(--text-3); font-weight: 600; }

/* ─── Seguimiento pedido (público) ────────────────────────── */
.track-steps { display: flex; gap: 0; margin: 26px 0; }
.track-step { flex: 1; text-align: center; position: relative; }
.track-step::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px;
  background: var(--bg-2);
}
.track-step:first-child::before { display: none; }
.track-step.done::before { background: var(--green); }
.track-step .ts-dot {
  width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 8px;
  background: var(--bg-2); display: flex; align-items: center; justify-content: center;
  color: var(--text-3); position: relative; z-index: 1; font-size: 14px; font-weight: 700;
}
.track-step.done .ts-dot { background: var(--green); color: #fff; }
.track-step.active .ts-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 5px var(--accent-soft); }
.track-step .ts-label { font-size: 12.5px; color: var(--text-2); font-weight: 600; }

/* ─── Público (pedido web) ────────────────────────────────── */
.pub-topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
}
.pub-topbar .logo { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.pub-topbar .logo img { width: 100%; height: 100%; object-fit: cover; }
.pub-topbar .name { font-weight: 700; font-size: 16px; }
.pub-body { max-width: 1080px; margin: 0 auto; padding: 22px 20px 60px; }
.cat-pills { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px; position: sticky; top: 57px; background: var(--bg); z-index: 30; }
.cat-pill {
  padding: 7px 16px; border-radius: 980px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--text);
  transition: all 0.12s;
}
.cat-pill:hover { border-color: var(--accent); }
.cat-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── Varios ──────────────────────────────────────────────── */
.empty { text-align: center; padding: 48px 20px; color: var(--text-3); }
.empty svg { width: 42px; height: 42px; margin-bottom: 10px; opacity: 0.4; }
.empty .e-title { font-weight: 600; color: var(--text-2); font-size: 15px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 980px; background: rgba(0, 0, 0, 0.05); font-size: 12.5px; font-weight: 600; }
.spin {
  width: 22px; height: 22px; border: 2.5px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.7s linear infinite; margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, #eee 25%, #f7f7f9 50%, #eee 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }
.link { color: var(--accent); cursor: pointer; text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }
.seg { display: inline-flex; background: rgba(0, 0, 0, 0.06); border-radius: 980px; padding: 3px; }
.seg button {
  border: none; background: none; padding: 6px 16px; border-radius: 980px;
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-2); font-family: var(--font);
  display: inline-flex; align-items: center; gap: 6px;
}
.seg button svg { width: 15px; height: 15px; flex-shrink: 0; }
.seg button.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 10px; }
.bar-chart .bar { flex: 1; background: var(--accent); border-radius: 6px 6px 2px 2px; min-height: 3px; opacity: 0.85; transition: opacity 0.15s; position: relative; }
.bar-chart .bar:hover { opacity: 1; }
.bar-chart .bar .bh { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--text-2); font-weight: 600; display: none; }
.bar-chart .bar:hover .bh { display: block; }
.bar-chart .bx { display: flex; flex-direction: column; flex: 1; gap: 4px; }
.bar-chart .bx .bh2 { text-align: center; font-size: 10.5px; color: var(--text-3); }

@media print { .sidebar, .no-print, #toasts { display: none !important; } .main { margin-left: 0; } }

/* ─── Alérgenos ─────────────────────────────────────────── */
.m-algs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.m-algs .alg {
  display: inline-flex; align-items: center; gap: 2px;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 7px; background: #f3f3f7; border: 1px solid var(--border);
  font-size: 12px; cursor: default; line-height: 1;
}
.m-algs .alg i { font-style: normal; font-size: 9px; font-weight: 700; color: var(--text-2); }
.m-algs .alg-hypo {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: 980px; background: #e8f6ec; color: #1a7f37;
  font-size: 11px; font-weight: 600; line-height: 1.3;
}
.alg-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.alg-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); background: #fff;
  border-radius: 980px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--text-2); font-family: var(--font); transition: all 0.12s;
}
.alg-chip:hover { border-color: var(--accent); }
.alg-chip.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}

/* ─── Reordenar menú (drag & drop) ─────────────────────── */
.reorder-card[draggable="true"] { cursor: grab; }
.reorder-card[draggable="true"]:active { cursor: grabbing; }
.reorder-card.drag { opacity: 0.45; }
.drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  color: var(--text-3); font-size: 15px; letter-spacing: -2px;
  cursor: grab; user-select: none; background: rgba(0,0,0,.04);
}
.drag-handle:hover { background: rgba(0,0,0,.09); color: var(--text-2); }
.menu-card[draggable="true"] { cursor: grab; }
.menu-card[draggable="true"]:active { cursor: grabbing; }
.menu-card.drag { opacity: 0.4; }

/* 2026-09-03: incidencias repartidor, faltantes (propuestas) y modo Solo DomiLat */
.btn-warning{background:#f5a623;border-color:#f5a623;color:#1c1c1e}
.btn-warning:hover{background:#e0960d;color:#1c1c1e}
.k-prop{margin:6px 0 0;padding:8px 10px;background:rgba(255,179,0,.14);border:1px solid rgba(255,179,0,.45);border-radius:10px;font-size:12.5px;font-weight:700;color:#8a5a00}

/* 2026-09-03 (2): cocina — flujo servido/entregado, qty +/-, chips stock, mini-mapa */
.qty-ctl{display:inline-flex;align-items:center;gap:2px;margin-right:6px}
.qbtn{width:22px;height:22px;border-radius:7px;border:1px solid #d1d1d6;background:#f2f2f7;color:#1c1c1e;font-weight:800;line-height:1;cursor:pointer;font-size:13px;padding:0}
.qbtn:hover{background:#ffe8bd}
.qnum{min-width:22px;text-align:center;font-weight:800}
.chip.stockchip{margin-left:6px;font-size:10.5px;padding:2px 7px;background:#f2f2f7;border:1px solid #d1d1d6;border-radius:999px;color:#3a3a3c;font-weight:600}
.chip.stocklow{background:rgba(255,59,48,.12);color:#ff3b30;border-color:rgba(255,59,48,.45);font-weight:800}
.k-livemap{height:150px;border-radius:12px;margin:8px 0 0;overflow:hidden;background:#e8eaed}
.k-dirty{margin-top:8px;padding:8px 10px;background:rgba(255,179,0,.12);border:1px solid rgba(255,179,0,.5);border-radius:10px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.k-dirty-txt{font-weight:600}

/* 2026-09-03 (3): sustitutos — filas del modal de faltantes */
.prop-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px}
.prop-row .prop-offer{display:block;font-size:12px}

/* 2026-09-10: Incidencia — chat restaurante ↔ admin-techexpert (estilo AliExpress) */
.inc-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.inc-chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.inc-msgs {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  height: 52vh; min-height: 320px; overflow-y: auto; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.inc-msg { display: flex; flex-direction: column; max-width: 78%; }
.inc-msg.me { align-self: flex-end; align-items: flex-end; }
.inc-msg.them { align-self: flex-start; align-items: flex-start; }
.inc-bub {
  padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}
.inc-msg.me .inc-bub { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.inc-msg.them .inc-bub { background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.inc-meta { font-size: 11px; margin-top: 3px; padding: 0 4px; }
.inc-opts { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.inc-opt {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--card);
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.inc-opt:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.inc-reply { display: flex; gap: 8px; padding: 12px 16px; align-items: center; }
.inc-reply .input { flex: 1; }
.inc-delays { display: flex; flex-direction: column; gap: 10px; }
.inc-delays .card-title { margin: 0; }
.inc-delay-list { display: flex; flex-direction: column; gap: 10px; }
.inc-delay {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); display: flex; flex-direction: column; gap: 5px;
}
.inc-delay.late { border-color: rgba(255, 59, 48, 0.45); background: rgba(255, 59, 48, 0.05); }
.inc-delay-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inc-delay .muted { font-size: 12px; }
.inc-tag {
  background: var(--red-soft); color: var(--red); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
@media (max-width: 980px) {
  .inc-layout { grid-template-columns: 1fr; }
  .inc-delays { order: -1; }
}

/* 2026-09-10 (2): selector de pedidos en el chat de incidencias */
.op-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.op-item {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
  cursor: pointer; font-size: 14px; font-family: var(--font); color: var(--text);
}
.op-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.op-item-top { display: flex; align-items: center; gap: 6px; }
.op-more { display: flex; justify-content: center; margin-top: 12px; }

/* Estados (stories) 2026-09-17 */
.stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.story-card {
  display: flex; flex-direction: column; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card); overflow: hidden;
}
.story-thumb { aspect-ratio: 9/16; background: #000; overflow: hidden; }
.story-thumb img, .story-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-info { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; }
.story-cap { font-size: 13px; color: var(--text); }
.story-actions { display: flex; gap: 6px; padding: 0 10px 10px; flex-wrap: wrap; }
.story-card .btn { margin: 0 10px 10px; }

/* ════════════════════════════════════════════════════════════
   DOMILAT · Identidad + Rediseño panel restaurantes (2026-09-20)
   mostaza #FFC244 protagonista · navy #001423 · blanco
   ════════════════════════════════════════════════════════════ */

/* Acción primaria → mostaza con tinta navy (contraste correcto) */
.btn:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-orange):not(.btn-ghost):not(.btn-warning) {
  background: var(--mustard);
  color: var(--mustard-ink);
  font-weight: 700;
}
.btn:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-orange):not(.btn-ghost):not(.btn-warning):hover {
  background: var(--accent-hover);
}
.btn-secondary { background: rgba(0, 20, 35, 0.06); color: var(--text); }
.btn-secondary:hover { background: rgba(0, 20, 35, 0.11); }
.btn-ghost { color: var(--navy); }
.btn-warning { background: var(--mustard); border-color: var(--mustard); color: var(--mustard-ink); }
.btn-warning:hover { background: var(--accent-hover); color: var(--mustard-ink); }

/* Navegación / links / avatar / focus → identidad navy + mostaza */
.nav-item.active { background: var(--accent-soft); color: var(--navy); }
.nav-item.active svg { color: var(--navy); }
.link { color: var(--navy); }
.user-chip .avatar { background: var(--navy); color: #fff; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--mustard); box-shadow: 0 0 0 3.5px var(--accent-soft); }
.seg button.active { background: var(--mustard); color: var(--navy); box-shadow: none; }

/* Ajustes de contraste: texto navy sobre superficies mostaza */
.cat-pill.active { background: var(--mustard); border-color: var(--mustard); color: var(--navy); }
.track-step.active .ts-dot { background: var(--mustard); color: var(--navy); }
.inc-msg.me .inc-bub { background: var(--mustard); color: var(--navy); }
.alg-chip.on { background: var(--mustard); border-color: var(--mustard); color: var(--navy); }
.inc-opt:hover { color: var(--navy); }

/* Badges de estado → paleta DomiLat controlada */
.b-pending { background: var(--accent-soft); color: #9a6b00; }
.b-preparing { background: var(--orange-soft); color: #b46900; }
.b-ready { background: var(--green-soft); color: var(--green); }
.b-served { background: rgba(14, 165, 160, 0.12); color: #0e8f8a; }
.b-paid { background: var(--green-soft); color: var(--green); }
.b-cancelled { background: var(--red-soft); color: var(--red); }
.b-web { background: rgba(0, 20, 35, 0.06); color: var(--navy); }
.b-delivery { background: rgba(14, 165, 160, 0.12); color: #0e8f8a; }
.b-takeaway { background: var(--orange-soft); color: #b46900; }

/* ─── Barra de pestañas de estado ─────────────────────────── */
.order-tabs {
  display: flex; gap: 8px; overflow-x: auto; margin-bottom: 18px;
  padding: 4px; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow);
  position: sticky; top: 12px; z-index: 20;
  -webkit-overflow-scrolling: touch;
}
.order-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: none; border-radius: 12px; background: none;
  font-size: 14px; font-weight: 700; color: var(--text-2); cursor: pointer;
  font-family: var(--font); white-space: nowrap; transition: background .15s, color .15s, transform .12s;
}
.order-tab:hover { background: rgba(0, 20, 35, 0.05); color: var(--text); }
.order-tab.active { background: var(--mustard); color: var(--navy); box-shadow: 0 4px 14px rgba(255, 194, 68, .35); }
.order-tab .ot-count {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 20, 35, 0.08); color: var(--text-2); font-size: 12.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; transition: background .15s, color .15s;
}
.order-tab.active .ot-count { background: var(--navy); color: #fff; }
.order-tab .ot-count.bump { animation: tab-pop .4s cubic-bezier(.2, .9, .3, 1.4); }

/* ─── Tarjetas de pedido ──────────────────────────────────── */
.order-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: start;
}
@media (min-width: 1400px) { .order-grid { grid-template-columns: repeat(3, 1fr); } }

.order-card {
  background: var(--card); border-radius: 18px; border: 1px solid var(--border);
  box-shadow: var(--shadow); padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 4px solid var(--mustard);
  transition: transform .16s ease, box-shadow .16s ease;
  position: relative;
}
.order-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.order-card.is-danger { border-top-color: var(--red); }
.order-card.is-warn { border-top-color: var(--orange); }
.order-card.is-cancelled { border-top-color: var(--red); opacity: .92; }
.order-card.just-in { animation: card-in .3s cubic-bezier(.2, .9, .3, 1.1); }
.order-card.moved { animation: card-flash .5s ease; }

.oc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oc-id { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); display: flex; align-items: center; gap: 6px; }
.oc-web, .oc-sala { font-size: 14px; opacity: .8; }
.oc-time { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.oc-time svg { width: 14px; height: 14px; }

.oc-risk {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
.oc-risk.danger { background: var(--red-soft); color: var(--red); }
.oc-risk.warn { background: var(--orange-soft); color: #b46900; }

.oc-cust { display: flex; flex-direction: column; gap: 3px; }
.oc-name { font-weight: 700; font-size: 14.5px; color: var(--text); }
.oc-addr { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.oc-addr svg { width: 13px; height: 13px; flex-shrink: 0; }
.oc-courier { font-size: 12px; color: var(--text-2); }

.oc-items { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.oc-items li { display: flex; gap: 8px; font-size: 14px; align-items: baseline; }
.oc-q { font-weight: 800; color: var(--navy); min-width: 26px; font-variant-numeric: tabular-nums; }
.oc-item { color: var(--text); }
.oc-note { color: var(--orange); font-size: 12.5px; }
.oc-more { color: var(--text-3); font-size: 12.5px; font-weight: 600; }

.oc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border); }
.oc-total { display: flex; flex-direction: column; line-height: 1.15; }
.oc-total span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.oc-total b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.oc-actions { display: flex; gap: 8px; align-items: center; }

.oc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 20px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 14.5px; font-weight: 800; font-family: var(--font); white-space: nowrap;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.oc-btn.primary { background: var(--mustard); color: var(--navy); box-shadow: 0 4px 14px rgba(255, 194, 68, .35); }
.oc-btn.primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.oc-btn.primary:active { transform: translateY(0) scale(.98); }
.oc-btn.ghost { background: rgba(0, 20, 35, 0.05); color: var(--text); }
.oc-btn.ghost:hover { background: rgba(0, 20, 35, 0.1); }
.oc-btn svg { width: 16px; height: 16px; }

/* Estado especial (cancelado / incidencia) — fondo pastel + ilustración */
.oc-state {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px; font-size: 13px;
}
.oc-state .oc-ill { font-size: 28px; line-height: 1; }
.oc-state .oc-t { font-weight: 800; color: var(--text); }
.oc-state .oc-d { color: var(--text-2); font-size: 12.5px; }
.oc-state.danger { background: #fdecea; border: 1px solid #f5c6c0; }
.oc-state.warn { background: #fff6e5; border: 1px solid #f5e0b0; }

/* Animaciones funcionales (150–300 ms) */
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes card-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 194, 68, .6); } 100% { box-shadow: var(--shadow); } }
@keyframes tab-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ════════════════════════════════════════════════════════════
   DOMILAT · Dashboard de pedidos (rail lateral + lista)
   ════════════════════════════════════════════════════════════ */
.ped-layout {
  display: flex;
  min-height: calc(100vh - 56px);
  margin: -28px -32px -48px;
  background: var(--ped-bg, #f0f1f3);
}
.ped-rail {
  width: 220px;
  flex-shrink: 0;
  background: var(--mustard);
  display: flex;
  flex-direction: column;
  padding: 18px 14px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.ped-rail-head { margin-bottom: 18px; }
.ped-menu-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 10px 14px;
  border: none; border-radius: 12px;
  background: rgba(0, 20, 35, 0.08); color: var(--navy);
  font-size: 14.5px; font-weight: 800; font-family: var(--font);
  cursor: pointer; transition: background .15s;
}
.ped-menu-btn:hover { background: rgba(0, 20, 35, 0.14); }
.ped-menu-btn svg { width: 19px; height: 19px; }
.ped-states { display: flex; flex-direction: column; gap: 6px; flex: 1; position: relative; }
/* 2026-09-25: UNA sola cápsula blanca (.ped-glider) que se DESLIZA entre los estados
   (antes cada botón activo pintaba su propio cuadro y el cambio era un salto).
   El botón activo ya no tiene fondo: sólo cambia el color del texto. */
.ped-glider {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 0;
  border-radius: 13px 0 0 13px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 20, 35, 0.08);
  opacity: 0; z-index: 0;
  pointer-events: none;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1),
              width .34s cubic-bezier(.22, 1, .36, 1),
              height .34s cubic-bezier(.22, 1, .36, 1),
              opacity .22s ease;
  will-change: transform, width, height;
}
.ped-glider.on { opacity: 1; }
.ped-glider.no-anim { transition: none; }
/* Muesca que une la cápsula con el panel (blanca y redondeada por fuera, como en 2026-09-24) */
.ped-glider::before,
.ped-glider::after {
  content: ''; position: absolute; right: -14px;
  width: 14px; height: 14px; background: #fff;
}
.ped-glider::before { top: -14px; border-top-left-radius: 14px; }
.ped-glider::after { bottom: -14px; border-bottom-left-radius: 14px; }
.ped-state {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: none; border-radius: 13px;
  background: transparent; color: rgba(0, 20, 35, 0.78);
  font-family: var(--font); cursor: pointer;
  transition: background .15s, color .15s;
}
.ped-state:hover { background: rgba(0, 20, 35, 0.06); color: var(--navy); }
.ped-state.active:hover { background: transparent; }
.ped-state .ps-count { font-size: 27px; font-weight: 800; line-height: 1; min-width: 34px; letter-spacing: -0.02em; }
.ped-state .ps-count.bump { animation: tab-pop .4s cubic-bezier(.2, .9, .3, 1.4); }
.ped-state .ps-label { font-size: 14.5px; font-weight: 700; }
/* 2026-09-25: el fondo blanco lo pone .ped-glider (una sola pieza animada).
   Sin borde, sin sombra propia y sin recrear el cuadro en cada selección. */
.ped-state.active {
  background: transparent;
  color: var(--navy);
  border-radius: 13px 0 0 13px;
  box-shadow: none;
  animation: none;
}
@keyframes ped-slide-in {
  from { transform: translateY(-8px); opacity: .55; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* 2026-09-24: muesca que une el estado activo con el panel. Antes se hacía con
   box-shadow y la esquina transparente dejaba ver el mostaza del rail DENTRO del
   cuadro blanco (el "depósito amarillo"). Ahora la muesca es blanca y solo se
   redondea por fuera, así que no queda nada del rail dentro del cuadro. */
/* 2026-09-25: la muesca (::before/::after) vive ahora en .ped-glider, que es
   la pieza que se mueve; el botón activo ya no pinta nada. */
@keyframes ped-notch-in { from { opacity: 0; } to { opacity: 1; } }
.ped-state.active::before {
  top: -14px;
  border-top-left-radius: 14px;
}
.ped-state.active::after {
  bottom: -14px;
  border-bottom-left-radius: 14px;
}
.ped-rail-foot { margin-top: 12px; font-size: 11px; font-weight: 600; color: rgba(0, 20, 35, 0.5); }

/* Acceso directo a Cocina en el rail (debajo de los estados) */
.ped-cocina {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: none; border-radius: 13px;
  background: transparent; color: rgba(0, 20, 35, 0.78);
  font-family: var(--font); text-decoration: none; cursor: pointer;
  font-size: 14.5px; font-weight: 700;
  transition: background .15s, color .15s;
}
.ped-cocina:hover { background: rgba(0, 20, 35, 0.06); color: var(--navy); }
.ped-cocina.active { background: #fff; color: var(--navy); box-shadow: 0 4px 16px rgba(0, 20, 35, 0.08); }
.ped-cocina svg { width: 21px; height: 21px; flex-shrink: 0; }

/* Menú modal: rejilla de secciones */
.ped-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ped-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--text);
  text-decoration: none; font-size: 13.5px; font-weight: 600; font-family: var(--font);
  transition: border-color .12s, background .12s, color .12s;
}
.ped-menu-item:hover { border-color: var(--mustard); background: var(--accent-soft); color: var(--navy); }
.ped-menu-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-2); }
.ped-menu-item:hover svg { color: var(--navy); }

/* Menú modal: cabecera (logo + nombre) y pie (usuario + salir) */
.app-menu-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.app-menu-head .am-logo {
  width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
  background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.app-menu-head .am-logo img { width: 100%; height: 100%; object-fit: cover; }
.app-menu-head .am-name { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; line-height: 1.15; }
.app-menu-head .am-slug { font-size: 12.5px; color: var(--text-3); }
.app-menu-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.am-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.am-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.am-uname { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.15; }
.am-urole { font-size: 11.5px; color: var(--text-3); }

.ped-main { flex: 1; min-width: 0; padding: 28px 28px 40px; }
.ped-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

/* Tarjetas de pedido (fila horizontal, estilo dashboard de reparto) */
.ped-list { display: flex; flex-direction: column; gap: 14px; }
/* 2026-09-25: transición al CAMBIAR de estado (fade-out de la lista vieja + entrada
   escalonada de las tarjetas nuevas, 220-300 ms, sin saltos de pantalla) */
.ped-list.leaving { animation: list-out .15s ease forwards; pointer-events: none; }
@keyframes list-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
.ped-list.enter .ped-card { animation: card-enter .28s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes card-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ped-list.enter .ped-card:nth-child(1) { animation-delay: 0ms; }
.ped-list.enter .ped-card:nth-child(2) { animation-delay: 30ms; }
.ped-list.enter .ped-card:nth-child(3) { animation-delay: 60ms; }
.ped-list.enter .ped-card:nth-child(4) { animation-delay: 90ms; }
.ped-list.enter .ped-card:nth-child(5) { animation-delay: 120ms; }
.ped-list.enter .ped-card:nth-child(6) { animation-delay: 150ms; }
.ped-list.enter .ped-card:nth-child(7) { animation-delay: 180ms; }
.ped-list.enter .ped-card:nth-child(n+8) { animation-delay: 210ms; }
.ped-card {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  background: #fff; border-radius: 16px;
  border: 1px solid var(--border); box-shadow: var(--shadow);
  padding: 16px 20px 20px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
  overflow: hidden;
}
.ped-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ped-card.just-in { animation: card-enter .28s cubic-bezier(.22, 1, .36, 1) both; }
.ped-card.moved { animation: card-flash .5s ease; }
.ped-card.is-cancelled { opacity: .85; }
.ped-card.is-danger { border-left: 4px solid var(--red); }
.ped-card.is-warn { border-left: 4px solid var(--orange); }
.ped-card:not(.is-danger):not(.is-warn) { border-left: 4px solid transparent; }

.pc-time { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.pc-min { font-size: 44px; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.pc-min-lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-top: 4px; }

.pc-info { flex: 1; min-width: 0; }
.pc-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); }
.pc-sub { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
.pc-items { font-size: 13px; color: var(--text-2); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-risk { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.pc-risk.danger { background: var(--red-soft); color: var(--red); }
.pc-risk.warn { background: var(--orange-soft); color: #b46900; }

.pc-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.pc-paid {
  font-size: 12px; font-weight: 800; padding: 4px 11px;
  border-radius: 999px; background: rgba(0, 20, 35, 0.06); color: var(--text-2);
}
.pc-paid.ok { background: var(--green-soft); color: var(--green); }
.pc-paid.danger { background: var(--red-soft); color: var(--red); }
.pc-ord {
  font-size: 13px; font-weight: 700; color: var(--text-2);
  background: rgba(0, 20, 35, 0.05); padding: 4px 10px; border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.pc-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* min-width: el botón no cambia de tamaño al pasar de "En camino" a "Completado" */
  min-width: 152px;
  padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--navy); background: transparent;
  color: var(--navy); font-size: 14px; font-weight: 800;
  font-family: var(--font); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, transform .12s;
  flex-shrink: 0;
}
.pc-action:hover { background: var(--navy); color: #fff; transform: translateY(-1px); }
.pc-action:active { transform: scale(.98); }
.pc-action.ghost { border-color: rgba(0, 20, 35, 0.22); color: var(--text-2); font-weight: 700; }
.pc-action.ghost:hover { background: rgba(0, 20, 35, 0.06); color: var(--navy); }
.pc-action .chev { font-size: 17px; line-height: 0; }

/* Barra de progreso bajo la tarjeta */
.pc-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(0, 20, 35, 0.06);
}
.pc-progress span {
  display: block; height: 100%;
  background: var(--navy);
  transition: width .6s ease;
}
.pc-progress span.alt { background: var(--mustard); }

/* Sin resalte gris/oscuro al tocar en Android (tablet) */
.ped-state, .ped-card, .pc-action, .ped-menu-btn, .ped-cocina, .ped-menu-item { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .ped-glider, .ped-card, .ped-list { transition: none !important; animation: none !important; }
}

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .ped-rail { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; }
  .ped-rail-head { margin: 0; }
  .ped-menu-btn { width: auto; padding: 9px 12px; }
  .ped-states { flex-direction: row; overflow-x: auto; gap: 6px; flex: 1; }
  .ped-state { padding: 9px 13px; border-radius: 999px; white-space: nowrap; }
  .ped-state.active { border-radius: 999px; }
  .ped-state.active::before, .ped-state.active::after { display: none; }
  /* En móvil/tablet el rail es horizontal: la misma cápsula se desliza en X */
  .ped-glider { border-radius: 999px; }
  .ped-glider::before, .ped-glider::after { display: none; }
  .pc-action { min-width: 0; }
  .ped-state .ps-count { font-size: 19px; min-width: 0; }
  .ped-cocina { padding: 9px 13px; border-radius: 999px; white-space: nowrap; }
  .ped-cocina svg { width: 18px; height: 18px; }
  .ped-rail-foot { display: none; }
  .main { padding: 18px 16px 30px; }
  .ped-card { flex-wrap: wrap; gap: 12px; }
  .pc-time { min-width: 52px; }
  .pc-min { font-size: 34px; }
}

/* ── 2026-10-22 · revisión visual (Web Interface Guidelines) ─────────────── */
/* 1) .ped-glider (cápsula blanca) tapaba el contador del estado activo:
      el botón tiene que pintarse por encima de la cápsula. */
.ped-state { z-index: 1; }
.ped-state .ps-count, .ped-state .ps-label { white-space: nowrap; }
/* 2) "12 Nuevos" se partía en dos líneas (el resto no). */
.ped-state .ps-count { min-width: 36px; }
/* 3) "Deshacer" se salía del borde de la tarjeta de cocina. */
.k-dirty-act { display: flex; flex-wrap: wrap; gap: 8px; }
.k-order { overflow-wrap: anywhere; }
/* 4) Verde fuera de paleta: acciones de fila y "Abrir caja" pasan a navy. */
.btn-success { background: var(--navy); color: #fff; }
.btn-success:hover { background: #0a2a3f; }
/* 5) Estados vacíos: misma tarjeta y centrado que el resto de vistas. */
.empty { max-width: 760px; margin: 8px auto 0; background: var(--card);
  border-radius: 18px; padding: 56px 24px;
  box-shadow: 0 1px 2px rgba(0,20,35,.05), 0 12px 28px rgba(0,20,35,.05); }
/* 6) Móvil: cada vista alineaba el título distinto (Inicio dcha, Pedidos izq...). */
@media (max-width: 640px) {
  /* iOS Safari hace zoom automático al enfocar un campo con font-size < 16px
     y eso descuadra el layout en móvil: 16px en todos los campos. */
  .input, .select, .textarea { font-size: 16px; }
  .page-head, .ped-toolbar { text-align: left; align-items: flex-start; flex-direction: column; }
  .page-head > div, .ped-toolbar > div { width: 100%; }
  .page-head .actions, .ped-toolbar .seg { width: 100%; justify-content: flex-start; }
  .t-title { font-size: 26px; }
  .ped-state .ps-label { font-size: 13px; }
  .ped-state .ps-count { font-size: 22px; min-width: 30px; }
}
/* 7) Microcopy de ayuda ilegible (11px) en el plano de mesas. */
.touch-hint, .mesas-hint { font-size: 12.5px; color: var(--text-2); }


/* ══ 2026-10-22 · MODO TABLET (restaurante) ══════════════════════════════
   Objetivo: tablet en barra/cocina. Dedos, lectura de pie a ~1 m y una
   pulsación por acción. Todo dentro de media queries: el escritorio grande
   (>=1181 px con ratón) queda exactamente como estaba. */
@media (pointer: coarse), (min-width: 700px) and (max-width: 1180px) {
  /* 1 · Objetivos táctiles: 44-48 px mínimo real */
  .btn { min-height: 48px; padding: 0 20px; font-size: 15.5px; border-radius: 14px; }
  .btn-sm { min-height: 42px; padding: 0 14px; font-size: 14.5px; }
  .seg button { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .qbtn { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
  .qty-ctl { gap: 6px; }
  .qty-ctl .q, .qnum { min-width: 24px; font-size: 18px; }
  .k-dirty-act .btn { min-height: 46px; }

  /* 2 · Tipografía de servicio: se lee de pie, sin acercarse */
  .k-order .k-num { font-size: 22px; }
  .k-order li { font-size: 16px; line-height: 1.45; }
  .k-order .k-customer { font-size: 14.5px; }
  .ped-state { padding: 14px 14px; }
  .ped-state .ps-count { font-size: 30px; }
  .ped-state .ps-label { font-size: 15px; }

  /* 3 · Pedidos: el "42 / D" gigante pasa a chip compacto y el botón manda */
  .pc-time {
    flex-direction: row; align-items: baseline; gap: 4px; min-width: 0;
    background: #f1eee6; border-radius: 999px; padding: 5px 11px;
  }
  .pc-min { font-size: 16px; letter-spacing: 0; }
  .pc-min-lbl { font-size: 12px; margin-top: 0; }
  .ped-card .btn { min-width: 200px; }

  /* 4 · Cocina: una pulsación. Avisar/Deshacer y Empezar a lo ancho */
  .k-order .k-actions { gap: 10px; }
  .k-order .k-actions .btn { flex: 1; }
  .k-dirty-act { width: 100%; }
  .k-dirty-act .btn { flex: 1; }
  .k-order .k-actions .btn:first-child { flex: 1.2; }

  /* 5 · Mesas: zoom y leyenda a tamaño dedo */
  .mesas h1, .t-title { letter-spacing: -0.02em; }
  .zoomctl button, .mesas-tools button { min-width: 44px; min-height: 44px; }
}

/* Tablet en vertical (820x1180): el rail no debe comerse el ancho útil */
@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .ped-rail, .rail { width: 132px; }
  .ped-state .ps-label { font-size: 13.5px; }
  .ped-state .ps-count { font-size: 26px; }
}

/* 2026-10-22 · ajuste: especificidad real de los controles táctiles */
@media (pointer: coarse), (min-width: 700px) and (max-width: 1180px) {
  .k-order .qty-ctl .qbtn { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
  .k-order .qty-ctl { gap: 6px; }
  .floor-zoom .zbtn { min-width: 44px; min-height: 44px; font-size: 20px; }
  .floor-zoom .zval { min-width: 54px; font-size: 15px; }
  .k-order li { gap: 10px; }
}

/* ── 2026-10-22 · fix continuidad de la tarjeta de estado activo ──────────
   Causa: .ped-glider tenía border-radius 13px 0 0 13px (esquinas derechas
   rectas) y dos pseudoelementos (::before/::after) en right:-14px que dibujaban
   la 'muesca' que unía la tarjeta con el panel lateral de antes. Entre ambos
   quedaba un hueco por el que asomaba el mostaza: la franja vertical del borde
   derecho. Ya no hay panel al que unir nada, así que la tarjeta pasa a ser una
   pieza continua con las cuatro esquinas redondeadas. */
.ped-glider { border-radius: 14px; }
.ped-glider::before, .ped-glider::after { content: none; display: none; }
.ped-state.active { border-radius: 14px; }
.ped-states { overflow: visible; }
/* La tarjeta no debe sobresalir del rail ni recortarse en el borde */
.ped-rail .ped-states { padding-right: 0; }
@media (pointer: coarse), (min-width: 700px) and (max-width: 1180px) {
  .ped-glider, .ped-state.active { border-radius: 16px; }
}

/* ── 2026-10-22 · muesca blanca (la tarjeta se funde con la sección) ──────
   Cómo se consigue:
   1. La tarjeta blanca se EXTIENDE 14px a la derecha con box-shadow, hasta el
      borde exacto del rail. Antes esa franja era el padding mostaza del rail:
      de ahí la 'muesca' amarilla.
   2. Las dos esquinas cóncavas (::before arriba, ::after abajo) siguen ahí para
      que la unión no sea un corte recto, pero ahora solo recortan mostaza por
      FUERA de la tarjeta.
   3. Resultado: una sola pieza blanca del color de la sección.
   Para volver a la tarjeta suelta con las 4 esquinas: añadir la clase
   'no-tab-merge' a .app-shell (regla al final). */
.ped-glider {
  border-radius: 14px 0 0 14px;
  box-shadow: 14px 0 0 0 #fff, 0 4px 16px rgba(0, 20, 35, 0.08);
}
.ped-glider::before,
.ped-glider::after {
  content: ''; display: block;
  position: absolute; right: -14px;
  width: 14px; height: 14px; background: #fff;
}
.ped-glider::before { top: -14px; border-top-left-radius: 14px; }
.ped-glider::after { bottom: -14px; border-bottom-left-radius: 14px; }
.ped-state.active { border-radius: 14px 0 0 14px; }

/* Interruptor: tarjeta suelta otra vez (4 esquinas, sin muesca) */
.app-shell.no-tab-merge .ped-glider {
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 20, 35, 0.08);
}
.app-shell.no-tab-merge .ped-glider::before,
.app-shell.no-tab-merge .ped-glider::after { content: none; display: none; }
.app-shell.no-tab-merge .ped-state.active { border-radius: 14px; }

/* ── 2026-10-22 · unión tipo gelatina + lienzo blanco ─────────────────────
   1. El contenido pasa a blanco (--card): así la pestaña blanca del menú y la
      sección son la MISMA superficie y la unión no tiene costura.
   2. La muesca deja de ser dos escalones de 14px: pasa a un filete grande de
      22px, con lo que el borde entra en el fondo con una curva continua
      (efecto gota), no con un peldaño.
   3. Las tarjetas siguen leyéndose porque .card ya trae borde + sombra. */
.main { background: #fff; }
.ped-glider {
  border-radius: 16px 0 0 16px;
  box-shadow: 22px 0 0 0 #fff, 0 6px 18px rgba(0, 20, 35, 0.07);
}
.ped-glider::before,
.ped-glider::after {
  content: ''; display: block;
  position: absolute; right: -22px;
  width: 22px; height: 22px; background: #fff;
}
.ped-glider::before { top: -22px; border-top-left-radius: 22px; }
.ped-glider::after { bottom: -22px; border-bottom-left-radius: 22px; }
.ped-state.active { border-radius: 16px 0 0 16px; }
/* En móvil el rail va arriba: no hay costura que unir, tarjeta normal */
@media (max-width: 640px) {
  .ped-glider { border-radius: 999px; box-shadow: 0 4px 14px rgba(0,20,35,.07); }
  .ped-glider::before, .ped-glider::after { content: none; display: none; }
  .ped-state.active { border-radius: 999px; }
}

/* ── 2026-10-22 · unión gelatina v2 ───────────────────────────────────────
   Lo que hacía 'bulto': la sombra difusa de la cápsula la despegaba del fondo
   blanco y el filete (22px) era menor que la altura del botón, así que quedaba
   un tramo recto + dos esquinas: se leía como un apéndice.
   Ahora: filete de 26px (>= media altura del botón) → la curva ocupa todo el
   canto y la pieza se disuelve en el fondo; y la sombra difusa se va, porque
   sobre blanco solo servía para dibujar el bulto. */
.ped-glider {
  border-radius: 16px 0 0 16px;
  box-shadow: 26px 0 0 0 #fff;
}
.ped-glider::before,
.ped-glider::after {
  content: ''; display: block;
  position: absolute; right: -26px;
  width: 26px; height: 26px; background: #fff;
}
.ped-glider::before { top: -26px; border-top-left-radius: 26px; }
.ped-glider::after { bottom: -26px; border-bottom-left-radius: 26px; }
/* En tablet el botón es más alto: el filete crece con él */
@media (pointer: coarse), (min-width: 700px) and (max-width: 1180px) {
  .ped-glider { box-shadow: 30px 0 0 0 #fff; }
  .ped-glider::before, .ped-glider::after { right: -30px; width: 30px; height: 30px; }
  .ped-glider::before { top: -30px; border-top-left-radius: 30px; }
  .ped-glider::after { bottom: -30px; border-bottom-left-radius: 30px; }
}

/* ── 2026-10-22 · unión limpia (sin pestañas arriba/abajo) ────────────────
   Se quitan los dos filetes cóncavos (::before / ::after): eran los 'tumultos'
   que asomaban sobre y bajo la pestaña. Queda solo la unión: la tarjeta blanca
   se prolonga en recto hasta el borde del rail y sigue en el lienzo blanco de
   la sección, sin curvas ni escalones. */
.ped-glider {
  border-radius: 16px 0 0 16px;
  box-shadow: 22px 0 0 0 #fff;
}
.ped-glider::before,
.ped-glider::after { content: none; display: none; }
.ped-state.active { border-radius: 16px 0 0 16px; }
@media (pointer: coarse), (min-width: 700px) and (max-width: 1180px) {
  .ped-glider { border-radius: 18px 0 0 18px; box-shadow: 26px 0 0 0 #fff; }
  .ped-state.active { border-radius: 18px 0 0 18px; }
}

/* ── 2026-10-22 (restaurado) · la tira de estados vuelve a estar visible ──
   Se elimina el `display:none !important` que la ocultaba. El rail mantiene su
   cabecera, el estado ABIERTO, los 5 estados y Cocina al fondo. */
.ped-rail { justify-content: flex-start; }
.ped-rail .ped-states { flex: 1; }
.ped-rail .ped-cocina { margin-top: auto; }

/* ══ 2026-10-25 — fixes de diseño (añadidos AL FINAL, sin tocar el resto) ══ */

/* Guía de bienvenida (app walkthrough) */
.tour-bg { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 12, 22, .58); backdrop-filter: blur(7px); display: flex; align-items: center; justify-content: center; padding: 18px; animation: tourFade .22s ease both; }
.tour-card { width: min(520px, 100%); background: var(--card, #fff); color: var(--text, #111); border-radius: 24px; box-shadow: 0 26px 80px rgba(0, 0, 0, .45); padding: 22px 22px 16px; position: relative; animation: tourIn .34s cubic-bezier(.2, .9, .25, 1) both; }
.tour-head { display: flex; gap: 14px; align-items: center; padding-right: 26px; }
.tour-ico { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 18px; background: var(--mustard, #FFC244); display: flex; align-items: center; justify-content: center; color: var(--navy, #001423); }
.tour-ico svg { width: 26px; height: 26px; }
.tour-stepof { font-size: 11px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; color: var(--navy, #001423); opacity: .55; }
.tour-title { font-size: 20px; font-weight: 900; line-height: 1.22; color: var(--navy, #001423); margin-top: 2px; }
.tour-text { font-size: 14.5px; line-height: 1.55; color: var(--text-2, #4a4a4f); margin-top: 14px; min-height: 66px; }
.tour-dots { display: flex; gap: 6px; justify-content: center; margin: 16px 0 10px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 20, 35, .18); transition: width .2s, background .2s; }
.tour-dot.on { width: 20px; border-radius: 4px; background: var(--mustard, #FFC244); }
.tour-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.tour-nvm { display: flex; align-items: center; gap: 7px; margin-right: auto; font-size: 12.5px; font-weight: 700; color: var(--text-2, #4a4a4f); cursor: pointer; }
.tour-nvm input { width: 16px; height: 16px; accent-color: var(--mustard, #FFC244); cursor: pointer; }
.tour-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(0, 20, 35, .06); color: var(--navy, #001423); font-size: 14px; font-weight: 800; cursor: pointer; line-height: 1; }
.tour-x:hover { background: rgba(0, 20, 35, .12); }
.tour-hl { outline: 3px solid var(--mustard, #FFC244); outline-offset: 4px; border-radius: 14px; transition: outline-color .3s; }
@keyframes tourFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .tour-card { padding: 18px 16px 14px; border-radius: 20px; } .tour-title { font-size: 18px; } .tour-text { font-size: 14px; min-height: 84px; } }

/* Rail: la cápsula blanca ya no sobresale (fuera muescas) */
.ped-states { overflow: hidden; }
.ped-glider { border-radius: 13px; }
.ped-glider::before, .ped-glider::after { content: none; display: none; }

/* Estado del restaurante sin emoji: punto CSS que hereda el color */
#pedOpenBtn .ped-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

/* ══ 2026-10-25 — campos que se funden con el marfil del panel (no blanco puro) ══ */
.input, .select, .textarea { background: var(--bg, #f7f4ec); border-color: rgba(0, 20, 35, .10); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(0, 20, 35, .20); }
.input:focus, .select:focus, .textarea:focus { background: #fffdf8; border-color: var(--mustard); box-shadow: 0 0 0 3.5px var(--accent-soft); }
.select option { background: #ffffff; color: var(--navy); }

/* ══ 2026-10-25 — la cápsula del estado activo se funde con el fondo del panel ══ */
.ped-states { overflow: visible; }
.ped-glider { background: var(--bg, #f7f4ec); border-radius: 13px 0 0 13px; box-shadow: 0 2px 10px rgba(0, 20, 35, .06); }
.ped-state.active { border-radius: 13px 0 0 13px; }

/* ══ 2026-10-25 — alérgenos con icono + nombre, y SVG de títulos a tamaño correcto ══ */
.m-algs .alg { display: inline-flex; align-items: center; gap: 4px; }
.m-algs .alg svg { width: 13px; height: 13px; flex: 0 0 auto; }
.m-algs .alg span { font-size: 10.5px; font-weight: 700; letter-spacing: .1px; }
.alg-picker .alg-chip { display: inline-flex; align-items: center; gap: 6px; }
.alg-picker .alg-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }
.alg-picker .alg-chip span { font-size: 12px; font-weight: 700; }
.card-title svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.pc-items img, .kitchen-grid img, #kitBody img { max-width: 34px; max-height: 34px; }

/* Selector de icono (emoji) para categorías del menú */
.emoji-picker {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
 gap: 6px;
 max-height: 200px;
 overflow-y: auto;
 padding: 8px;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--bg-2);
 -webkit-overflow-scrolling: touch;
}
.emoji-chip {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 44px;
 padding: 0;
 font-size: 22px;
 line-height: 1;
 background: var(--card);
 border: 1.5px solid transparent;
 border-radius: 11px;
 cursor: pointer;
 transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.emoji-chip:hover { border-color: var(--mustard); transform: translateY(-1px); }
.emoji-chip.on { background: var(--mustard); border-color: var(--mustard); box-shadow: 0 2px 8px rgba(0, 20, 35, .16); }
.emoji-chip.emoji-none { font-size: 18px; font-weight: 700; color: var(--text-3); }
.emoji-chip.emoji-none.on { color: var(--navy); }
@media (max-width: 520px) {
 .emoji-picker { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); max-height: 168px; }
 .emoji-chip { height: 40px; font-size: 20px; }
}