/* Mahaia reservas - estilos comunes (página pública, panel del restaurante y administración)
   Colores de la marca Mahaia (teja, mantel, carbón, piedra, azafrán y olivo).
   Tipografías: Bricolage Grotesque para títulos y cifras, Figtree para el texto (ambas con licencia libre OFL,
   servidas desde el propio servidor: no se llama a Google). */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque-Variable.woff") format("woff");
  font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Variable.woff") format("woff");
  font-weight: 300 900; font-display: swap; }
:root {
  --teja: #B4412A; --teja-intensa: #8E3220; --azafran: #E0A526; --olivo: #2F5D46;
  --acento: var(--teja);          /* el restaurante puede cambiarlo por su color */
  --acento-texto: #ffffff;
  --fondo: #F7F2EA;               /* mantel */
  --papel: #ffffff;
  --tinta: #1F1B17;               /* carbón */
  --suave: #6B625A;               /* piedra */
  --linea: #E4DDD3;
  --linea-suave: #EFE9E1;
  --borde-campo: #D6CDC1;
  --hueso: #F1ECE5;
  --ok: #2F5D46;   --ok-fondo: #E3EFE7;
  --error: #A3301E; --error-fondo: #FBE6E1;
  --aviso: #7A5200; --aviso-fondo: #FCF1D6;
  --radio: 18px; --radio-peq: 12px;
  --sombra: 0 1px 2px rgba(31,27,23,.04), 0 4px 16px rgba(31,27,23,.04);
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--display);        /* nombre antiguo, se mantiene por compatibilidad */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 var(--sans); color: var(--tinta); background: var(--fondo);
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01"; }
a { color: var(--teja-intensa); text-underline-offset: 2px; }
a:hover { color: #6E2618; }
.portada a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
h1, .serif { font-family: var(--display); font-weight: 750; font-size: clamp(1.8rem, 4.5vw, 2.4rem); letter-spacing: -.03em; line-height: 1.02; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
small, .suave { color: var(--suave); }
.ico { flex: none; display: inline-block; vertical-align: middle; }
.contenedor { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 16px; }
.contenedor.ancho { max-width: 1100px; }

/* ---------- Página pública ---------- */
.portada { position: relative; overflow: hidden; background: var(--acento); color: var(--acento-texto);
  padding: 40px 0 76px; border-radius: 0 0 32px 32px; isolation: isolate; }
.portada::before, .portada::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; }
.portada::before { width: 280px; height: 280px; right: -90px; top: -110px; background: rgba(255,255,255,.10); }
.portada::after { width: 150px; height: 150px; right: 70px; bottom: -80px; background: rgba(0,0,0,.10); }
.portada .antetitulo { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.16); padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }
.portada h1 { margin: 0; font-size: clamp(2.2rem, 9vw, 3.2rem); }
.portada p { margin: .6em 0 0; opacity: .92; font-size: 1.02rem; }
.portada .datos-local { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: .95rem; opacity: .95; }
.portada .datos-local span, .portada .datos-local a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.portada + .contenedor { margin-top: -44px; position: relative; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea-suave); border-radius: var(--radio);
           box-shadow: var(--sombra); padding: 22px; margin-bottom: 16px; }
