/* Vista de anfitrion: mapa de mesas y reservas del dia. Solo tokens de
   css/styles.css. El estado de una mesa se lee por texto dentro de la mesa y
   en la leyenda, no solo por color. */

.anf-aviso {
  margin: var(--sp-1) 0; padding: var(--sp-2);
  border: 1px solid var(--warn); border-radius: var(--radius-sm); color: var(--warn);
}

/* mapa */
.anf-mapa-wrap { overflow-x: auto; }
/* Piso de legibilidad: el texto del mapa es SVG y se dibuja en unidades del
   viewBox (js/rest-layout.js, LIENZO 100 x 152), asi que su tamano en pantalla
   es ese numero por la escala del lienzo, que baja con el ancho. Sin un ancho
   minimo, en un telefono de 390 px el lienzo cae a escala 3.24 y el estado
   ("Libre", "Cuenta") queda en 9 px, ilegible para el anfitrion que camina el
   salon. El minimo fija la escala en >= 4.5 (min-width / 100), con lo que el
   nombre (3.4 u) sube a 15 px y el estado (2.8 u) a 12.6 px, sin tocar una sola
   coordenada ni el tamano en unidades del lienzo: la figura de cada mesa y el
   rotulo dentro de ella conservan su proporcion, y el mapa sigue escalando por
   encima de ese piso hasta max-width. Cuando el lienzo no cabe, .anf-mapa-wrap
   ya lo desplaza en horizontal (overflow-x: auto), que es como se recorre un
   plano en un telefono. */
.anf-mapa { display: block; width: 100%; min-width: 450px; max-width: 720px; margin: 0 auto; }
.anf-mesa { cursor: pointer; }
.anf-mesa rect, .anf-mesa ellipse {
  fill: var(--surface-2); stroke: var(--border); stroke-width: 0.6;
  transition: fill var(--trans), stroke var(--trans);
}
.anf-mesa:hover rect, .anf-mesa:hover ellipse,
.anf-mesa:focus rect, .anf-mesa:focus ellipse { stroke: var(--accent); stroke-width: 1.2; }
.anf-mesa text { text-anchor: middle; pointer-events: none; fill: var(--text); }
.anf-nm { font-size: 3.4px; font-weight: 700; }
.anf-sub { font-size: 2.8px; fill: var(--text-dim); }

.anf-mesa.estado-libre rect, .anf-mesa.estado-libre ellipse { fill: var(--empty); }
.anf-mesa.estado-sentada rect, .anf-mesa.estado-sentada ellipse { fill: var(--info); }
.anf-mesa.estado-ordenando rect, .anf-mesa.estado-ordenando ellipse { fill: var(--accent-soft); }
.anf-mesa.estado-comiendo rect, .anf-mesa.estado-comiendo ellipse { fill: var(--ok); }
.anf-mesa.estado-cuenta rect, .anf-mesa.estado-cuenta ellipse { fill: var(--gold); }
.anf-mesa.estado-por_limpiar rect, .anf-mesa.estado-por_limpiar ellipse { fill: var(--warn); }

.legend .sw-libre { background: var(--empty); }
.legend .sw-sentada { background: var(--info); }
.legend .sw-ordenando { background: var(--accent-soft); }
.legend .sw-comiendo { background: var(--ok); }
.legend .sw-cuenta { background: var(--gold); }
.legend .sw-por_limpiar { background: var(--warn); }

/* detalle */
.anf-detalle .anf-tiempo { margin-top: var(--sp-2); }
.anf-detalle .k { font-size: var(--fs-0); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.anf-detalle ul { list-style: none; margin: var(--sp-1) 0 0; padding: 0; }
.anf-detalle li { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 3px 0; border-bottom: 1px solid var(--border); }

/* reservas */
.anf-reservas { list-style: none; margin: 0; padding: 0; }
.anf-reserva {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--border);
}
.anf-hora { font-variant-numeric: tabular-nums; font-weight: 700; }
.anf-nombre { flex: 1; min-width: 120px; }

@media (max-width: 640px) {
  .anf-reserva { align-items: flex-start; }
  .anf-nombre { min-width: 100%; }
}