:root {
  --st-vino: #7a1c2a;
  --st-vino-2: #5e1320;
  --st-oro: #c9a45c;
  --st-fondo: #f6f3ef;
}
body { background: var(--st-fondo); }
/* ---------- Menú lateral vertical ---------- */
:root { --st-side: 230px; }
.st-shell { display: flex; min-height: 100vh; }
.st-shell > .st-main { flex: 1; min-width: 0; }
.st-brand { color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: .5px; text-decoration: none; }
.st-brand i { color: var(--st-oro); }
.st-brand:hover { color: #fff; }
.st-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem;
  background: linear-gradient(90deg, #1d1112, var(--st-vino)); }
.st-side { background: linear-gradient(180deg, #1d1112, var(--st-vino)) !important; color: #fff; display: flex; flex-direction: column; }
.st-side-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1rem .75rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.st-side-nav { flex: 1; overflow-y: auto; padding: .5rem; }
.st-side-nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; margin-bottom: 2px; border-radius: .5rem;
  color: rgba(255,255,255,.8); text-decoration: none; }
.st-side-nav a i { font-size: 1.1rem; width: 1.3rem; text-align: center; }
.st-side-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.st-side-nav a.active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 3px 0 0 var(--st-oro); }
.st-side-user { padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.12); }
.st-side-user-datos { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 992px) {
  /* Escondido: franja de íconos. Al pasar el mouse se despliega ENCIMA del contenido (no lo mueve). */
  :root { --st-side-min: 60px; }
  .st-shell { padding-left: var(--st-side-min); }
  .st-side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045; width: var(--st-side-min); overflow: hidden;
    transition: width .18s ease, box-shadow .18s ease; }
  .st-side:hover, .st-side:focus-within { width: var(--st-side); box-shadow: 6px 0 24px rgba(0,0,0,.35); }
  .st-side .st-txt { opacity: 0; white-space: nowrap; transition: opacity .12s; }
  .st-side:hover .st-txt, .st-side:focus-within .st-txt { opacity: 1; }
  .st-side-head { padding: 1rem 0 .75rem 1.15rem; white-space: nowrap; }
  .st-side-nav { overflow-x: hidden; }
  .st-side-nav a { white-space: nowrap; padding-left: .95rem; }
  .st-side-user { white-space: nowrap; padding: .9rem .6rem; }
  /* La barra fija del mesero empieza después de la franja del menú */
  .st-barra { left: var(--st-side-min) !important; }
  /* En pantalla grande las hojas (opciones, carrito, nombre de cuenta…) son una ventana centrada, no pegada abajo */
  .st-sheet { top: 50%; bottom: auto; left: calc(50% + var(--st-side-min) / 2) !important; right: auto;
    transform: translate(-50%, -50%); width: min(720px, 88vw); max-height: 86vh; border-radius: 1rem;
    padding-bottom: 1rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
}
@media (max-width: 991.98px) { .st-side { width: 260px !important; } }

.btn-st { background: var(--st-vino); border-color: var(--st-vino); color: #fff; }
.btn-st:hover, .btn-st:focus, .btn-st:active { background: var(--st-vino-2) !important; border-color: var(--st-vino-2) !important; color: #fff !important; }
.btn-st:disabled, .btn-st.disabled { background: var(--st-vino); border-color: var(--st-vino); color: #fff; opacity: .55; }
.btn-outline-st { border-color: var(--st-vino); color: var(--st-vino); }
.btn-outline-st:hover, .btn-check:checked + .btn-outline-st { background: var(--st-vino); color: #fff; border-color: var(--st-vino); }

.st-kpi { background: #fff; border-radius: .6rem; padding: .75rem 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); height: 100%; }
.st-kpi-l { font-size: .78rem; color: #6c757d; text-transform: uppercase; letter-spacing: .3px; }
.st-kpi-v { font-size: 1.4rem; font-weight: 700; }
/* Tarjeta del inicio que abre su pantalla de detalle */
.st-tarjeta { display: block; color: inherit; text-decoration: none; transition: transform .1s, box-shadow .1s; }
.st-tarjeta:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.card { border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.st-card-link { text-decoration: none; color: inherit; transition: transform .1s; }
.st-card-link:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.st-anulado, .st-anulado td { text-decoration: line-through; color: #999 !important; }

/* Barras horizontales de reportes */
.st-barra-h { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; gap: .5rem; align-items: center; font-size: .9rem; margin-bottom: .35rem; }
.st-barra-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-barra-h div { background: #eee; border-radius: 4px; height: 12px; overflow: hidden; }
.st-barra-h i { display: block; height: 100%; background: var(--st-vino); border-radius: 4px; }
.st-barra-h.verde i { background: #198754; }

/* Login */
.st-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 30% 20%, #3a1a1f, #120a0b); }
.st-login-card { background: #fff; border-radius: 1rem; padding: 2rem; width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.st-login-logo { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; font-size: 2.2rem;
  background: var(--st-vino); color: var(--st-oro); }

/* ---------- Mesero ---------- */
.st-mesero .st-main { padding-bottom: 110px !important; max-width: 900px; }
.st-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.st-mesa { background: #fff; border: 2px solid #ddd; border-radius: .8rem; padding: .9rem .6rem; min-height: 110px; text-align: center; }
.st-mesa-nombre { font-weight: 700; font-size: 1.1rem; }
.st-mesa-info { font-size: .8rem; color: #6c757d; }
.st-mesa.ocupada { background: var(--st-vino); border-color: var(--st-vino); color: #fff; }
.st-mesa.ocupada .st-mesa-info { color: #f1dada; }
.st-mesa-total { font-size: 1.25rem; font-weight: 700; color: var(--st-oro); }
.st-mesa.lista { background: #198754; border-color: #146c43; animation: st-pulso 1.2s infinite; }
.st-mesa.lista .st-mesa-total { color: #fff; }
@keyframes st-pulso { 50% { box-shadow: 0 0 0 6px rgba(25,135,84,.35); } }

.st-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.st-chips .btn { white-space: nowrap; border-radius: 2rem; }
.st-chips-sm { flex-wrap: wrap; }
.st-chips-sm .btn { font-size: .78rem; padding: .15rem .6rem; }

.st-platos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.st-plato { position: relative; display: flex; flex-direction: column; text-align: left; background: #fff; border: 1px solid #e3e3e3;
  border-radius: .7rem; padding: .7rem; min-height: 96px; transition: transform .05s; }
.st-plato:active { transform: scale(.97); }
.st-plato-nombre { font-weight: 600; line-height: 1.2; margin-bottom: .4rem; }
.st-plato.agotado { opacity: .5; background: #f3f3f3; }
.st-plato-cant { position: absolute; top: -8px; right: -8px; background: var(--st-vino); color: #fff; border-radius: 50%; width: 26px; height: 26px;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; }

.st-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid #ddd;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
.st-sheet-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1040; }
.st-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1041; background: #fff; border-radius: 1rem 1rem 0 0; max-height: 85vh; overflow-y: auto;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); max-width: 900px; margin: 0 auto; }
.st-linea { border-bottom: 1px solid #eee; padding: .7rem 0; }
.st-opciones { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Pestañas de secciones del menú (Desayunos, Almuerzos, Cenas…) */
.st-secciones { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.st-secciones .btn { white-space: nowrap; line-height: 1.1; padding: .35rem .8rem; border-radius: .6rem; font-weight: 600; }
.st-secciones .btn small { font-weight: 400; font-size: .7rem; opacity: .8; }
.st-secciones .st-sec-off { border-style: dashed; color: #888; border-color: #bbb; }
.st-secciones .st-sec-off.btn-st { background: #888; border-color: #888; color: #fff; }
.st-cuenta-sel { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.st-cuenta-sel .btn { border-radius: 2rem; }
.st-mesa { position: relative; }
.st-mesa.unida { background: #f3e6e8; border-color: var(--st-vino); color: var(--st-vino); }
.st-mesa.unida .st-mesa-info { color: var(--st-vino); }
/* Grupo de mesas unidas: la principal rellena con el color del grupo, las unidas con borde y fondo claro del mismo color */
.st-mesa.grupo { background: var(--g); border-color: var(--g); padding-top: 1.9rem; }
.st-mesa.grupo .st-mesa-total { color: #fff; }
.st-mesa.grupo.unida { background: color-mix(in srgb, var(--g) 14%, #fff); border: 3px solid var(--g); color: var(--g); }
.st-mesa.grupo.unida .st-mesa-info { color: var(--g); }
.st-mesa.grupo.lista { background: #198754; border-color: var(--g); border-width: 4px; }
.st-grupo-letra { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff;
  font-weight: 800; font-size: .85rem; box-shadow: 0 0 0 2px #fff; vertical-align: middle; }
.st-mesa .st-grupo-letra { position: absolute; top: 6px; left: 6px; }
.st-mesa.mia { box-shadow: 0 0 0 3px var(--st-oro); }
.st-opciones .btn { border-radius: 2rem; }
.st-opcion-txt { font-size: .95rem; color: #9fd3ff; }

.st-toasts { position: fixed; bottom: calc(90px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 2000; width: min(92vw, 420px); }
.st-toast { color: #fff; padding: .75rem 1rem; border-radius: .6rem; margin-bottom: .5rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: opacity .4s, transform .4s; font-weight: 500; }
.st-toast.out { opacity: 0; transform: translateY(-10px); }

/* ---------- Cocina (KDS) ---------- */
.st-cocina { background: #111; color: #eee; min-height: 100vh; }
.st-cocina-head { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; background: #1b1b1b; border-bottom: 1px solid #333; flex-wrap: wrap; gap: .5rem; }
.st-tablero { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; padding: 1rem; }
.st-col-pendientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; align-content: start; }
.st-col-listas { border-left: 1px solid #333; padding-left: 1rem; }
.st-col-listas .st-comanda { margin-bottom: .75rem; }
.st-comanda { background: #222; border-radius: .7rem; overflow: hidden; border-top: 8px solid #198754; display: flex; flex-direction: column; }
.st-comanda.atento { border-top-color: #ffc107; }
.st-comanda.tarde { border-top-color: #dc3545; }
.st-comanda.lista { border-top-color: #555; opacity: .75; }
.st-comanda.nueva { animation: st-nueva 1.5s 3; }
@keyframes st-nueva { 50% { box-shadow: 0 0 0 4px #ffc107; } }
.st-comanda-head { display: flex; justify-content: space-between; align-items: start; padding: .7rem .9rem; background: #2b2b2b; }
.st-comanda-mesa { font-size: 1.3rem; font-weight: 800; }
.st-comanda-tiempo { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-comanda.tarde .st-comanda-tiempo { color: #ff6b6b; }
.st-comanda-items { list-style: none; padding: .7rem .9rem; margin: 0; font-size: 1.15rem; flex: 1; }
.st-comanda-items li { padding: .3rem 0; border-bottom: 1px dashed #3a3a3a; }
.st-comanda-items li:last-child { border: 0; }
.st-comanda-items li.anulado { text-decoration: line-through; color: #777; }
.st-nota { font-size: .95rem; color: #ffc107; font-weight: 600; }
.st-comanda-acciones { display: flex; gap: .5rem; padding: .7rem .9rem; }
.st-comanda-acciones .btn { flex: 1; font-weight: 700; }
.st-vacio { grid-column: 1 / -1; text-align: center; color: #666; padding: 5rem 0; }
.st-vacio i { font-size: 4rem; }
@media (max-width: 800px) {
  .st-tablero { grid-template-columns: 1fr; }
  .st-col-listas { border-left: 0; padding-left: 0; border-top: 1px solid #333; padding-top: 1rem; }
}
@media print { .st-side, .st-topbar, .d-print-none { display: none !important; } body { background: #fff; } }