/* Ronda · estilos compartidos. Negro y mostaza; una sola columna pensada para el teléfono. */

@font-face {
  font-family: "Ronda Display";
  src: url("../fonts/display.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/* De noche en el bar (oscuro) y al almuerzo en la terraza (claro): sigue al teléfono. */
:root {
  --mostaza: #e3a81c;
  --bg: #000;
  --fg: #fff;
  --dim: #bdb8ab;
  --linea: #3d3a32;
  --titulo: var(--mostaza);
  --alerta: #ff8a7a;
  --foco: var(--mostaza);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not(.portada) {
    --bg: #fff;
    --fg: #000;
    --dim: #57534b;
    --linea: #d6d1c4;
    --titulo: #000;
    --alerta: #b3261e;
    --foco: #000;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.titular {
  font-family: "Ronda Display", "Arial Narrow", Impact, sans-serif;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

/* ───────── Vista del cliente ───────── */
.cabecera {
  background: #000;
  color: #fff;
  padding: 1.25rem 1rem 0.875rem;
  border-bottom: 4px solid var(--mostaza);
}
.cabecera p { margin: 0; color: #d6d1c4; }
.cabecera h1 { margin: 0.15rem 0 0; font-size: clamp(3.25rem, 17vw, 5rem); color: var(--mostaza); }
.cabecera .idiomas { margin-top: 0.75rem; flex-wrap: wrap; }
.cabecera .idiomas > * { padding: 0 0.8rem; border-color: #3d3a32; color: #fff; font-size: 0.9375rem; }
.cabecera .idiomas [aria-pressed="true"] { background: var(--mostaza); border-color: var(--mostaza); color: #000; }

.chips { display: flex; gap: 0.5rem; }
.chips > * {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.95rem;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
nav.chips {
  position: sticky;
  top: 0;
  z-index: 5;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.625rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--linea);
}
nav.chips [aria-current] { background: var(--mostaza); border-color: var(--mostaza); color: #000; }

main { max-width: 34rem; margin: 0 auto; padding: 0 1rem; }
main section { scroll-margin-top: 4.5rem; }
main h2 { margin: 2.25rem 0 0.25rem; font-size: 2.5rem; color: var(--titulo); }

.plato { padding: 0.9rem 0; border-bottom: 1px solid var(--linea); }
.fila { display: flex; align-items: baseline; gap: 0.5rem; }
.fila h3 { margin: 0; font-size: 1.0625rem; font-weight: 650; }
/* La línea punteada entre el nombre y el precio, como en la pizarra del bar. */
.guia { flex: 1; min-width: 1.25rem; border-bottom: 2px dotted var(--linea); transform: translateY(-0.2em); }
.precio { font-size: 1.5rem; white-space: nowrap; }
.sin { color: var(--dim); font-size: 0.9375rem; white-space: nowrap; }
.desc { margin: 0.2rem 0 0; color: var(--dim); font-size: 0.9375rem; }
.plato .desc { padding-right: 3.5rem; }
.tamanos { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.tamanos li { padding: 0.15rem 0; }

.agotado h3 { color: var(--dim); text-decoration: line-through; }
.contiene { border-left: 4px solid var(--alerta); padding-left: 0.75rem; }
.aviso-alergia { margin: 0.3rem 0 0; color: var(--alerta); font-weight: 650; }

.alergias { margin-top: 1rem; }
.alergias summary { min-height: 2.75rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; }
.alergias summary::before { content: "+"; font-weight: 400; font-size: 1.5rem; line-height: 1; }
.alergias[open] summary::before { content: "−"; }
.alergias summary::-webkit-details-marker { display: none; }
.alergias .chips { flex-wrap: wrap; margin-top: 0.6rem; }
.alergias [aria-pressed="true"] { background: var(--alerta); border-color: var(--alerta); color: var(--bg); }

.franja { margin: 1rem 0 0; padding: 0.75rem 1rem; background: var(--mostaza); color: #000; font-weight: 600; }
.legal { padding: 2rem 0 3rem; color: var(--dim); font-size: 0.875rem; }
.legal p { margin: 0 0 0.35rem; }

.mensaje { max-width: 34rem; margin: 0 auto; padding: 22vh 1.25rem 0; }
.mensaje h1 { margin: 0 0 0.5rem; font-size: 2.75rem; color: var(--titulo); }
.mensaje p { margin: 0; color: var(--dim); font-size: 1.0625rem; }

/* ───────── Pedir: botones, carrito, hoja inferior ───────── */
.plato { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 0.75rem; align-items: start; }
.plato .info { min-width: 0; }
.agotado { grid-template-columns: 1fr; }
.mas, .cant button {
  width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%;
  background: var(--mostaza); color: #000;
  font: 700 1.5rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.mas:disabled, .cant button:disabled { background: var(--linea); color: var(--dim); cursor: not-allowed; }
.accion { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.enpedido { font-size: 0.75rem; color: var(--mostaza); font-weight: 600; white-space: nowrap; }
.cant { display: inline-flex; align-items: center; gap: 0.25rem; }
.cant output { min-width: 1.75rem; text-align: center; font-weight: 700; font-size: 1.125rem; }

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--linea);
}
.barra .principal { max-width: 34rem; margin: 0 auto; }
body.con-barra main { padding-bottom: 5rem; }
body.con-llamadas main { padding-bottom: 9rem; }
.llamadas { display: flex; gap: 0.5rem; max-width: 34rem; margin: 0 auto 0.5rem; }
.llamadas .secundario { flex: 1; }
.llamadas:empty { display: none; }
.motivos { display: grid; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.campo { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.campo input { flex: 1; min-width: 0; padding: 0.6rem; border: 1.5px solid var(--linea); border-radius: 0.5rem; background: var(--bg); color: var(--fg); font: inherit; }
.franja.unirse { display: grid; gap: 0.5rem; }
.franja.unirse input { border-color: #000; background: #fff; color: #000; font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; max-width: 9rem; }
.franja.unirse .secundario { border-color: #000; color: #000; }
.principal {
  display: block; width: 100%; min-height: 3.25rem;
  border: 0; border-radius: 0.6rem;
  background: var(--mostaza); color: #000;
  font: 700 1.125rem system-ui, sans-serif;
  cursor: pointer;
}
.principal:disabled { background: var(--linea); color: var(--dim); cursor: not-allowed; }
.enlace { border: 0; background: none; color: var(--mostaza); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0.25rem; }

.toast {
  position: fixed; left: 1rem; right: 1rem; bottom: 5.5rem; z-index: 7;
  max-width: 32rem; margin: 0 auto; padding: 0.75rem 1rem;
  background: var(--fg); color: var(--bg); border-radius: 0.6rem; font-weight: 600;
  opacity: 0; transform: translateY(0.5rem); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.toast.visible { opacity: 1; transform: none; }

/* La hoja inferior: <dialog> nativo (foco atrapado y Esc gratis) */
.hoja {
  position: fixed; inset: auto 0 0 0; margin: 0 auto;
  width: 100%; max-width: 34rem; max-height: 88vh; max-height: 88dvh; overflow: auto;
  padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
  border: 0; border-radius: 1rem 1rem 0 0;
  background: var(--bg); color: var(--fg);
}
.hoja::backdrop { background: rgba(0, 0, 0, 0.6); }
.hoja header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; padding: 1rem 0 0.5rem; background: var(--bg); }
.hoja h2 { margin: 0; font-size: 2.25rem; color: var(--titulo); }
.hoja .cerrar { width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--linea); border-radius: 50%; background: none; color: var(--fg); font-size: 1.5rem; cursor: pointer; }
.hoja fieldset { margin: 1rem 0 0; padding: 0; border: 0; }
.hoja legend { padding: 0; font-weight: 700; }
.opcion { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.25rem 0; border-bottom: 1px solid var(--linea); cursor: pointer; }
.opcion input { width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--mostaza); }
.opcion > span:nth-child(2) { flex: 1; }
.opcion .extra { color: var(--dim); font-size: 0.9375rem; }
.opcion .monto { font-size: 1.75rem; color: var(--titulo); }
.total-mesa.grande { margin-top: 1.25rem; padding: 0.75rem 1rem; border: 2px solid var(--mostaza); border-radius: 0.75rem; font-size: 1.125rem; }
.total-mesa.grande strong { font-size: 3rem; }
.opcion input[type=number] { width: 9rem; padding: 0.4rem 0.6rem; border: 1.5px solid var(--linea); border-radius: 0.5rem; background: none; color: var(--fg); font: 700 1.5rem system-ui, sans-serif; text-align: right; }
.opcion input[type=number]:disabled { opacity: 0.4; }
.nota input[type=email] { display: block; width: 100%; margin-top: 0.35rem; padding: 0.6rem; border: 1.5px solid var(--linea); border-radius: 0.5rem; background: none; color: var(--fg); font: inherit; }
.opcion.agotada { color: var(--dim); text-decoration: line-through; }
.opcion.agotada .extra { text-decoration: none; }
.hoja footer { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.hoja footer .principal { flex: 1; }
.hoja footer .total-mesa { flex: 1; margin: 0; }
.nota { display: block; margin-top: 1rem; font-weight: 600; }
.nota textarea { display: block; width: 100%; margin-top: 0.35rem; padding: 0.6rem; border: 1.5px solid var(--linea); border-radius: 0.5rem; background: none; color: var(--fg); font: inherit; }
.lineas { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.lineas li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.4rem 0; }
.lineas.pedido li { border-bottom: 1px solid var(--linea); min-height: 3.25rem; }
.lineas .anulada { color: var(--dim); text-decoration: line-through; }
.importe { white-space: nowrap; color: var(--dim); }
.total-mesa { display: flex; justify-content: space-between; align-items: baseline; margin: 0.75rem 0 0; font-weight: 600; }
.total-mesa strong { font-size: 1.75rem; color: var(--titulo); }

/* Etapa d: retenido, la cuenta, sugerencias, gracias */
.retenido { margin: 0.75rem 0; padding: 0.75rem 1rem; border: 2px dashed var(--mostaza); border-radius: 0.75rem; }
.retenido p { margin: 0 0 0.5rem; font-weight: 600; }
.la-cuenta { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--linea); }
.personas { margin: 0.25rem 0 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--linea); border-radius: 0.5rem; }
.personas .fila-cuenta { margin: 0.25rem 0; }
.personas .yo { font-weight: 700; }
.campo.nombre { display: grid; gap: 0.35rem; margin: 0.25rem 0 0.5rem; }
.fila-cuenta { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin: 0.5rem 0 0; }
.fila-cuenta .cant { gap: 0.35rem; }
.fila-cuenta .cant button { width: 2.25rem; height: 2.25rem; font-size: 1.25rem; }
.la-cuenta a { color: var(--mostaza); }
.sugerencias { margin-top: 1rem; }
.sugerencias .secundario { display: block; width: 100%; margin-top: 0.4rem; text-align: left; }
.retener { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; margin-top: 0.75rem; font-weight: 600; cursor: pointer; }
.retener input { width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--mostaza); }
.franja.gracias p { margin: 0 0 0.5rem; }
.franja.gracias .boton { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: var(--mostaza); color: #000; font-weight: 700; text-decoration: none; border-radius: 0.5rem; }

/* "Tu mesa": código, wifi y lo pedido */
#cuenta { margin-top: 1rem; padding: 1rem; border: 2px solid var(--mostaza); border-radius: 0.75rem; }
#cuenta h2 { margin: 0 0 0.5rem; font-size: 2.25rem; }
#cuenta .datos p { margin: 0 0 0.35rem; }
.codigo { font-size: 1.75rem; color: var(--mostaza); letter-spacing: 0.1em; vertical-align: -0.1em; }
.rondas { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.rondas > li { padding: 0.75rem 0 0.25rem; border-top: 1px solid var(--linea); }
.ronda-titulo { margin: 0; font-weight: 700; }
.ticket { margin-top: 0.4rem; }
.estado { display: flex; justify-content: space-between; align-items: center; margin: 0; font-weight: 600; }
.badge { padding: 0.15rem 0.6rem; border-radius: 999px; border: 1.5px solid var(--linea); font-size: 0.875rem; }
.badge.queued, .badge.preparing { border-color: var(--mostaza); color: var(--mostaza); }
.badge.ready { background: var(--mostaza); border-color: var(--mostaza); color: #000; }
.badge.served { color: var(--dim); }
.badge.cancelled { color: var(--alerta); border-color: var(--alerta); }
.franja.gracias { background: var(--fg); color: var(--bg); }

/* ───────── Personal: inicio de sesión y pantalla de cocina y barra ───────── */
.login { max-width: 22rem; margin: 0 auto; padding: 12vh 1.25rem 0; }
.login h1 { margin: 0; font-size: 3.5rem; color: var(--titulo); }
.login label { display: block; margin-top: 1rem; font-weight: 600; }
.login input { display: block; width: 100%; margin-top: 0.35rem; padding: 0.7rem; border: 1.5px solid var(--linea); border-radius: 0.5rem; background: none; color: var(--fg); font: inherit; }
.login .aviso { min-height: 1.5rem; margin: 0.75rem 0 0; color: var(--alerta); font-weight: 600; }
.login .principal { margin-top: 0.75rem; }
.secundario {
  min-height: 2.75rem; padding: 0 1rem;
  border: 1.5px solid var(--mostaza); border-radius: 0.5rem;
  background: none; color: var(--fg); font: 600 1rem system-ui, sans-serif; cursor: pointer;
}
.secundario.activo { background: var(--mostaza); color: #000; }
.secundario:disabled { opacity: 0.5; cursor: wait; }

.kds body { padding: 0 1rem 2rem; }
.kds-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 4px solid var(--mostaza); }
.kds-cabecera h1 { margin: 0; font-size: 3rem; color: var(--mostaza); }
.kds-cabecera p { margin: 0; }
.kds-cabecera a { color: var(--fg); }
.kds-cabecera.desactualizado { border-color: var(--alerta); }
.controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.columnas { display: grid; gap: 1rem; margin-top: 1rem; }
.columnas h2 { margin: 0 0 0.5rem; font-size: 2rem; color: var(--titulo); }
.columnas h2 .n { color: var(--dim); font-size: 1.25rem; }
.tarjeta { margin-bottom: 0.75rem; padding: 0.75rem 1rem; border: 2px solid var(--linea); border-radius: 0.75rem; }
.tarjeta.tarde { border-color: var(--alerta); }
.tarjeta header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.tarjeta h3 { margin: 0; font-size: 2rem; }
.tarjeta .tiempo { font-weight: 700; white-space: nowrap; }
.tarjeta.tarde .tiempo { color: var(--alerta); }
.tarjeta .lineas li { display: block; padding: 0.25rem 0; font-size: 1.125rem; }
.nota-ticket { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; background: var(--mostaza); color: #000; font-weight: 600; border-radius: 0.4rem; }
.acciones { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.acciones .principal { flex: 1; min-height: 2.75rem; font-size: 1rem; }
.acciones .secundario { flex: 1; }
.agotar { margin-top: 1.5rem; }
.agotar summary { min-height: 2.75rem; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.productos { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.productos li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid var(--linea); }
.productos .agotado span { color: var(--dim); text-decoration: line-through; }
.pie { margin-top: 1.5rem; }
@media (min-width: 48rem) {
  .columnas { grid-template-columns: repeat(3, 1fr); }
  .productos { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}

/* ───────── Vista del garzón ───────── */
.interruptores { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--linea); }
.interruptor { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 600; cursor: pointer; }
.interruptor input { width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--mostaza); }
.mesas { display: grid; gap: 1rem; margin-top: 1rem; }
.mesa { padding: 0.75rem 1rem; border: 2px solid var(--linea); border-radius: 0.75rem; }
.mesa header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.mesa h3 { margin: 0; font-size: 2rem; }
.mesa.libre h3 { color: var(--dim); }
.mesa.pendiente { border-color: var(--mostaza); }
.mesa.cuenta { border-color: var(--fg); }
.mesa.quieta { border-style: dashed; }
.mesa.unida { border-style: dotted; border-color: var(--mostaza); }
.mesa.unida .estado-mesa { color: var(--mostaza); }
.estado-mesa { margin: 0.25rem 0 0; font-weight: 600; }
.mesa.libre .estado-mesa { color: var(--dim); }
.alerta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0.4rem 0.6rem; background: var(--mostaza); color: #000; border-radius: 0.4rem; font-weight: 600; }
.alerta .secundario { border-color: #000; color: #000; min-height: 2.25rem; }
.alerta.lista { background: var(--fg); color: var(--bg); }
.alerta-texto { color: var(--alerta); font-weight: 600; }
.mesa .acciones:empty { display: none; }
.caja { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.75rem; font-weight: 400; font-size: 0.9375rem; color: var(--dim); }
.caja input { accent-color: var(--mostaza); }
.linea-acciones { display: inline-flex; align-items: center; gap: 0.35rem; }
.linea-acciones .secundario { min-height: 2.25rem; padding: 0 0.6rem; }
.acciones-cuenta { flex-wrap: wrap; }
.acciones-cuenta select { min-height: 2.75rem; padding: 0 0.75rem; border: 1.5px solid var(--mostaza); border-radius: 0.5rem; background: var(--bg); color: var(--fg); font: 600 1rem system-ui, sans-serif; }
.hoja.ancha { max-width: 48rem; }
.carta-garzon { display: grid; gap: 1rem; }
.carta-garzon h3 { margin: 1rem 0 0.25rem; font-size: 1.5rem; color: var(--titulo); }
.producto { display: flex; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.4rem 0; border: 0; border-bottom: 1px solid var(--linea); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.producto:disabled { color: var(--dim); text-decoration: line-through; }
.producto .extra { color: var(--dim); white-space: nowrap; }
@media (min-width: 48rem) {
  .mesas { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .carta-garzon { grid-template-columns: 1fr 18rem; align-items: start; }
  .carta-garzon > div:last-child { position: sticky; top: 4rem; }
}

/* Personas y pagos */
.fila-pago { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0 0; }
.fila-pago > span:first-child, .fila-pago > input { flex: 1; min-width: 0; }
.fila-pago input[type=text], .fila-pago input[type=number] { padding: 0.4rem 0.6rem; border: 1.5px solid var(--linea); border-radius: 0.5rem; background: none; color: var(--fg); font: inherit; }
.fila-pago input[type=number] { width: 8rem; text-align: right; }
.quien, .fila-pago select { min-height: 2.25rem; padding: 0 0.5rem; border: 1.5px solid var(--linea); border-radius: 0.5rem; background: var(--bg); color: var(--fg); font: inherit; max-width: 11rem; }
.pagos .enlace { padding: 0.25rem 0.5rem; }
.hoja .personas { margin: 0.75rem 0; }
.hoja .personas .campo { margin-top: 0.5rem; }

/* Resumen del día */
.enlace-boton { display: inline-flex; align-items: center; text-decoration: none; }
.periodos { flex-wrap: wrap; margin: 0.5rem 0; }
.fechas { align-items: center; flex-wrap: wrap; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0.5rem 0 1rem; }
.cifras p { margin: 0; padding: 0.75rem; border: 1.5px solid var(--linea); border-radius: 0.75rem; display: grid; }
.cifras strong { font-size: 2rem; color: var(--titulo); }
.cifras span { color: var(--dim); font-size: 0.875rem; }
.hoja h3 { margin: 1.25rem 0 0.25rem; font-size: 1.5rem; color: var(--titulo); }
table.resumen { width: 100%; border-collapse: collapse; }
table.resumen th, table.resumen td { padding: 0.35rem 0.5rem 0.35rem 0; text-align: left; border-bottom: 1px solid var(--linea); }
table.resumen th { color: var(--dim); font-weight: 600; font-size: 0.875rem; }
table.resumen .num { text-align: right; white-space: nowrap; }
table.resumen th:not(:first-child) { text-align: right; }
.campo input[type=date] { padding: 0.5rem; border: 1.5px solid var(--linea); border-radius: 0.5rem; background: none; color: var(--fg); font: inherit; color-scheme: dark; }

/* ───────── Administrador ───────── */
.pestanas { margin: 0.75rem 0 1rem; overflow-x: auto; scrollbar-width: none; }
.pestanas [aria-current] { background: var(--mostaza); border-color: var(--mostaza); color: #000; }
.admin-carta details { margin: 0.5rem 0; border: 1px solid var(--linea); border-radius: 0.75rem; padding: 0 1rem; }
.admin-carta details.inactiva summary strong { color: var(--dim); text-decoration: line-through; }
.admin-carta summary { display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; cursor: pointer; }
.admin-carta summary .acciones-inline { margin-left: auto; display: flex; gap: 0.25rem; }
.orden { display: inline-block; min-width: 1.75rem; color: var(--dim); font-size: 0.875rem; }
.productos-admin { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.productos-admin .inactivo .producto > span:first-child { color: var(--dim); text-decoration: line-through; }
.campo-idiomas { display: grid; gap: 0.35rem; margin-top: 0.75rem; }
.campo-idiomas .etiqueta, .campo-admin .etiqueta { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.campo-admin { display: block; margin-top: 0.75rem; }
.campo-idiomas input, .campo-admin input, .campo-admin select, .campo-admin textarea, .ajustes textarea, .grupo-admin input {
  width: 100%; padding: 0.55rem 0.7rem; border: 1.5px solid var(--linea); border-radius: 0.5rem; background: none; color: var(--fg); font: inherit; }
.fila-campos { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.casillas { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.grupo-admin { margin-top: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--linea); border-radius: 0.5rem; }
.grupo-admin legend { padding: 0 0.25rem; color: var(--dim); font-size: 0.875rem; }
.grupo-admin .campo-admin { margin: 0; width: 5rem; }
.grupo-admin input[type=number] { width: 6rem; }
.opcion-admin { padding-left: 1rem; }
.hoja fieldset { margin-top: 1rem; }
.ajustes .interruptor { margin-top: 0.75rem; }
.aviso-qr { max-width: 60rem; margin: 1rem auto; padding: 0 1rem; }
.aviso-qr .principal { display: inline-block; width: auto; padding: 0 1.5rem; margin-left: 1rem; }
.hoja-qr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 60rem; margin: 0 auto; padding: 0 1rem 2rem; }
.tarjeta-qr { padding: 1.25rem; border: 2px solid var(--mostaza); border-radius: 0.75rem; text-align: center; background: #fff; color: #000; break-inside: avoid; }
.tarjeta-qr .local { margin: 0; font-weight: 600; }
.tarjeta-qr h2 { margin: 0.25rem 0 0.5rem; font-size: 3rem; color: #000; }
.tarjeta-qr .qr svg { display: block; width: 60%; max-width: 14rem; margin: 0 auto; }
.tarjeta-qr p:last-child { margin: 0.75rem 0 0; font-size: 0.9375rem; }
.qr body { background: #fff; color: #000; color-scheme: light; }
@media print {
  .qr body { padding: 0; }
  .hoja-qr { grid-template-columns: repeat(2, 1fr); gap: 8mm; padding: 0; max-width: none; }
  .tarjeta-qr { height: 88mm; border: 1px dashed #999; border-radius: 0; }
  @page { size: A4 portrait; margin: 10mm; }
}

/* Portada: contacto; páginas legales */
.contacto { display: grid; gap: 0.6rem; max-width: 30rem; }
.contacto label { display: grid; gap: 0.25rem; font-weight: 600; }
.contacto input, .contacto textarea { padding: 0.6rem; border: 1.5px solid var(--linea); border-radius: 0.5rem; background: none; color: var(--fg); font: inherit; }
.contacto .aviso { min-height: 1.25rem; margin: 0; color: var(--mostaza); font-weight: 600; }
.contacto .boton { border: 0; cursor: pointer; font: 700 1rem system-ui, sans-serif; }
.vistas li .contacto { grid-column: 1 / -1; }
.texto-legal { max-width: 42rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.texto-legal h1 { font-size: 3rem; color: var(--titulo); margin: 0.5rem 0; }
.texto-legal h2 { margin: 1.75rem 0 0.5rem; font-size: 1.375rem; }
.texto-legal a { color: var(--mostaza); }
.texto-legal li { margin-bottom: 0.5rem; }
.boton-enlace { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
table.plataforma td, table.plataforma th { font-size: 0.9375rem; }
table.plataforma .inactivo td { color: var(--dim); }
table.plataforma input[type=date] { padding: 0.3rem; border: 1.5px solid var(--linea); border-radius: 0.4rem; background: none; color: var(--fg); font: inherit; color-scheme: dark; }

/* ───────── Pre-cuenta (80 mm) ───────── */
.precuenta body { background: #fff; color: #000; color-scheme: light; }
.ticket-papel { width: 72mm; margin: 1rem auto; font: 12px/1.35 "Courier New", monospace; color: #000; }
.ticket-papel h1 { margin: 0; font: 700 16px/1.2 "Courier New", monospace; text-align: center; }
.ticket-papel h2 { margin: 0.5rem 0; font: 700 13px/1.2 "Courier New", monospace; text-align: center; border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 0.25rem 0; }
.ticket-papel p { margin: 0.25rem 0; }
.ticket-papel > p:first-of-type { text-align: center; }
.ticket-papel table { width: 100%; border-collapse: collapse; }
.ticket-papel td { padding: 0.15rem 0; vertical-align: top; }
.ticket-papel .num { text-align: right; white-space: nowrap; padding-left: 0.5rem; }
.ticket-papel .total { display: flex; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.25rem; border-top: 1px dashed #000; font-size: 14px; }
.ticket-papel .fila { display: flex; justify-content: space-between; gap: 0.5rem; }
.ticket-papel .aviso-legal { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px dashed #000; font-size: 11px; text-align: center; }
.no-imprimir { width: 72mm; margin: 0 auto; }
@media print {
  @page { size: 80mm auto; margin: 4mm; }
  .no-imprimir { display: none; }
  .ticket-papel { width: auto; margin: 0; }
}

/* ───────── Portada de la demostración (siempre oscura) ───────── */
.portada body { padding: 0 1.25rem 3rem; }
.portada .ancho { max-width: 62rem; margin: 0 auto; }
.inicio { display: grid; gap: 2.5rem; padding: 2.5rem 0 3rem; align-items: center; }
.inicio h1 { margin: 0; font-size: clamp(6rem, 30vw, 13rem); color: var(--mostaza); }
.inicio .bajada { margin: 1rem 0 0; max-width: 34ch; font-size: 1.1875rem; }
/* El letrero de mesa: el objeto que el cliente ve primero en un local. */
.letrero {
  width: min(100%, 19rem);
  padding: 1.25rem 1.25rem 1rem;
  background: var(--mostaza);
  color: #000;
  transform: rotate(-2deg);
  justify-self: center;
}
.letrero h2 { margin: 0 0 0.75rem; font-size: 3rem; }
.letrero #qr { background: #fff; aspect-ratio: 1; }
.letrero svg { display: block; width: 100%; height: 100%; }
.letrero p { margin: 0.75rem 0 0; font-weight: 600; }
.mesas { margin: 0; color: var(--dim); }
.mesas a { display: inline-block; padding: 0.6rem 0.35rem; color: var(--fg); font-weight: 600; }

.vistas { list-style: none; margin: 0; padding: 0; }
.portada h2.seccion { margin: 3rem 0 1rem; font-size: 2.5rem; }
.vistas li { display: grid; gap: 0.35rem 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--linea); }
.vistas h3 { margin: 0; font-size: 2rem; color: var(--mostaza); }
.vistas p { margin: 0; color: var(--dim); max-width: 52ch; }
.vistas .boton {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  margin-top: 0.35rem;
  background: var(--mostaza);
  color: #000;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0.5rem;
}
.vistas .pronto { color: var(--dim); font-weight: 600; margin-top: 0.35rem; }
.vistas .botones { display: flex; gap: 0.5rem; }
.vistas code { color: var(--mostaza); }
.pie { margin: 2.5rem 0 0; color: var(--dim); font-size: 0.875rem; }

@media (min-width: 48rem) {
  .inicio { grid-template-columns: 1fr auto; padding: 4rem 0; }
  .vistas li { grid-template-columns: 14rem 1fr auto; align-items: center; }
  .vistas .boton, .vistas .pronto, .vistas .botones { margin-top: 0; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .toast { transition: none; }
}