/* Esqueleto compartido del modulo restaurante. Solo tokens de css/styles.css:
   ningun color, radio ni tamano literal. Cada vista trae su propia hoja
   (css/rest-*.css) y esta guarda unicamente lo que comparten todas. */

/* grupo de navegacion del modulo en la barra superior */
.nav-rest { align-items: center; }
.nav-grupo {
  font-size: var(--fs-0); color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.08em; padding-right: var(--sp-1);
  border-left: 1px solid var(--border); padding-left: var(--sp-2);
}

/* aviso de ruta cuyo modulo todavia no existe */
.rest-vacio {
  margin: var(--sp-4) auto; max-width: 420px; text-align: center;
  color: var(--text-dim); font-size: var(--fs-1);
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: var(--sp-3);
}

/* encabezado de vista: titulo a la izquierda, acciones a la derecha */
.rest-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2);
}
.rest-head h2 { font-size: var(--fs-3); }
.rest-head .sub { font-size: var(--fs-0); color: var(--text-dim); }

/* barra de acciones fija al pie: el pulgar la alcanza en el telefono */
.rest-barra {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between;
  padding: var(--sp-2); margin-top: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* importes: tabulares para que las columnas de dinero alineen */
.rest-precio { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rest-total { font-size: var(--fs-3); font-weight: 700; font-variant-numeric: tabular-nums; }

/* minutos transcurridos, mismo ancho en toda la vista */
.rest-min { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: var(--fs-0); }

/* estado nunca depende solo del color: siempre lleva su texto */
.rest-estado { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-0); }
.rest-estado .pt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex: none;
}

/* aviso de sincronizacion vieja, compartido por las pantallas en vivo */
.rest-sync {
  font-size: var(--fs-0); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 3px var(--sp-2);
}
.rest-sync.viejo { color: var(--warn); border-color: var(--warn); }

@media (max-width: 640px) {
  .nav-grupo { border-left: none; padding-left: 0; width: 100%; }
  .rest-head h2 { font-size: var(--fs-2); }
}