/* ============================================================
   EL RÚSTICO — hoja de estilos compartida
   Tokens y componentes base del sistema de diseño
   (design-system/el-rustico/MASTER.md). Cada pantalla suma su
   CSS propio; acá va solo lo que se repite en todas.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  --fondo: #161616; --superficie: #222222; --superficie-2: #2B2B2B; --borde: #3A3A3A;
  --texto: #F2E8C9; --texto-2: #B8B2A5; --texto-3: #8A857A;
  --primario: #F2971B; --primario-hover: #FFB03A; --sobre-primario: #161616; --dorado: #7A5A1E;
  --exito: #34D399; --alerta: #FBBF24; --peligro: #F87171; --info: #7DD3FC; --foco: #FFB03A;
  --display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --sans: 'Barlow', Arial, sans-serif;
  --radio: 10px; --radio-tarjeta: 14px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --dur: 180ms;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 16px/1.5 var(--sans); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain;
}
h1, h2, h3, .display { font-family: var(--display); font-weight: 400; letter-spacing: .02em; line-height: 1; margin: 0; text-transform: uppercase; }
h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; }
p { margin: 0; }
a { color: var(--primario); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.oculto { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px; padding: 0 var(--e5); border-radius: var(--radio); border: 1px solid transparent;
  font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; user-select: none;
  transition: background var(--dur) ease-out, transform 120ms ease-out, border-color var(--dur), color var(--dur);
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-primario { background: var(--primario); color: var(--sobre-primario); }
.btn-primario:hover { background: var(--primario-hover); }
.btn-secundario { background: transparent; color: var(--texto); border-color: var(--borde); }
.btn-secundario:hover { background: var(--superficie-2); }
.btn-peligro { background: transparent; color: var(--peligro); border-color: rgba(248,113,113,.4); }
.btn-peligro:hover { background: rgba(248,113,113,.12); }
.btn-chico { min-height: 40px; padding: 0 var(--e4); font-size: 14px; }
.btn-icono { width: 44px; min-height: 44px; padding: 0; }
.btn-bloque { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---- tarjetas y superficies ---- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: var(--e4); }
.fila { display: flex; align-items: center; gap: var(--e3); }
.fila > .crece { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.separador { border: 0; border-top: 1px solid var(--borde); margin: var(--e4) 0; }

/* ---- chips de estado ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  background: rgba(184,178,165,.18); color: var(--texto-2);
}
.chip-alerta { background: rgba(251,191,36,.18); color: var(--alerta); }
.chip-primario { background: rgba(242,151,27,.18); color: var(--primario); }
.chip-exito { background: rgba(52,211,153,.18); color: var(--exito); }
.chip-info { background: rgba(125,211,252,.18); color: var(--info); }
.chip-peligro { background: rgba(248,113,113,.18); color: var(--peligro); }

/* ---- formularios ---- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e4); }
.campo label { font-size: 14px; font-weight: 600; color: var(--texto-2); }
.inp, .sel, .txa {
  width: 100%; min-height: 48px; padding: 0 var(--e4); border-radius: var(--radio);
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto);
  transition: border-color var(--dur);
}
.txa { padding: var(--e3) var(--e4); min-height: 80px; resize: vertical; }
.inp::placeholder, .txa::placeholder { color: var(--texto-3); }
.inp:focus, .sel:focus, .txa:focus { border-color: var(--primario); outline: none; }
.campo .error { font-size: 13px; color: var(--peligro); }
.campo.con-error .inp { border-color: var(--peligro); }
.segmentos { display: flex; gap: var(--e2); }
.segmentos button {
  flex: 1; min-height: 44px; border-radius: var(--radio); border: 1px solid var(--borde); background: transparent; color: var(--texto-2); font-weight: 600;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.segmentos button.on { background: rgba(242,151,27,.14); border-color: var(--primario); color: var(--primario); }
.segmentos button svg { width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; }
.ico { width: 20px; height: 20px; }

/* ---- números y precios ---- */
.precio { font-family: var(--display); font-size: 22px; color: var(--primario); letter-spacing: .02em; }
.monto { font-family: var(--display); letter-spacing: .02em; }

