/* ==========================================================================
   Módulo 02 · Reservas
   Tabla con predicción de no-show y seguimiento automático por reserva.
   Los componentes viven en componentes.css; aquí solo lo propio del módulo.
   ========================================================================== */

/* ── Tabla de reservas ────────────────────────────────────────────────── */

.tabla--reservas { table-layout: auto; }

.tabla--reservas td { vertical-align: middle; }

/* La primera columna manda: nombre arriba, procedencia abajo. */
.reserva__comensal {
  display: block;
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  color: var(--texto-fuerte);
  line-height: 1.3;
}

.reserva__origen {
  display: block;
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-top: 2px;
}

.reserva__hora {
  font-family: var(--tipo-datos);
  font-variant-numeric: tabular-nums;
  color: var(--texto-fuerte);
}

.reserva__valor {
  font-family: var(--tipo-datos);
  font-variant-numeric: tabular-nums;
  color: var(--texto-fuerte);
}

.reserva__accion { text-align: right; white-space: nowrap; }

/* Razón del riesgo, en la fila de detalle. La escribe el modelo. */
.reserva__razon {
  display: block;
  max-width: 78ch;
}

.reserva__razon--esperando {
  color: var(--texto-tenue);
  font-style: italic;
}

/* Una reserva ya confirmada baja de peso: el ojo va a las que faltan. */
.tabla__fila.es-confirmada .reserva__comensal { color: var(--texto-medio); }

.tabla__fila.es-confirmada .reserva__valor,
.tabla__fila.es-confirmada .reserva__hora { color: var(--texto-tenue); }

.confirmada {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fn-exito);
  white-space: nowrap;
}

.confirmada__marca {
  width: 14px;
  height: 14px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* El mensaje que redactó el modelo, dentro de la fila de detalle. */
.mensaje-enviado {
  display: block;
  margin-top: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  background: var(--exito-suave);
  border-radius: var(--radio-s);
  color: var(--texto-fuerte);
  font-size: var(--txt-sm);
  line-height: var(--lh-suelto);
}

.mensaje-enviado__rotulo {
  display: block;
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fn-exito);
  margin-bottom: var(--esp-1);
}

/* ── Nota al pie: qué pesa el modelo ──────────────────────────────────── */

.nota-modelo {
  font-size: var(--txt-sm);
  line-height: var(--lh-suelto);
  color: var(--texto-medio);
  max-width: 92ch;
}

.nota-modelo strong {
  color: var(--texto-fuerte);
  font-weight: var(--peso-medio);
}

/* ── Seguimiento automático ───────────────────────────────────────────── */

.seguimiento__intro {
  font-size: var(--txt-sm);
  line-height: var(--lh-suelto);
  color: var(--texto-medio);
  padding-bottom: var(--esp-3);
  margin-bottom: var(--esp-3);
  border-bottom: var(--borde);
}

.seguimiento__intro strong {
  color: var(--texto-fuerte);
  font-weight: var(--peso-medio);
}

/* ── Ajustes en pantallas menores ─────────────────────────────────────── */

@media (max-width: 900px) {
  /* La tabla conserva su ancho y se desplaza dentro de su marco, en lugar de
     apretar las columnas hasta hacerlas ilegibles. */
  .tabla--reservas { min-width: 640px; }
}