.paso { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.paso h2 { margin: 0; font-size: 1.3rem; }
.paso b { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
          border-radius: 10px; background: var(--tinta); color: #fff; font: 700 .9rem var(--display); }
.pie { text-align: center; padding: 24px 16px 40px; font-size: .88rem; color: var(--suave); }

/* ---------- Formularios ---------- */
label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 6px; }
.campo { margin-bottom: 16px; }
.fila { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .fila { grid-template-columns: 1fr; } }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=time], input[type=search],
input[type=number], input[type=password], input[type=url], select, textarea {
  width: 100%; font: inherit; color: inherit; background: #fff; padding: 11px 14px;
  border: 1.5px solid var(--borde-campo); border-radius: var(--radio-peq); min-height: 48px;
  transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: #BFB4A6; }
input[type=color] { width: 64px; height: 48px; padding: 4px; border: 1.5px solid var(--borde-campo); border-radius: var(--radio-peq); background: #fff; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(31,27,23,.10); }
button:focus-visible, .boton:focus-visible, a:focus-visible { outline: 3px solid var(--teja-intensa); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--acento); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ayuda { font-size: .86rem; color: var(--suave); margin-top: 5px; }

.boton, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 .97rem var(--sans); padding: 11px 18px; min-height: 46px; border-radius: var(--radio-peq); cursor: pointer;
  border: 1.5px solid var(--acento); background: var(--acento); color: var(--acento-texto); text-decoration: none;
  transition: filter .15s, background-color .15s, border-color .15s, transform .05s; }
.boton:hover, button:hover { filter: brightness(1.07); color: var(--acento-texto); }
.boton:active, button:active { transform: translateY(1px); }
.boton.sec, button.sec { background: #fff; color: var(--tinta); border-color: var(--linea); }
.boton.sec:hover, button.sec:hover { filter: none; background: var(--hueso); border-color: #D6CDC1; color: var(--tinta); }
.boton.oscuro, button.oscuro { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.boton.peligro, button.peligro { background: #fff; color: var(--error); border-color: #EBC2BA; }
.boton.peligro:hover, button.peligro:hover { filter: none; background: var(--error-fondo); color: var(--error); }
.boton.peq, button.peq { padding: 6px 12px; min-height: 36px; font-size: .86rem; border-radius: 10px; }
.boton.bloque, button.bloque, .boton-bloque { width: 100%; }
button.bloque, .boton.bloque { min-height: 54px; font-size: 1.05rem; border-radius: 16px; }
button:disabled { opacity: .5; cursor: not-allowed; }
form.en-linea { display: inline; }

/* Horas disponibles */
.turno-titulo { font-weight: 700; margin: 16px 0 8px; color: var(--suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.horas button { background: var(--fondo); color: var(--tinta); border: 1.5px solid transparent; font: 700 1rem var(--display);
  min-height: 48px; padding: 6px; border-radius: 12px; }
.horas button:hover { filter: none; border-color: var(--tinta); color: var(--tinta); }
.horas button[aria-pressed=true] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.cargando { color: var(--suave); padding: 8px 0; }

/* Mensajes */
.msg { border-radius: 14px; padding: 13px 16px; margin-bottom: 16px; font-weight: 500; }
.msg.error { background: var(--error-fondo); color: var(--error); }
.msg.ok { background: var(--ok-fondo); color: var(--ok); }
.msg.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.msg ul { margin: 0; padding-left: 18px; }
.msg a { color: inherit; font-weight: 700; }

.resumen { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 16px; }
.resumen dt { color: var(--suave); }
.resumen dd { margin: 0; font-weight: 600; }

/* Confirmación de la reserva (cliente) */
.billete { position: relative; overflow: hidden; isolation: isolate; background: var(--tinta); color: #fff;
  border-radius: 28px; padding: 26px 22px 22px; margin-bottom: 16px; }
.billete::before { content: ""; position: absolute; z-index: -1; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: var(--acento); opacity: .9; }
.billete .sello { display: inline-block; background: rgba(255,255,255,.12); padding: 6px 12px; border-radius: 999px; font-size: .84rem; font-weight: 700; color: #B9E3C6; }
.billete .sello.pendiente { color: #F2C866; }
.billete .sello.anulada { color: #F0A592; }
.billete h1 { margin: 14px 0 18px; font-size: clamp(2rem, 8vw, 2.4rem); color: #fff; }
.billete .datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.billete .datos div { background: rgba(255,255,255,.08); border-radius: 16px; padding: 12px; }
.billete .datos span { display: block; font-size: .78rem; color: #CFC6BA; }
.billete .datos b { font: 700 1.2rem var(--display); }
.billete p { margin: 16px 0 0; color: #E4DDD3; font-size: .92rem; }
.lista-datos { list-style: none; margin: 0; padding: 4px 20px; }
.lista-datos li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linea-suave); }
.lista-datos li:last-child { border-bottom: 0; }
.lista-datos .ico-caja { width: 40px; height: 40px; border-radius: 12px; background: var(--fondo); color: var(--teja-intensa); display: grid; place-items: center; flex: none; }
.lista-datos .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lista-datos .texto span { font-size: .88rem; color: var(--suave); }
.lista-datos a.accion { font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; }

/* ---------- Panel y administración: estructura con menú lateral ---------- */
.marco { display: flex; min-height: 100vh; }
.lateral { flex: none; width: 252px; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--papel);
  border-right: 1px solid var(--linea-suave); padding: 22px 14px; display: flex; flex-direction: column; gap: 18px; }
.lateral-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px; }
.lateral-logo img { display: block; height: 30px; width: auto; }
.lateral-boton { display: none; }
.lateral-menu { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; color: var(--tinta);
  text-decoration: none; font-weight: 500; font-size: .93rem; }
.lateral nav a .ico { color: var(--suave); }
.lateral nav a:hover { background: var(--fondo); color: var(--tinta); }
.lateral nav a.activo { background: var(--tinta); color: #fff; font-weight: 600; }
.lateral nav a.activo .ico { color: #fff; }
.lateral .globo { margin-left: auto; background: var(--azafran); color: var(--tinta); border-radius: 999px; font-size: .72rem; font-weight: 800; padding: 2px 8px; }
.lateral-titulo { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); padding: 0 12px 6px; }
.lateral-local { display: flex; align-items: center; gap: 11px; background: var(--fondo); border-radius: 14px; padding: 10px 12px; text-decoration: none; color: var(--tinta); }
.lateral-local:hover { color: var(--tinta); background: var(--hueso); }
.lateral-local .inicial { width: 36px; height: 36px; flex: none; border-radius: 10px; color: #fff; display: grid; place-items: center; font: 700 1.05rem var(--display); }
.lateral-local b { display: block; font-size: .92rem; line-height: 1.2; }
.lateral-local small { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; }
.lateral-salir { margin-top: auto; }
.lateral-salir button { width: 100%; justify-content: flex-start; border-color: transparent; color: var(--suave); font-weight: 600; }
.sello-admin { align-self: flex-start; margin-left: 6px; background: rgba(224,165,38,.18); color: #F2C866; border-radius: 999px;
  padding: 4px 11px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* administración: menú oscuro */
.lateral.oscuro { background: var(--tinta); border-right: 0; color: #fff; }
.lateral.oscuro nav a { color: #E4DDD3; }
.lateral.oscuro nav a .ico { color: #B5AA9E; }
.lateral.oscuro nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lateral.oscuro nav a.activo { background: rgba(255,255,255,.12); color: #fff; }
.lateral.oscuro nav a.activo .ico { color: var(--azafran); }
.lateral.oscuro .lateral-salir button { background: rgba(255,255,255,.06); color: #E4DDD3; }
.lateral.oscuro .lateral-boton { background: rgba(255,255,255,.1); color: #fff; border-color: transparent; }

.panel { flex: 1; min-width: 0; padding: 30px clamp(16px, 3vw, 44px) 56px; max-width: 1440px; }
@media (max-width: 900px) {
  .marco { display: block; }
  .lateral { position: sticky; z-index: 60; width: auto; height: auto; max-height: 100vh; padding: 10px 12px; gap: 0;
    border-right: 0; border-bottom: 1px solid var(--linea-suave); }
  .lateral-cab { padding: 0; }
  .lateral-logo img { height: 26px; }
  .lateral-boton { display: inline-flex; min-height: 40px; padding: 6px 12px; font-size: .9rem; }
  .lateral-menu { display: none; padding: 14px 0 6px; }
  .lateral.abierto .lateral-menu { display: flex; }
  .panel { padding-top: 20px; }
}

/* Cabecera de cada página */
.cabecera-pag { display: flex; align-items: flex-end; gap: 12px 14px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecera-pag h1 { margin: 0 auto 0 0; }
.cabecera-pag .antetitulo { display: block; font-size: .9rem; font-weight: 600; color: var(--suave); margin-bottom: 6px; }
.cabecera-pag > div:first-child { margin-right: auto; }
.navfecha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.navfecha input { width: auto; min-height: 40px; padding: 6px 10px; border-radius: 10px; }
.grupo-nav { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 3px; gap: 2px; }
.grupo-nav .boton, .grupo-nav button { border-color: transparent; background: transparent; min-height: 36px; color: var(--tinta); }
.grupo-nav .boton:hover { background: var(--fondo); }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.cifra { display: block; background: var(--papel); border: 1px solid var(--linea-suave); border-radius: var(--radio); padding: 16px 20px;
  text-decoration: none; color: inherit; }
a.cifra:hover { border-color: var(--linea); color: inherit; box-shadow: var(--sombra); }
.cifra b { display: block; font: 750 2rem/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.cifra span { color: var(--suave); font-size: .88rem; display: block; order: -1; }
.cifra { display: flex; flex-direction: column; }
.cifra.destacada { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.cifra.destacada span { color: #CFC6BA; }
.cifra.alerta { background: var(--aviso-fondo); border-color: transparent; color: #5E3F00; }
.cifra.alerta span { color: #7A5200; font-weight: 600; }
.barra-aforo { height: 6px; background: var(--hueso); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.barra-aforo i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea-suave); border-radius: 20px; margin-bottom: 22px; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
th { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); background: transparent; }
tbody tr:hover td { background: #FCFAF7; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.acciones { white-space: nowrap; text-align: right; }
td.acciones form { display: inline; }
td.acciones > dialog { margin: auto; }
tr.apagada td { color: var(--suave); }
tr.apagada td:not(.acciones) { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.grupo-turno th { background: var(--fondo); color: var(--tinta); font: 700 .95rem var(--display); text-transform: none; letter-spacing: 0; padding: 10px 16px; }
.hora { font: 700 1.05rem var(--display); }
.persona { display: flex; align-items: center; gap: 12px; }
.avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; background: #FBEFEB; color: var(--teja-intensa);
  display: grid; place-items: center; font-weight: 800; font-size: .82rem; }
tr.apagada .avatar { background: var(--hueso); color: var(--suave); }
.persona a { font-weight: 700; text-decoration: none; color: var(--tinta); }
.persona a:hover { color: var(--teja-intensa); }

.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.e-confirmada, .e-activo { background: var(--ok-fondo); color: var(--ok); }
.e-pendiente, .e-suspendido { background: var(--aviso-fondo); color: var(--aviso); }
.e-cancelada, .e-baja, .e-no_presentado { background: var(--error-fondo); color: var(--error); }
.e-completada { background: var(--hueso); color: var(--suave); }
.e-permanencia { background: #FCF1D6; color: #7A5200; }

.vacio { text-align: center; padding: 40px 16px; color: var(--suave); }
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; position: relative; overflow: hidden; isolation: isolate; }
.acceso::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; background: var(--acento); opacity: .10; right: -160px; top: -200px; }
.acceso::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; border-radius: 50%; background: var(--azafran); opacity: .12; left: -120px; bottom: -120px; }
.acceso .tarjeta { width: 100%; max-width: 400px; padding: 30px 28px; border-radius: 26px; box-shadow: 0 20px 60px rgba(31,27,23,.08); }
.acceso h1 { font-size: 1.8rem; margin-top: 4px; }
.dias-semana { display: flex; gap: 6px; flex-wrap: wrap; }
.dias-semana label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; border: 1.5px solid var(--borde-campo);
  border-radius: 12px; padding: 9px 12px; background: #fff; cursor: pointer; margin: 0; }
.dias-semana label:has(input:checked) { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.dias-semana input { accent-color: var(--acento); }
hr { border: 0; border-top: 1px solid var(--linea-suave); margin: 22px 0; }
code { background: var(--hueso); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
@media print {
  .lateral, .no-imprimir, td.acciones, th.acciones { display: none !important; }
  .marco { display: block; } .panel { padding: 0; }
  body { background: #fff; } .tabla-envoltura, .tarjeta { border-color: #ccc; box-shadow: none; }
}

/* ---------- Marca Mahaia ---------- */
.logo-acceso { display: block; height: 34px; margin: 0 0 22px; }
.pie-mahaia { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); text-decoration: none; }
.pie-mahaia img { width: 16px; height: 16px; }
.pie-mahaia b { font-family: var(--display); font-weight: 700; color: var(--tinta); }

/* Portada de Mahaia (dominio principal) */
.landing-cab { padding: 20px 0; }
.landing-cab .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.landing-cab img { height: 36px; display: block; }
.heroe { padding: 48px 0 64px; }
.heroe h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); line-height: .98; letter-spacing: -.045em; max-width: 13ch; margin-bottom: 18px; }
.heroe p.entrada { font-size: 1.2rem; color: var(--suave); max-width: 46ch; }
.heroe .acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.ventajas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding-bottom: 56px; }
.ventaja { background: var(--papel); border: 1px solid var(--linea-suave); border-radius: 22px; padding: 24px; }
.ventaja h2 { font-size: 1.3rem; }
.ventaja p { color: var(--suave); margin: 0; }
.ventaja .num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--fondo);
  font: 750 1.2rem var(--display); color: var(--teja); margin-bottom: 14px; }
.franja { background: var(--tinta); color: #F3ECE3; padding: 48px 0; border-radius: 32px 32px 0 0; }
.franja h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); color: #fff; letter-spacing: -.03em; }
.franja p { color: #CFC6BA; max-width: 60ch; }
.franja a.boton { background: var(--azafran); border-color: var(--azafran); color: var(--tinta); }

/* ---------- Selector de mesas en la reserva ---------- */
.selector-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-bottom: 8px; }
.op-mesa { position: relative; display: flex; flex-direction: column; gap: 0; font-weight: 400; padding: 10px 12px; border: 1.5px solid var(--borde-campo);
  border-radius: 14px; background: #fff; cursor: pointer; min-height: 60px; margin: 0; }
.op-mesa input { position: absolute; opacity: 0; pointer-events: none; }
.op-mesa b { font: 700 1.1rem var(--display); }
.op-mesa span { font-size: .8rem; color: var(--suave); }
.op-mesa em { font-style: normal; font-size: .75rem; color: var(--error); }
.op-mesa.ocupada { background: #FBF3F1; border-style: dashed; border-color: #E8B4AE; }
.op-mesa:has(input:checked) { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.op-mesa:has(input:checked) span, .op-mesa:has(input:checked) em { color: #E4DDD3; }
.op-mesa:has(input:focus-visible) { outline: 3px solid var(--teja-intensa); outline-offset: 2px; }
.mesas-res { display: inline-flex; align-items: center; margin-top: 3px; font-size: .78rem; font-weight: 700; color: var(--tinta); background: var(--hueso); border-radius: 8px; padding: 2px 8px; }

/* ---------- Sala ---------- */
.fila-centro { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fila-centro input[type=text] { flex: 1 1 180px; width: auto; min-height: 40px; padding: 6px 12px; }
.fila-centro input[type=number], .fila-centro select { width: auto; min-height: 40px; padding: 6px 12px; }
.fila-centro .check { margin: 0; }
.en-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.en-fila input { flex: 1 1 220px; width: auto; }
details.lote { border: 1.5px dashed var(--borde-campo); border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; }
details.lote summary { cursor: pointer; font-weight: 700; color: var(--teja-intensa); }
details.lote[open] summary { margin-bottom: 12px; }
.rejilla-lote { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 12px; }
.cabecera-centro { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.cabecera-centro h3 { margin: 0; font-size: 1.2rem; }

/* ---------- Editor y vista de planos ---------- */
.editor-plano { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start; }
.editor-lateral .tarjeta { padding: 16px; margin-bottom: 12px; }
.editor-lateral h2 { font-size: 1.05rem; margin-bottom: 10px; }
.editor-lateral .fila { grid-template-columns: 1fr 1fr; }
.botonera { display: flex; gap: 8px; flex-wrap: wrap; }
.mesas-libres { display: flex; gap: 6px; flex-wrap: wrap; max-height: 220px; overflow: auto; }
.mesas-libres button { min-width: 48px; }
.lienzo { background: var(--papel); border: 1px solid var(--linea-suave); border-radius: 22px; padding: 14px; overflow: auto; }
.lienzo svg { width: 100%; height: auto; display: block; touch-action: none; user-select: none; border-radius: 14px;
  background-color: #FBF8F3; background-image: radial-gradient(#E4DDD3 1.2px, transparent 1.2px); background-size: 20px 20px; }
.lienzo svg .item { cursor: grab; }
.lienzo svg .item:focus { outline: none; }
.lienzo svg .rotulo { font-family: var(--sans); pointer-events: none; }
.lienzo svg .nombre-mesa { font-family: var(--display); font-weight: 750; }
.vista-plano svg .item.mesa { cursor: pointer; }
.vista-plano svg .item.mesa:hover .cuerpo, .vista-plano svg .item.mesa:focus .cuerpo { stroke-width: 4; }
.leyenda { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.leyenda li { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.leyenda i { width: 18px; height: 14px; border-radius: 4px; border: 2px solid; display: inline-block; }
.leyenda i.libre { background: #fff; border-color: var(--olivo); }
.leyenda i.ocupada { background: var(--teja); border-color: var(--teja-intensa); }
.leyenda i.pendiente { background: var(--azafran); border-color: #9A6B00; }
.pestanas { display: inline-flex; gap: 2px; flex-wrap: wrap; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 3px; }
.pestanas a { padding: 8px 14px; border-radius: 9px; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .9rem; }
.pestanas a:hover { background: var(--fondo); color: var(--tinta); }
.pestanas a.activo { background: var(--tinta); color: #fff; }
.vista-plano { display: grid; grid-template-columns: 1fr 310px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .editor-plano, .vista-plano { grid-template-columns: 1fr; } }
.reserva-mini { display: block; padding: 11px 13px; border: 1px solid var(--linea-suave); border-radius: 12px; margin-top: 8px; text-decoration: none; color: var(--tinta); background: #fff; }
.reserva-mini:hover { border-color: var(--teja); color: var(--tinta); }
.reserva-mini span { display: block; color: var(--suave); font-size: .88rem; }
.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.heroe-rejilla { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.heroe-simbolo { width: 240px; height: 240px; }
@media (max-width: 760px) { .heroe-rejilla { grid-template-columns: 1fr; } .heroe-simbolo { display: none; } }

/* ---------- Calendario mensual ---------- */
.calendario { background: var(--papel); border: 1px solid var(--linea-suave); border-radius: 22px; padding: 12px; }
.cal-cabecera, .cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-semana { margin-top: 8px; }
.cal-cabecera div { padding: 4px 8px 0; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.cal-dia { display: flex; flex-direction: column; gap: 3px; min-height: 112px; padding: 10px 11px; border: 1.5px solid var(--linea-suave); border-radius: 14px;
  color: var(--tinta); text-decoration: none; font-size: .84rem; line-height: 1.35; background: #fff; transition: border-color .15s, transform .1s; }
.cal-dia:hover { border-color: var(--tinta); color: var(--tinta); }
.cal-dia:focus-visible { outline: 3px solid var(--teja-intensa); outline-offset: 2px; }
.cal-num { display: flex; align-items: center; justify-content: space-between; font: 700 1.2rem var(--display); margin-bottom: 2px; }
.cal-dia.hoy { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.cal-dia.hoy .cal-num::after { content: "hoy"; order: 1; margin-left: 6px; margin-right: auto; font: 700 .65rem var(--sans); text-transform: uppercase; letter-spacing: .08em;
  background: var(--tinta); color: #fff; padding: 2px 6px; border-radius: 6px; }
.cal-dia.fuera { opacity: .45; }
.cal-dia.pasado:not(.hoy) .cal-num { color: var(--suave); }
.cal-total b { font-variant-numeric: tabular-nums; }
.cal-turnos { color: var(--suave); font-size: .76rem; margin-top: auto; }
.cal-pend { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; order: 2;
  background: var(--azafran); color: var(--tinta); font: 800 .72rem var(--sans); }
.cal-estado { font-size: .74rem; font-weight: 700; color: var(--error); }
.cal-estado.abre { color: var(--ok); }
.cal-dia.nivel-1 { background: #FDF6F3; }
.cal-dia.nivel-2 { background: #F9E6E0; border-color: #F1D3CA; }
.cal-dia.nivel-3 { background: #F2CFC4; border-color: #EAB9AB; }
.cal-dia.cerrado { background: var(--hueso); border-style: dashed; border-color: #CFC6BA; }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: .84rem; color: var(--suave); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-leyenda i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--linea); display: inline-block; }
.cal-leyenda i.nivel-1 { background: #FDF6F3; } .cal-leyenda i.nivel-2 { background: #F9E6E0; } .cal-leyenda i.nivel-3 { background: #F2CFC4; }
.cal-leyenda i.cerrado { background: var(--hueso); border-style: dashed; border-color: #CFC6BA; }
.corto { display: none; }
@media (max-width: 700px) {
  .calendario { padding: 6px; }
  .cal-cabecera, .cal-semana { gap: 4px; } .cal-semana { margin-top: 4px; }
  .cal-dia { min-height: 66px; padding: 5px; font-size: .74rem; border-radius: 10px; }
  .cal-cabecera div { padding: 4px 0 0; text-align: center; }
  .cal-num { font-size: .95rem; }
  .cal-dia.hoy .cal-num::after { display: none; }
  .cal-estado { font-size: .62rem; }
  .largo { display: none; } .corto { display: inline; }
}

/* ---------- Cronograma (Gantt) del día ---------- */
.crono-tarjeta { padding: 18px 0 10px; margin-top: 4px; border-radius: 22px; }
.crono-cabecera { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 0 20px 14px; }
.crono-cabecera h2 { margin: 0; font-size: 1.35rem; }
.crono-cabecera .suave { font-size: .85rem; }
.crono-leyenda { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; font-size: .8rem; color: var(--suave); }
.crono-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.crono-leyenda i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.crono-scroll { overflow-x: auto; }
.crono { min-width: 860px; }
.crono-fila { display: grid; grid-template-columns: 132px 1fr; border-top: 1px solid var(--linea-suave); min-height: 42px; }
.crono-fila.sin-mesa { background: #FCFAF6; }
.crono-etq { position: sticky; left: 0; z-index: 3; background-color: var(--papel); padding: 6px 10px 6px 20px;
  display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.crono-fila.sin-mesa .crono-etq { background-color: #FCFAF6; }
.crono-etq b { font-size: .9rem; }
.crono-etq small { font-size: .72rem; color: var(--suave); }
.crono-pista { position: relative; margin-right: 20px; }
.crono-eje { border-top: 0; min-height: 36px; }
.crono-hora { position: absolute; bottom: 6px; transform: translateX(-50%); font-size: .72rem; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; }
.crono-banda-nombre { position: absolute; top: 0; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--teja-intensa); padding-left: 4px; white-space: nowrap; overflow: hidden; }
.crono-banda { position: absolute; top: 0; bottom: 0; background: #FCF5F1; }
.crono-linea { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--linea-suave); }
.crono-ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--teja); z-index: 2; }
.crono-barra { position: absolute; top: 6px; bottom: 6px; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 0 10px;
  border-radius: 9px; font-size: .78rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none; color: #fff; background: var(--teja); box-shadow: 0 1px 2px rgba(31,27,23,.12); }
.crono-barra:hover, .crono-barra:focus-visible { z-index: 4; color: #fff; filter: brightness(1.08); outline: 2px solid var(--tinta); outline-offset: 1px; }
.crono-barra span { opacity: .85; }
.b-confirmada { background: var(--teja); }
.b-pendiente { background: var(--azafran); color: var(--tinta) !important; }
.b-completada { background: var(--olivo); }
.b-no_presentado { background: #fff; color: var(--error) !important; box-shadow: inset 0 0 0 2px var(--error) !important; text-decoration: line-through; }
.crono-barra.b-conflicto { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0) 0 6px, rgba(0,0,0,.22) 6px 10px); box-shadow: 0 0 0 2px var(--error); }
.crono-leyenda i.b-conflicto { background: var(--teja); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.3) 3px 5px); box-shadow: 0 0 0 1px var(--error); }
.crono-leyenda i.b-no_presentado { box-shadow: inset 0 0 0 2px var(--error); }
@media print { .crono-scroll { overflow: visible; } .crono { min-width: 0; } }

/* ---------- Ventana para asignar mesa ---------- */
.dialogo-mesa { width: min(580px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 24px;
  padding: 24px; color: var(--tinta); background: var(--papel); box-shadow: 0 24px 80px rgba(31,27,23,.3); white-space: normal; text-align: left; }
.dialogo-mesa::backdrop { background: rgba(31,27,23,.5); backdrop-filter: blur(2px); }
.dialogo-mesa h2 { font-size: 1.45rem; margin-bottom: 4px; }
.dialogo-mesa .suave { font-size: .9rem; }
td.acciones .dialogo-mesa form { display: block; }
td.acciones .dialogo-mesa > * { margin-left: 0; }
.crono-hora.primera { transform: none; }
.crono-hora.ultima { transform: translateX(-100%); }
.avatar.cuadrado { border-radius: 11px; color: #fff; font: 700 1rem var(--display); }
/* filas de reservas: las acciones se reparten en dos líneas si no caben */
td.acciones { white-space: normal; min-width: 250px; }
td.acciones > form, td.acciones > button { margin: 2px 0 2px 4px; }
.persona { min-width: 170px; }
.persona a { white-space: nowrap; }
/* el fondo del menú lateral llega hasta abajo aunque la página sea muy larga */
@media (min-width: 901px) {
  body.con-lateral { background: linear-gradient(90deg, var(--papel) 252px, var(--fondo) 252px); }
  body.con-lateral.admin { background: linear-gradient(90deg, var(--tinta) 252px, var(--fondo) 252px); }
}

/* ---------- Clientes ---------- */
.avisos-cli { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.avisos-cli.grandes { margin: -8px 0 18px; gap: 8px; }
.aviso-cli { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.avisos-cli.grandes .aviso-cli { font-size: .88rem; padding: 6px 13px; }
.aviso-cli::before { font-size: .9em; }
.a-habitual { background: var(--ok-fondo); color: var(--ok); }
.a-habitual::before { content: "★"; }
.a-noshow { background: var(--error-fondo); color: var(--error); }
.a-noshow::before { content: "!"; font-weight: 900; }
.a-cancela { background: var(--aviso-fondo); color: var(--aviso); }
.a-cancela::before { content: "↺"; }
.nota-fija { color: #5E3F00; background: #FFF8E6; border-radius: 8px; padding: 3px 8px; display: inline-block; margin-top: 4px; }
a.avatar { text-decoration: none; transition: box-shadow .15s; }
a.avatar:hover { box-shadow: 0 0 0 2px var(--teja); color: var(--teja-intensa); }
.persona.grande { margin-right: auto; }
.persona.grande .avatar { width: 64px; height: 64px; font-size: 1.3rem; font-family: var(--display); }
.persona.grande .antetitulo a { color: var(--suave); text-decoration: none; }
.aviso-ficha { border: 1.5px solid var(--ok); background: #F4FAF6; border-radius: 16px; padding: 14px 16px; margin: -4px 0 16px; }
.aviso-ficha.con-alerta { border-color: var(--error); background: #FDF5F3; }
.aviso-ficha-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.aviso-ficha-cab a { font-weight: 700; font-size: .9rem; }
.aviso-ficha-cifras { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; color: var(--suave); margin: 4px 0 2px; }
.aviso-ficha-cifras b { color: var(--tinta); font-family: var(--display); font-size: 1.05rem; }
.aviso-ficha .nota-fija { margin: 8px 0 0; display: block; }
.buscador { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.buscador select { width: auto; min-height: 44px; }
.campo-buscar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--borde-campo); border-radius: 12px;
  padding: 0 12px; margin: 0; font-weight: 400; color: var(--suave); min-width: min(320px, 100%); }
.campo-buscar input { border: 0; min-height: 42px; padding: 0; box-shadow: none !important; }
.campo-buscar:focus-within { border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(31,27,23,.10); }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.txt-error { color: var(--error); }
.cifra .cifra-texto { font-size: 1.5rem; }
.cifra b small { font-size: .5em; color: var(--suave); font-weight: 600; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.dos-columnas h2 { margin: 6px 0 12px; }
.dos-columnas aside .tarjeta h2 { margin-top: 0; font-size: 1.1rem; }
.zona-peligro { border-color: #F0CFC8; }
.zona-peligro h2 { color: var(--error); }
@media (max-width: 1000px) { .dos-columnas { grid-template-columns: 1fr; } }

/* ---------- Informes ---------- */
.tarjeta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tarjeta-cab h2 { margin: 0; }
.rejilla-graficas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 6px; }
.grafica { margin: 0; }
.grafica svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-rejilla { stroke: var(--linea-suave); stroke-width: 1; }
.g-base { stroke: #CFC6BA; }
.g-eje { font: 600 11px var(--sans); fill: var(--suave); font-variant-numeric: tabular-nums; }
.g-zona { fill: transparent; }
.g-col:hover .g-zona, .g-col:focus .g-zona { fill: rgba(31,27,23,.05); }
.g-col:focus { outline: none; }
.g-col:focus-visible .g-zona { stroke: var(--tinta); stroke-width: 1.5; }
.g-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--suave); margin-top: 10px; }
.g-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.g-leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.g-tip { position: absolute; z-index: 90; pointer-events: none; background: var(--tinta); color: #fff; border-radius: 10px; padding: 8px 11px;
  font-size: .8rem; line-height: 1.45; box-shadow: 0 8px 24px rgba(31,27,23,.25); white-space: nowrap; }
.g-tip b { display: block; font-size: .84rem; margin-bottom: 2px; }
.ver-datos { margin-top: 12px; }
.ver-datos summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--teja-intensa); }
.ver-datos .tabla-envoltura { margin: 10px 0 0; max-height: 320px; overflow: auto; }
.delta { display: block; font-style: normal; font-size: .78rem; color: var(--suave); margin-top: 4px; }
.delta.sube { color: var(--ok); } .delta.baja { color: var(--error); }
.cifra.destacada .delta { color: #CFC6BA; }
.cifra.destacada .delta.sube { color: #8FD3AC; } .cifra.destacada .delta.baja { color: #F0A592; }
.ranking { margin: 0; padding: 0; list-style: none; counter-reset: rk; }
.ranking li { counter-increment: rk; display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea-suave); }
.ranking li:last-child { border-bottom: 0; }
.ranking li::before { content: counter(rk); width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--fondo); display: grid; place-items: center; font: 700 .8rem var(--display); }
.ranking a { font-weight: 700; text-decoration: none; color: var(--tinta); margin-right: auto; }
.ranking span { font-size: .88rem; color: var(--suave); }

/* ---------- Sillas por día y turno ---------- */
details.sillas { border: 1px solid var(--linea-suave); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; }
details.sillas summary { cursor: pointer; }
details.sillas[open] summary { margin-bottom: 10px; }
.tabla-sillas th[scope=row] { white-space: nowrap; font-weight: 700; font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--tinta); }
.tabla-sillas th[scope=row] small { display: block; font-weight: 500; color: var(--suave); font-size: .75rem; }
.tabla-sillas td { padding: 8px 6px; }
.tabla-sillas input { width: 72px; min-height: 40px; padding: 6px 8px; text-align: right; }
.tabla-sillas input.cero { background: var(--hueso); color: var(--error); font-weight: 700; }
@media (max-width: 700px) {
  .grafica.ancha { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .grafica.ancha svg { min-width: 620px; }
  .rejilla-graficas { grid-template-columns: 1fr; }
}
.pasos-texto { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.pasos-texto code { word-break: break-all; }

/* Cabeceras con fecha: las flechas van a la izquierda del título y no cambian de sitio aunque la fecha sea más larga */
.cabecera-fecha { align-items: center; }
.titulo-fecha { display: flex; align-items: center; gap: 16px; margin-right: auto; min-width: 0; }
.titulo-fecha .grupo-nav { flex: none; }
.titulo-fecha .grupo-nav .boton { width: 44px; height: 44px; padding: 0; }
.titulo-fecha h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  letter-spacing: -.02em; line-height: 1.2; }
.titulo-fecha > div { min-width: 0; }
.cabecera-fecha .navfecha { flex-wrap: nowrap; }
.cabecera-fecha .navfecha input[type=date] { width: 150px; }
/* En pantallas anchas todo va en una línea; en las estrechas los botones van siempre debajo (nunca depende de la fecha) */
@media (min-width: 1261px) { .cabecera-fecha { flex-wrap: nowrap; } }
@media (max-width: 1260px) { .cabecera-fecha .navfecha { flex-basis: 100%; flex-wrap: wrap; } }
.titulo-fecha .antetitulo { margin-bottom: 2px; font-size: .82rem; }
.cabecera-pag .antetitulo a { color: var(--teja-intensa); font-weight: 700; }
@media (max-width: 700px) { .titulo-fecha h1 { white-space: normal; } }
td.acciones > a.boton { margin: 2px 0 2px 4px; }

/* ---------- Administración: empresa y web, solicitudes ---------- */
.rejilla-campos { display: flex; flex-wrap: wrap; gap: 0 14px; }
.rejilla-campos .campo { min-width: 0; }
.tarjeta-oscura { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.suave-claro { color: #CFC6BA; font-size: .9rem; }
.precio-vista { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 4px; }
.precio-vista b { font: 800 3rem/1 var(--display); letter-spacing: -.04em; }
.precio-vista span { color: #CFC6BA; }
.lista-ayuda { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--suave); font-size: .92rem; }
.solicitudes { display: grid; gap: 12px; margin-bottom: 16px; }
.solicitud { margin: 0; }
.solicitud.nueva { border-left: 4px solid var(--azafran); }
.solicitud-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.solicitud-cab h2 { margin: 0 0 2px; }
.solicitud-contacto { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.solicitud-mensaje { margin: 12px 0 0; color: #4A433D; font-style: italic; }
.solicitud-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.solicitud-form select { width: auto; min-height: 40px; }
.solicitud-form input[type=text] { flex: 1 1 260px; width: auto; min-height: 40px; }
.msg a.boton { color: var(--acento-texto); }

/* ---------- Idiomas, widget y lista de espera (parte pública) ---------- */
.portada-arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.portada-arriba .antetitulo { margin-bottom: 0; }
.selector-idioma { display: inline-flex; gap: 2px; background: rgba(0,0,0,.12); border-radius: 999px; padding: 3px; }
.selector-idioma a { min-width: 34px; min-height: 30px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: 999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; color: inherit; opacity: .85; }
.selector-idioma a.activo { background: #fff; color: var(--tinta); opacity: 1; }
.cab-reserva { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.cab-reserva > a { font-weight: 700; color: var(--suave); text-decoration: none; }
.cab-reserva .selector-idioma { background: var(--hueso); }
.aviso-lista { margin-top: 14px; background: var(--aviso-fondo); color: #5E3F00; border-radius: 16px; padding: 16px 18px; }
.aviso-lista p { margin: 4px 0 12px; }
body.embebido { background: transparent; }
body.embebido .contenedor { padding: 0 6px; max-width: none; }
body.embebido .tarjeta { box-shadow: none; }
.embed-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 8px 12px; font: 700 1.1rem var(--display); }
.embed-cab .selector-idioma { background: var(--hueso); }
.embed-pie { padding: 6px 0 14px; font-size: .8rem; }

/* ---------- Avisos de reservas nuevas, WhatsApp y lista de espera (panel) ---------- */
.lateral-sonido { width: 100%; justify-content: flex-start; border-color: transparent; color: var(--suave); font-weight: 600; font-size: .86rem; }
.lateral-sonido.encendido { background: var(--ok-fondo); color: var(--ok); }
.avisos-flotantes { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 36px)); }
.aviso-flotante { display: block; background: var(--tinta); color: #fff; border-radius: 16px; padding: 14px 16px; text-decoration: none;
  box-shadow: 0 16px 40px rgba(31,27,23,.3); border-left: 5px solid var(--azafran); transition: opacity .4s, transform .4s; }
.aviso-flotante:hover { color: #fff; }
.aviso-flotante b { display: block; }
.aviso-flotante span { color: #CFC6BA; font-size: .9rem; }
.aviso-flotante.fuera { opacity: 0; transform: translateY(10px); }
details.menu-wa { position: relative; display: inline-block; }
details.menu-wa summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 36px;
  border-radius: 10px; border: 1.5px solid #B9E3C6; background: #F1FAF4; color: #1B6B3E; font-weight: 700; font-size: .86rem; }
details.menu-wa summary::-webkit-details-marker { display: none; }
.menu-wa-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px; background: #fff; border: 1px solid var(--linea);
  border-radius: 14px; padding: 6px; box-shadow: 0 14px 34px rgba(31,27,23,.16); text-align: left; }
.menu-wa-lista a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--tinta); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.menu-wa-lista a:hover { background: #F1FAF4; color: #1B6B3E; }
td.acciones > details.menu-wa { margin: 2px 0 2px 4px; }
.tarjeta-espera { border-left: 4px solid var(--azafran); }
.fila-espera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--linea-suave); }
.fila-espera:first-of-type { border-top: 0; }
.fila-espera .quien { flex: 1 1 220px; }
.fila-espera .quien span { display: block; font-size: .86rem; color: var(--suave); }
.fila-espera form { display: inline; }
.codigo { font: 500 .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--tinta); color: #F3ECE3; border-radius: 12px;
  padding: 14px 16px; white-space: pre-wrap; word-break: break-all; margin: 0 0 10px; }
.vista-widget { border: 1.5px dashed var(--borde-campo); border-radius: 18px; min-height: 420px; position: relative; overflow: hidden; background: #fff; }
.vista-widget iframe { width: 100%; height: 640px; border: 0; display: block; }
.vista-falsa { padding: 20px; color: var(--suave); }
.vista-falsa i { display: block; height: 12px; border-radius: 6px; background: var(--hueso); margin: 10px 0; }
.vista-boton { position: absolute; bottom: 18px; border: 0; padding: 14px 20px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.idiomas-elegir { display: flex; flex-wrap: wrap; gap: 8px; }
.idiomas-elegir label { display: inline-flex; gap: 8px; align-items: center; border: 1.5px solid var(--borde-campo); border-radius: 12px; padding: 10px 14px; margin: 0; font-weight: 600; cursor: pointer; background: #fff; }
.idiomas-elegir label:has(input:checked) { border-color: var(--tinta); background: var(--fondo); }
.etiquetas-wa { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.etiquetas-wa code { cursor: default; }
@media (max-width: 900px) { .lateral-sonido { margin-top: 6px; } }
body.en-ventana .embed-cab { padding-right: 58px; }
/* menú lateral más compacto: ahora tiene más opciones */
.lateral nav a { padding: 8px 12px; }
.lateral { gap: 14px; }
.menu-wa-lista { z-index: 150; }

/* Selector de idioma (web comercial, panel y administración) */
.selector-ui { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--linea-suave, #EFE8DD); border: 1px solid var(--linea, #E2D8CA); }
.selector-ui a { min-width: 40px; min-height: 30px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 999px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--suave, #6B6259); text-decoration: none; }
.selector-ui a:hover { color: var(--tinta, #1F1B17); }
.selector-ui a[aria-current] { background: #fff; color: var(--tinta, #1F1B17); box-shadow: 0 1px 3px rgba(31,27,23,.14); }
.selector-ui.en-lateral { margin-top: auto; align-self: flex-start; margin-left: 8px; }
.selector-ui.en-lateral + .lateral-salir { margin-top: 10px; }
.lateral.oscuro .selector-ui { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
.lateral.oscuro .selector-ui a { color: #CFC6BA; }
.lateral.oscuro .selector-ui a[aria-current] { background: #fff; color: #1F1B17; }
.acceso { position: relative; }
.selector-ui.en-acceso { position: absolute; top: 16px; right: 16px; }
@media (max-width: 900px) { .selector-ui.en-lateral { margin-top: 12px; } }
html[lang="eu"] .cal-dia.hoy .cal-num::after { content: "gaur"; }

/* Clientes de paso y ocupación de mesas */
.boton-paso { background: var(--olivo); border-color: var(--olivo); color: #fff; }
.boton-paso:hover { background: #244A37; border-color: #244A37; color: #fff; }
button.op-mesa.paso { align-items: flex-start; text-align: left; color: var(--tinta); justify-content: center; }
button.op-mesa.paso:not(:disabled):hover { background: var(--ok-fondo); border-color: var(--olivo); }
button.op-mesa.paso:disabled { cursor: not-allowed; opacity: 1; }
.paso-personas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; font-weight: 600; }
.paso-num { display: flex; gap: 6px; flex-wrap: wrap; }
.paso-num label { margin: 0; }
.paso-num input { position: absolute; opacity: 0; pointer-events: none; }
.paso-num span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px;
  border: 1.5px solid var(--borde-campo); background: #fff; font-weight: 700; cursor: pointer; }
.paso-num input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.paso-num input:focus-visible + span { outline: 3px solid var(--teja-intensa); outline-offset: 2px; }
.ocupacion-mesa { font-weight: 600; }
.ocupacion-mesa.en-mesa { color: var(--ok); }
button.liberar { background: var(--ok-fondo); border-color: #B9D3C2; color: var(--ok); }
button.liberar:hover { background: var(--olivo); border-color: var(--olivo); color: #fff; }
.titulo-seccion { font: 700 1.35rem var(--display); margin: 34px 0 14px; }
.tabla-ocupacion td, .tabla-ocupacion th { padding-top: 9px; padding-bottom: 9px; }
.tabla-ocupacion td, .tabla-ocupacion th { white-space: nowrap; }

/* Contratos (administración) */
.fila-contrato { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fila-contrato select { min-width: 240px; }
.e-ctr-borrador { background: var(--hueso); color: var(--suave); }
.e-ctr-enviado { background: var(--aviso-fondo); color: var(--aviso); }
.e-ctr-firmado { background: var(--ok-fondo); color: var(--ok); }
.contrato-columnas { grid-template-columns: minmax(0, 1fr) 320px; }
.documento-contrato { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 40px 48px; box-shadow: var(--sombra);
  font-size: .92rem; line-height: 1.55; max-width: 860px; }
.documento-contrato .logo-contrato { display: block; margin-bottom: 26px; }
.documento-contrato h1 { font-size: 1.7rem; margin: 0 0 4px; }
.documento-contrato h2 { font-size: 1.15rem; color: var(--teja); margin: 26px 0 8px; }
.documento-contrato h3 { font-family: var(--sans); font-size: .98rem; margin: 16px 0 4px; }
.documento-contrato p { margin: 0 0 8px; text-align: justify; }
.documento-contrato p.ref, .documento-contrato p.nota { color: var(--suave); }
.documento-contrato .li { display: flex; gap: 8px; margin: 0 0 4px 6px; }
.documento-contrato .li > span { flex: none; min-width: 16px; }
.documento-contrato table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: .86rem; }
.documento-contrato th, .documento-contrato td { border: 1px solid var(--linea); padding: 7px 9px; text-align: left; vertical-align: top; }
.documento-contrato th { background: var(--hueso); }
.documento-contrato .firmas td.hueco { height: 70px; }
.documento-contrato .relleno { background: #FFF6DC; border-radius: 4px; padding: 0 2px; }
.documento-contrato hr.salto { border: 0; border-top: 2px dashed var(--linea); margin: 28px 0; }
.pasos-ayuda { margin: 0; padding-left: 20px; } .pasos-ayuda li { margin-bottom: 6px; }
@media (max-width: 1100px) { .contrato-columnas { grid-template-columns: 1fr; } .documento-contrato { padding: 24px 20px; } }

/* Conexión con Ágora */
.copiar { display: flex; gap: 8px; align-items: center; background: var(--hueso); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.copiar code { flex: 1; font-size: .82rem; word-break: break-all; }
.rejilla-mesas-agora { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.rejilla-mesas-agora label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; margin: 0; }
.rejilla-mesas-agora input { min-height: 40px; }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { padding: 8px 0; border-bottom: 1px solid var(--linea-suave); font-size: .92rem; }
.rejilla-graficas.rejilla-ancha { grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); }
@media (max-width: 1250px) { .rejilla-graficas.rejilla-ancha { grid-template-columns: 1fr; } }