/* ---- toast ---- */
#toast {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 16px); z-index: 1000;
  max-width: min(92vw, 420px); padding: 12px 16px; border-radius: var(--radio);
  background: var(--superficie-2); border: 1px solid var(--borde); border-left: 3px solid var(--primario);
  box-shadow: 0 8px 24px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity var(--dur), transform var(--dur);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.exito { border-left-color: var(--exito); }
#toast.peligro { border-left-color: var(--peligro); }
#toast.alerta { border-left-color: var(--alerta); }

/* ---- aparición de listas ---- */
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.aparece { animation: aparecer 220ms ease-out both; }

/* ---- ayuda contextual: los textos explicativos se ven solo con el boton ? encendido ---- */
html:not(.ayuda-on) .ayuda-texto { display: none !important; }
#ayudaBtn { position: fixed; right: 14px; bottom: 14px; z-index: 900; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--borde); background: var(--superficie-2); color: var(--texto); font: 800 20px/40px var(--display); text-align: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
html.ayuda-on #ayudaBtn { background: var(--primario); border-color: var(--primario-hover); color: var(--sobre-primario); }

/* ---- utilidades ---- */
.mt1 { margin-top: var(--e1); } .mt2 { margin-top: var(--e2); } .mt3 { margin-top: var(--e3); } .mt4 { margin-top: var(--e4); } .mt5 { margin-top: var(--e5); } .mt6 { margin-top: var(--e6); }
.mb2 { margin-bottom: var(--e2); } .mb3 { margin-bottom: var(--e3); } .mb4 { margin-bottom: var(--e4); }
.texto-2 { color: var(--texto-2); } .texto-3 { color: var(--texto-3); } .chico { font-size: 14px; } .minimo { font-size: 12px; }
.centrado { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== PLANO DEL SALÓN (caja lo muestra, config lo diseña; el dibujo vive en comun.js) ===== */
.plano { position: relative; aspect-ratio: 4 / 3; background-color: #1d1b18; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 32px 32px; }
.plano .fijo { position: absolute; transform: translate(-50%, -50%); border-radius: 8px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.16); color: var(--texto-3); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 2px; box-sizing: border-box; overflow: hidden; line-height: 1.1; }
.plano .fijo .cont { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
/* girado: el contenido se centra en absoluto y se rota entero (90 se lee de abajo hacia arriba, 270 de arriba hacia abajo, 180 dado vuelta) */
.plano .fijo.rot90 .cont, .plano .fijo.rot180 .cont, .plano .fijo.rot270 .cont { position: absolute; left: 50%; top: 50%; width: max-content; max-width: none; white-space: nowrap; }
.plano .fijo.rot90 .cont { transform: translate(-50%, -50%) rotate(-90deg); }
.plano .fijo.rot270 .cont { transform: translate(-50%, -50%) rotate(90deg); }
.plano .fijo.rot180 .cont { transform: translate(-50%, -50%) rotate(180deg); }
.plano .fijo svg { width: 18px; height: 18px; flex: 0 0 auto; }
.plano .fijo.calor { background: linear-gradient(180deg, rgba(242,151,27,.12), rgba(242,151,27,.03)); border-color: rgba(242,151,27,.4); color: var(--primario); }
.plano .fijo.pared { background: rgba(255,255,255,.14); border: none; border-radius: 3px; }
.plano .fijo.texto { background: none; border: none; font-size: 11px; letter-spacing: .12em; overflow: visible; }
.plano .mesa { position: absolute; width: var(--mesa-w, 12%); transform: translate(-50%, -50%); cursor: pointer; transition: transform 120ms; user-select: none; -webkit-user-select: none; }
/* sin agrandar al pasar el mouse: al hacer clic se volvía a dibujar y parecía que la mesa se achicaba */
.plano .mesa:hover .tabla { filter: brightness(1.3); }
.plano .mesa svg { width: 100%; height: auto; display: block; overflow: visible; }
.plano .silla { fill: #3a3a3a; }
.plano .mesa.abierta .silla, .plano .mesa.pedida .silla { fill: #5a4a2f; }
.plano .tabla { fill: #2e2419; stroke: #4a4a4a; stroke-width: 3; }
.plano .num { font-family: var(--display); font-size: 34px; fill: var(--texto-2); text-anchor: middle; }
.plano .lin { font-family: var(--sans); font-weight: 700; font-size: 12px; fill: var(--texto-2); text-anchor: middle; }
.plano .lin.monto { font-family: var(--display); font-size: 15px; fill: var(--primario); }
.plano .halo { fill: none; stroke-width: 5; opacity: 0; }
.plano .mesa.abierta .tabla { stroke: var(--primario); } .plano .mesa.abierta .num { fill: var(--texto); } .plano .mesa.abierta .halo { stroke: var(--primario); opacity: .28; }
.plano .mesa.pedida .tabla { stroke: var(--info); } .plano .mesa.pedida .num { fill: var(--texto); } .plano .mesa.pedida .halo { stroke: var(--info); opacity: .3; }
/* mesa unida a otra: comparte la cuenta de la principal; borde punteado */
.plano .mesa.unida .tabla { stroke-dasharray: 7 4; }
/* la mesa tiene un pedido del QR esperando que la caja lo acepte */
.plano .mesa.pide .tabla { stroke: var(--alerta); stroke-width: 4; } .plano .mesa.pide .halo { stroke: var(--alerta); opacity: .55; animation: plano-lat 1s ease-in-out infinite; }
.plano .mesa .pide-n { fill: var(--alerta); } .plano .mesa .pide-t { font-family: var(--sans); font-weight: 800; font-size: 13px; fill: #000; text-anchor: middle; }
.plano .mesa.tarde .tabla { stroke: var(--alerta); } .plano .mesa.tarde .halo { stroke: var(--alerta); opacity: .45; animation: plano-lat 1.6s ease-in-out infinite; }
@keyframes plano-lat { 0%, 100% { opacity: .2; } 50% { opacity: .65; } }
/* mesa seleccionada (la que se está atendiendo): la tabla se pinta de naranja y el halo se ve entero, sin cambiar de tamaño. Se llama .marcada porque .sel es la clase de los <select> */
.plano .mesa.marcada .tabla { fill: rgba(242,151,27,.30); stroke: var(--primario); }
.plano .mesa.marcada .num, .plano .mesa.marcada .lin { fill: var(--texto); }
.plano .mesa.marcada .halo { stroke: var(--primario); opacity: 1; stroke-width: 6; }
.plano .badge { fill: #111; stroke: #3a3a3a; stroke-width: 1.5; }
.plano .badge-t { font-family: var(--sans); font-weight: 700; font-size: 11px; fill: var(--texto-2); text-anchor: middle; }
.plano .tarde .badge { stroke: var(--alerta); } .plano .tarde .badge-t { fill: var(--alerta); }
@media (max-width: 600px) { .plano .mesa { width: calc(var(--mesa-w, 12%) * 1.3); } .plano .fijo { font-size: 8px; } .plano .fijo svg { width: 16px; height: 16px; } }
.leyenda-plano { display: flex; gap: 18px; margin-top: 8px; font-size: 12px; color: var(--texto-2); flex-wrap: wrap; align-items: center; justify-content: center; }
.leyenda-plano span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 2px solid #4a4a4a; background: #2b2b2b; }
.leyenda-plano .l-ab::before { border-color: var(--primario); } .leyenda-plano .l-pe::before { border-color: var(--info); } .leyenda-plano .l-ta::before { border-color: var(--alerta); } /* prefijo l- para no chocar con .pe (tarjetas para entregar) de la caja */