/* Tablero de cocina: pensado para tablet (horizontal o vertical) o monitor. Mobile-first. */

.encabezado--cocina {
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  padding-block: var(--esp-2);
}

.cocina-resumen {
  flex: 1 1 12rem;
  margin: 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

.cocina-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.boton[aria-pressed='true'] {
  border-color: var(--color-exito);
  color: var(--color-exito);
}

.cocina {
  padding: var(--esp-3);
  padding-bottom: 7rem; /* la barra de "Deshacer" no tapa el botón de la última tarjeta */
}

.cocina-vacio {
  margin: var(--esp-6) auto;
  max-width: 32rem;
  color: var(--color-texto-suave);
  font-size: var(--texto-lg);
  text-align: center;
}

.tablero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-5) var(--esp-3); /* espacio arriba para la etiqueta "Nuevo" */
  padding-top: var(--esp-3);
  align-items: start;
}

/* ---------- Tarjeta de pedido ---------- */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
}

.tarjeta--nueva {
  border-color: var(--color-pedido-nuevo);
  box-shadow: 0 0 0 4px var(--color-pedido-nuevo-brillo);
  animation: pulso-nuevo 1.2s ease-in-out infinite;
}

@keyframes pulso-nuevo {
  50% { box-shadow: 0 0 0 10px var(--color-pedido-nuevo-brillo); }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta--nueva {
    animation: none;
  }
}

.tarjeta__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.tarjeta__folio {
  margin: 0;
  font-size: var(--texto-xl);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.04em;
}

.chip {
  display: inline-block;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--radio-pildora);
  background: var(--color-neutro-suave);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}

/* Fuera del flujo: aparecer/desaparecer no mueve nada (un toque no debe "saltar" de botón). */
.chip--nuevo {
  position: absolute;
  top: calc(-1 * var(--esp-3));
  right: var(--esp-3);
  background: var(--color-pedido-nuevo);
  color: var(--color-primario-contraste);
  box-shadow: var(--sombra-1);
}

.chip--domicilio {
  background: var(--color-info-suave);
  color: var(--color-info);
}

.chip--recoger {
  background: var(--color-secundario);
  color: var(--color-secundario-contraste);
}

/* Contador: minutos desde que llegó; el color dice qué tan cerca está de la hora objetivo. */
.contador {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-1) var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-sm);
}

.contador__minutos {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-fuerte);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.contador__detalle {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}

.contador--verde {
  background: var(--color-semaforo-verde);
  color: var(--color-semaforo-verde-texto);
}

.contador--amarillo {
  background: var(--color-semaforo-amarillo);
  color: var(--color-semaforo-amarillo-texto);
}

.contador--rojo {
  background: var(--color-semaforo-rojo);
  color: var(--color-semaforo-rojo-texto);
}

.tarjeta__efectivo {
  margin: 0;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-sm);
  background: var(--color-efectivo-fondo);
  color: var(--color-efectivo-texto);
  font-weight: var(--peso-fuerte);
}

.productos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.productos__item {
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--color-borde);
}

.productos__item:last-child {
  border-bottom: 0;
}

.productos__nombre {
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
}

.productos__cantidad {
  display: inline-block;
  min-width: 2.5ch;
  margin-right: var(--esp-1);
}

.productos__opciones {
  display: block;
  color: var(--color-texto-suave);
}

.productos__notas {
  display: block;
  margin-top: var(--esp-1);
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--radio-sm);
  background: var(--color-notas-fondo);
  font-weight: var(--peso-fuerte);
}

.tarjeta__entrega {
  margin: 0;
  font-size: var(--texto-sm);
}

.tarjeta__entrega div {
  display: flex;
  gap: var(--esp-2);
}

.tarjeta__entrega dt {
  flex: 0 0 5.5rem;
  color: var(--color-texto-suave);
}

.tarjeta__entrega dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.boton--cocina {
  min-height: var(--objetivo-tactil-cocina);
  font-size: var(--texto-lg);
  border-radius: var(--radio-md);
}

.tarjeta__accion {
  width: 100%;
}

/* ---------- Diálogo de repartidor ---------- */
.dialogo-repartidor {
  width: min(32rem, calc(100% - 2 * var(--esp-4)));
  padding: var(--esp-5);
  border: 0;
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
  color: var(--color-texto);
  box-shadow: var(--sombra-2);
}

.dialogo-repartidor::backdrop {
  background: var(--color-velo);
}

.dialogo-repartidor__titulo {
  margin: 0 0 var(--esp-4);
  font-size: var(--texto-xl);
}

.lista-repartidores {
  display: grid;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}

/* ---------- Barra de deshacer ---------- */
.barra-deshacer {
  position: fixed;
  left: 50%;
  bottom: var(--esp-4);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  width: min(40rem, calc(100% - 2 * var(--esp-4)));
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-md);
  background: var(--color-barra-fondo);
  color: var(--color-barra-texto);
  box-shadow: var(--sombra-2);
  transform: translateX(-50%);
}

.barra-deshacer__texto {
  flex: 1 1 12rem;
  font-size: var(--texto-lg);
}

.barra-deshacer__boton {
  flex: 0 0 auto;
  min-width: 10rem;
}

/* Tablet en vertical: 2 columnas; horizontal y monitor: 3 o más. */
@media (min-width: 600px) {
  .cocina {
    padding: var(--esp-4) var(--esp-4) 7rem;
  }

  .tablero {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--esp-5) var(--esp-4);
  }
}