@font-face{font-family:"Instrument Sans";src:url(/fuentes/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Lora;src:url(/fuentes/lora.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --petroleo:#223C48; --turquesa:#08ACB1; --turquesa-oscuro:#065E62;
  --fondo:#F4F1EB; --papel:#FFFFFF; --borde:#A9B4B8; --suave:#4F5F66;
  --ambar:#F9C784; --ambar-oscuro:#B85F00; --ambar-texto:#4A2A00; --ambar-claro:#FDECD2;
  --rojo:#8A3200; --rojo-borde:#A23B00;
  --libre:#EAD9C0; --libre-borde:#C9B18F; --libre-silla:#F7F0E4;
  --reservada:#BFE8EA; --reservada-silla:#E6F6F7; --reservada-usada:#7FD3D6;
  --sentada-silla:#CDD5D8; --sentada-usada:#8FA0A8;
  --gutter:12px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{font:16px/1.35 "Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--petroleo);background:var(--fondo);overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
h1,h2,p,ul{margin:0;padding:0}
ul{list-style:none}

/* ───── Entrar ───── */
.entrada{min-height:100dvh;max-width:380px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));overflow:auto}
.entrada img{align-self:center;border-radius:14px}
.entrada h1{font-family:Lora,Georgia,serif;font-weight:600;font-size:24px;text-align:center}

/* ───── El móvil: el plano ocupa todo lo que deja lo demás, y nada se mueve cuando llega un cambio ───── */
#app{
  height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"cabecera" "franja" "plano" "leyenda" "ultimo" "botones";
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#cabecera{grid-area:cabecera;display:flex;align-items:center;gap:8px;padding:8px 16px 6px}
#verDias{flex:1;min-width:0;min-height:44px;text-align:left;display:block}
#titulo{display:block;font-family:Lora,Georgia,serif;font-weight:600;font-size:21px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#titulo::after{content:"";display:inline-block;width:8px;height:8px;margin:0 0 4px 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
#subtitulo{display:block;margin-top:2px;font-size:13px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#subtitulo.sin-conexion{color:var(--rojo);font-weight:700}
.boton-mini{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border:1px solid var(--petroleo);border-radius:10px;background:var(--papel);font-size:16px;font-weight:700;white-space:nowrap}

#franja{grid-area:franja;padding:0 var(--gutter) 6px}
.franja{min-height:44px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;border-radius:10px;font-size:15px;color:var(--suave);background:#E9E4DA;text-align:left}
.franja.aviso{background:var(--ambar);color:var(--ambar-texto);font-weight:600}
.franja.fallo{background:var(--rojo-borde);color:#fff;font-weight:700}
.franja + .franja{margin-top:6px}
.franja span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.franja svg{flex:none}

#plano{grid-area:plano;min-height:0;position:relative;padding:0 var(--gutter)}
#svg{width:100%;height:100%;display:block}

#leyenda{grid-area:leyenda;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;padding:5px var(--gutter) 2px;font-size:12px}
#leyenda span{display:flex;align-items:center;gap:5px;white-space:nowrap}
#leyenda i{width:13px;height:13px;border-radius:3px;border:1px solid transparent}
#leyenda .libre{background:var(--libre);border-color:var(--libre-borde)}
#leyenda .reservada{background:var(--reservada);border-color:var(--turquesa)}
#leyenda .sentada{background:var(--petroleo)}
#leyenda .apartada{background:var(--reservada-silla);border:1px dashed var(--turquesa-oscuro)}
#leyenda .cerrada{background:#E4E8E9;border:1px dashed #9AA6AA}
#leyenda span[hidden]{display:none}

/* La línea que cuenta qué acaba de cambiar: su sitio está reservado, para que el plano no salte */
#ultimo{grid-area:ultimo;min-height:22px;padding:2px 16px 0;font-size:13px;color:var(--suave);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#botones{grid-area:botones;display:flex;gap:6px;padding:6px var(--gutter) 12px}
#botones .boton{flex:none;min-height:48px;padding:0 10px;font-size:15px;white-space:nowrap}
#botones .principal,#sinReserva{flex:1 1 auto}
#quienSoy{display:block;max-width:20vw;overflow:hidden;text-overflow:ellipsis}
#lado{display:none}

.boton{min-height:52px;display:flex;align-items:center;justify-content:center;padding:0 16px;border:1px solid var(--petroleo);border-radius:12px;background:var(--papel);font-size:16px;font-weight:700}
.boton.principal{background:var(--petroleo);color:#fff;font-size:17px}
.boton.peligro{background:var(--rojo-borde);border-color:var(--rojo-borde);color:#fff}
.boton.peligro-borde{border-color:var(--rojo-borde);color:var(--rojo)}
.boton-texto{min-height:44px;font-size:15px;font-weight:700}
.boton-texto.peligro{color:var(--rojo)}

/* ───── El plano ───── */
.local{fill:#fff}
.pared{fill:none;stroke:var(--petroleo)}
.terraza{fill:#E3EADC}
.pieza{fill:#5B6A70}
.pieza-cocina,.pieza-banos,.pieza-trabajo,.pieza-recibidor{fill:#E9E4DA}
.pieza-barra{fill:#CFC8BB}
.pieza-pilar{fill:#8F8A80}
.pieza-cristalera{fill:#B9D8DC}
.pieza-barril{fill:#C9B18F}
.pieza-puerta{fill:#fff;stroke:#9B7653;stroke-width:2}

.mesa{cursor:pointer}
.mesa:focus-visible{outline:none}
.mesa:focus-visible .toque{stroke:var(--turquesa);stroke-width:6}
.mesa text{fill:var(--petroleo);font-weight:700;pointer-events:none}
.toque{fill:transparent}
.silla{fill:var(--libre-silla)}
.tablero{fill:var(--libre);stroke:var(--libre);stroke-width:1}
.borde{fill:none;stroke:var(--libre-borde)}
.mesa.reservada .tablero{fill:var(--reservada);stroke:var(--reservada)}
.mesa.reservada .borde{stroke:var(--turquesa)}
.mesa.reservada .silla{fill:var(--reservada-silla)}
.mesa.reservada .silla.usada{fill:var(--reservada-usada)}
.mesa.sentada .tablero{fill:var(--petroleo);stroke:var(--petroleo)}
.mesa.sentada .borde{stroke:var(--petroleo)}
.mesa.sentada .silla{fill:var(--sentada-silla)}
.mesa.sentada .silla.usada{fill:var(--sentada-usada)}
.mesa.sentada text{fill:#fff}
.mesa.apartada .tablero{fill:var(--reservada-silla);stroke:var(--reservada-silla)}
.mesa.apartada .borde{stroke:var(--turquesa-oscuro);stroke-dasharray:6 4}
.mesa.propuesta .tablero{fill:var(--ambar);stroke:var(--ambar)}
.mesa.propuesta .borde{stroke:var(--ambar-oscuro)}
.mesa.propuesta .silla{fill:var(--ambar-claro)}
.mesa.propuesta .silla.usada{fill:#F3B463}
.mesa.propuesta text{fill:var(--ambar-texto)}
.mesa.hueco .borde{stroke:#8A979C}
.mesa.cogida{opacity:.38}
.mesa.cerrada{opacity:.5}
.mesa.cerrada .tablero{fill:#E4E8E9;stroke:#C7CFD1}
.mesa.cerrada .borde{stroke:#9AA6AA;stroke-dasharray:4 4}
.mesa.cerrada .silla{fill:#EEF1F2}
.mesa.en-cerrada .toque{fill:none;stroke:var(--ambar-oscuro);stroke-width:5;stroke-dasharray:8 6}
.mesa.marcada .toque{fill:rgba(249,199,132,.45);stroke:var(--ambar-oscuro);stroke-width:6}
.mesa.elegida .toque{fill:rgba(8,172,177,.16);stroke:var(--turquesa);stroke-width:5}
.mesa.recien .toque{stroke:var(--ambar-oscuro);stroke-width:7;animation:apagar 6s ease-out forwards}
@keyframes apagar{to{stroke-opacity:0}}

/* ───── Las hojas: dentro del hueco del móvil o encima de todo ───── */
#hoja{background:var(--papel);overflow:auto;overscroll-behavior:contain;padding:10px 16px 16px;outline:none;display:flex;flex-direction:column;gap:10px}
.hoja-entera #hoja{position:fixed;inset:0;z-index:10;background:var(--fondo);padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.hoja-media #app{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"cabecera" "plano" "hoja"}
.hoja-media #hoja{grid-area:hoja;max-height:60dvh;border-radius:16px 16px 0 0;box-shadow:0 -2px 12px rgba(34,60,72,.14);padding-bottom:calc(16px + env(safe-area-inset-bottom))}
/* Confirmar se ve siempre, aunque lo de encima no quepa: hay que ver la hora y poder pulsar sin buscar el botón */
.hoja-media #hoja > .dos:last-child{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));margin:0 -16px calc(-16px - env(safe-area-inset-bottom));padding:8px 16px calc(12px + env(safe-area-inset-bottom));background:var(--papel)}
.hoja-media #franja,.hoja-media #leyenda,.hoja-media #ultimo,.hoja-media #botones{display:none}

.hoja-cabecera{display:flex;align-items:center;gap:6px;margin-left:-8px}
.hoja-cabecera h1{flex:1;min-width:0;font-family:Lora,Georgia,serif;font-weight:600;font-size:22px;line-height:1.2}
.redondo{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center}
.girado{display:flex;transform:rotate(180deg)}
.grande{font-size:18px;font-weight:700}
.suave{color:var(--suave);font-size:15px}
.pequena{font-size:13px}
.nada{color:var(--suave);padding:12px 0}
.nota{padding:10px 12px;border-radius:10px;background:var(--ambar-claro);color:var(--ambar-texto);font-size:15px;font-weight:600}
.ojo{color:var(--ambar-texto);font-weight:600}
.corte{padding:10px 12px;border:2px solid var(--ambar-oscuro);border-radius:10px;background:var(--ambar-claro);color:var(--ambar-texto);font-size:15px}
.corte b{display:block;font-size:19px}
.estado-sentada{font-weight:700;color:var(--turquesa-oscuro)}
#hoja h2,#lado h2{font-size:14px;font-weight:700;margin-top:6px}
.tarjeta{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:var(--papel)}
.confirmar{display:grid;gap:10px;padding:12px;border-radius:12px;background:var(--ambar-claro);color:var(--ambar-texto)}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pila{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}

.lista{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.fila{width:100%;min-height:52px;display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:10px;background:var(--papel);text-align:left;font-size:15px}
.fila-hora{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.fila-quien{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-mesa{flex:none;font-weight:700}
.marca{font-size:12px;font-weight:700;padding:2px 7px;border-radius:999px;background:#E9E4DA;white-space:nowrap}
.marca.reservada{background:var(--reservada)}
.marca.sentada{background:var(--petroleo);color:#fff}
.marca.apartada{background:var(--reservada-silla);border:1px dashed var(--turquesa-oscuro)}
.hoja-media .fila{background:var(--fondo)}
.fila-quien .pequena{display:block;overflow:hidden;text-overflow:ellipsis}
.marca.decide{background:var(--petroleo);color:#fff}

/* El teléfono del cliente: al tocarlo, llama */
.telefono{min-height:44px;display:flex;align-items:center;gap:8px;align-self:start;color:var(--turquesa-oscuro);font-weight:700;font-variant-numeric:tabular-nums;text-decoration:none}
.telefono span{text-decoration:underline;text-underline-offset:3px}

/* Los accesos del equipo */
.clave{font-size:22px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;user-select:all;overflow-wrap:anywhere}
.tarjeta .clave + p{margin-top:6px}
.cambios{display:grid;gap:6px}

.opcion{display:grid;gap:3px;width:100%;padding:12px 14px;border:1px solid var(--borde);border-radius:12px;background:var(--papel);text-align:left}
.opcion:first-of-type{border:2px solid var(--petroleo)}
.opcion-mejor{font-size:13px;font-weight:700;color:var(--turquesa-oscuro)}
.opcion-titulo{font-size:17px;font-weight:700}
.opcion-detalle{font-size:14px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-width:48px;min-height:48px;padding:0 12px;border:1px solid var(--borde);border-radius:10px;background:var(--papel);font-size:17px;font-weight:700}
.chip.elegido{background:var(--petroleo);border-color:var(--petroleo);color:#fff}
.chips.siete{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.chips.siete .chip{min-width:0;padding:0}
.campo{display:grid;gap:6px;font-size:14px;font-weight:700}
.campo input{width:100%;min-height:48px;padding:0 12px;border:1px solid var(--borde);border-radius:10px;background:var(--papel);color:var(--petroleo);font:inherit;font-size:17px;font-weight:500}
.boton:disabled{border-color:var(--borde)}

.horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.hora{min-height:52px;display:grid;align-content:center;justify-items:center;padding:4px;border:1px solid var(--borde);border-radius:10px;background:var(--papel)}
.hora span{font-size:12px;color:var(--suave)}
.hora.elegida{background:var(--petroleo);border-color:var(--petroleo);color:#fff}
.hora.elegida span{color:#fff}

.mes{display:flex;align-items:center;justify-content:space-between}
.semana,.calendario{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.semana{font-size:13px;font-weight:600;color:var(--suave);text-align:center}
.dia{position:relative;min-height:50px;display:flex;flex-direction:column;justify-content:space-between;padding:5px 6px 7px;border:1px solid transparent;border-radius:8px;background:var(--papel);font-size:15px;font-weight:700;text-align:left}
.dia.hoy{border:2px solid var(--petroleo)}
.dia.pasado,.dia.cerrado{background:transparent;color:var(--suave)}
.dia.elegido{background:var(--petroleo);color:#fff}
.dia .punto{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--ambar-oscuro)}
.barras{display:grid;gap:3px}
.barra{display:block;height:5px;border-radius:3px;background:#E4E0D8;overflow:hidden}
.barra span{display:block;height:100%;background:#078488}
.barra.grande{height:8px;border-radius:4px}
.dia.elegido .barra{background:rgba(255,255,255,.3)}
.dia.elegido .barra span{background:#fff}
.servicio{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.dia-titulo{font-size:19px!important}

/* ───── El portátil y el móvil apaisado: el plano a la izquierda y el día a la derecha, siempre a la vista ───── */
@media (min-width:900px),(min-width:640px) and (orientation:landscape){
  #app,.hoja-media #app{
    grid-template-columns:auto minmax(0,1fr) min(400px,42vw);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"cabecera franja lado" "plano plano lado" "leyenda ultimo lado";
  }
  #cabecera{padding-right:8px}
  #franja,.hoja-media #franja{display:block;padding:8px var(--gutter) 6px 0}
  /* Aquí no cabría entera: va arriba de la columna del día, sin quitarle sitio al plano */
  #franja .franja.fallo{display:none}
  #lado .franja.fallo{margin-bottom:8px}
  #leyenda,.hoja-media #leyenda{display:flex;justify-content:flex-start;padding:5px 12px 10px 16px}
  #ultimo,.hoja-media #ultimo{display:block;align-self:center;padding:0 16px 5px 0;text-align:right}
  /* Arriba de la columna del día: sobre el plano taparían alguna mesa */
  #botones,.hoja-media #botones{grid-area:lado;display:flex;align-self:start;padding:10px 16px 0;z-index:1}
  .con-hoja #botones{display:none}
  #verLista{display:none}
  #lado{grid-area:lado;display:block;overflow:auto;padding:70px 16px 14px;background:#EDE8DF;border-left:1px solid #DCD6CC}
  #lado > h2:first-child{margin-top:0}
  #lado h2{margin-bottom:8px}
  #lado .suave{margin-bottom:8px}
  #hoja,.hoja-entera #hoja,.hoja-media #hoja{grid-area:lado;position:static;z-index:auto;max-height:none;background:var(--fondo);border-left:1px solid #DCD6CC;border-radius:0;box-shadow:none;min-height:0}
  .con-hoja #lado{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mesa.recien .toque{animation:none}
}