/* ============================================================
   componentes.css — Estilos de los componentes UI reutilizables
   ============================================================ */

/* ── Boton — variantes adicionales ──────────────────────── */

/* Variante "secundario": texto/borde rojo, solo para fondos claros
   (tarjetas blancas, alertas con tinte claro). Sobre un fondo saturado
   (hero, banners) usar `.boton--claro` en su lugar (paginas.css). */
.boton--secundario {
  background-color: transparent;
  color: var(--color-tierra);
  border-color: var(--color-tierra);
}
.boton--secundario:hover {
  background-color: var(--color-tierra-bg);
  color: var(--color-tierra-oscuro);
  border-color: var(--color-tierra-oscuro);
}

.boton--peligro {
  background-color: var(--color-error);
  color: var(--color-blanco);
  border-color: var(--color-error);
}
.boton--peligro:hover {
  background-color: #a93226;
  border-color: #a93226;
  color: var(--color-blanco);
}

.boton--ghost {
  background-color: transparent;
  color: var(--color-gris-600);
  border-color: transparent;
}
.boton--ghost:hover {
  background-color: var(--color-gris-100);
  color: var(--color-gris-800);
}

.boton--pequeno {
  padding: var(--espacio-1) var(--espacio-3);
  font-size: var(--tam-sm);
}

/* Spinner dentro del botón */
.boton__spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: currentColor;
  border-radius: var(--radio-circulo);
  animation: girar 0.6s linear infinite;
  flex-shrink: 0;
}

.boton--cargando {
  cursor: wait;
  opacity: 0.8;
}

/* ── Alerta ──────────────────────────────────────────────── */
.alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border-radius: var(--radio-md);
  border: 1px solid;
  font-size: var(--tam-sm);
}

.alerta--exito {
  background-color: var(--color-exito-bg);
  border-color: var(--color-exito-borde);
  color: #1d6e40;
}

.alerta--error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-borde);
  color: #8e1c12;
}

.alerta--advertencia {
  background-color: var(--color-advertencia-bg);
  border-color: var(--color-advertencia-borde);
  color: #7d5100;
}

.alerta--info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-borde);
  color: #1a5276;
}

.alerta__icono {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-circulo);
  font-size: 11px;
  font-weight: var(--peso-bold);
  background-color: currentColor;
  color: var(--color-blanco);
}

.alerta--exito   .alerta__icono { background-color: var(--color-exito); }
.alerta--error   .alerta__icono { background-color: var(--color-error); }
.alerta--advertencia .alerta__icono { background-color: var(--color-advertencia); }
.alerta--info    .alerta__icono { background-color: var(--color-info); }

.alerta__cuerpo {
  flex: 1;
}

.alerta__titulo {
  font-weight: var(--peso-semibold);
  margin-bottom: var(--espacio-1);
}

.alerta__mensaje {
  line-height: var(--altura-linea-relajada);
}

.alerta__cerrar {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--tam-sm);
  color: inherit;
  opacity: 0.6;
  padding: 0;
  line-height: 1;
}

.alerta__cerrar:hover {
  opacity: 1;
}

/* ── Spinner ─────────────────────────────────────────────── */
@keyframes girar {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spinner__circulo {
  display: block;
  border-radius: var(--radio-circulo);
  border-style: solid;
  border-color: var(--color-gris-200);
  border-top-color: var(--color-tierra);
  animation: girar 0.8s linear infinite;
}

.spinner--pequeno .spinner__circulo {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner--normal .spinner__circulo {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

.spinner--grande .spinner__circulo {
  width: 44px;
  height: 44px;
  border-width: 4px;
}

/* ── Esqueleto ───────────────────────────────────────────── */
@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.esqueleto {
  background-color: var(--color-gris-200);
  border-radius: var(--radio-sm);
  animation: pulsar 1.5s ease-in-out infinite;
  display: block;
}

.esqueleto--redondeado {
  border-radius: var(--radio-circulo);
}

.esqueleto-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  background-color: var(--color-blanco);
  border-radius: var(--radio-lg);
  border: 1px solid var(--color-gris-200);
}

.esqueleto-tarjeta__encabezado {
  display: flex;
  gap: var(--espacio-3);
  align-items: center;
  margin-bottom: var(--espacio-2);
}

/* ── Página de carga centrada ────────────────────────────── */
.cargando-pagina {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  gap: var(--espacio-4);
  color: var(--color-gris-500);
}

.cargando-pagina__mensaje {
  font-size: var(--tam-sm);
  color: var(--color-gris-500);
  margin: 0;
}

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--espacio-4);
  animation: aparecer var(--transicion-rapida) ease;
}

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background-color: var(--color-blanco);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-xl);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  width: 100%;
  animation: deslizar var(--transicion-normal) ease;
  overflow: hidden;
}

@keyframes deslizar {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.modal--pequeno { max-width: 400px; }
.modal--normal  { max-width: 560px; }
.modal--grande  { max-width: 800px; }

.modal__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espacio-5) var(--espacio-6);
  border-bottom: 1px solid var(--color-gris-200);
  flex-shrink: 0;
}

.modal__titulo {
  font-size: var(--tam-xl);
  color: var(--color-titulo);
  margin: 0;
}

.modal__cerrar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--tam-lg);
  color: var(--color-gris-500);
  padding: var(--espacio-1);
  border-radius: var(--radio-sm);
  line-height: 1;
  transition: color var(--transicion-rapida);
}

.modal__cerrar:hover {
  color: var(--color-gris-800);
  background-color: var(--color-gris-100);
}

.modal__cuerpo {
  padding: var(--espacio-6);
  overflow-y: auto;
  flex: 1;
}

.modal__pie {
  padding: var(--espacio-4) var(--espacio-6);
  border-top: 1px solid var(--color-gris-200);
  display: flex;
  justify-content: flex-end;
  gap: var(--espacio-3);
  flex-shrink: 0;
}

/* ── Insignia ────────────────────────────────────────────── */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: 2px var(--espacio-2);
  border-radius: var(--radio-pill);
  font-size: var(--tam-xs);
  font-weight: var(--peso-semibold);
  white-space: nowrap;
  border: 1px solid transparent;
}

.insignia--exito {
  background-color: var(--color-exito-bg);
  color: #1d6e40;
  border-color: var(--color-exito-borde);
}

.insignia--error {
  background-color: var(--color-error-bg);
  color: #8e1c12;
  border-color: var(--color-error-borde);
}

.insignia--advertencia {
  background-color: var(--color-advertencia-bg);
  color: #7d5100;
  border-color: var(--color-advertencia-borde);
}

.insignia--info {
  background-color: var(--color-info-bg);
  color: #1a5276;
  border-color: var(--color-info-borde);
}

.insignia--neutral {
  background-color: var(--color-gris-100);
  color: var(--color-gris-600);
  border-color: var(--color-gris-300);
}

.insignia--tierra {
  background-color: var(--color-tierra-bg);
  color: var(--color-tierra-oscuro);
  border-color: var(--color-tierra-claro);
}

.insignia__punto {
  width: 6px;
  height: 6px;
  border-radius: var(--radio-circulo);
  background-color: currentColor;
  flex-shrink: 0;
}

/* ── CampoFormulario ─────────────────────────────────────── */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

.campo__etiqueta {
  font-size: var(--tam-sm);
  font-weight: var(--peso-semibold);
  color: var(--color-gris-700);
}

.campo__requerido {
  color: var(--color-error);
}

.campo__control {
  width: 100%;
  padding: var(--espacio-2) var(--espacio-3);
  font-size: var(--tam-base);
  font-family: var(--fuente-cuerpo);
  color: var(--color-gris-800);
  background-color: var(--color-blanco);
  border: var(--borde);
  border-radius: var(--radio-md);
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
  line-height: var(--altura-linea-normal);
}

.campo__control:focus {
  outline: none;
  border-color: var(--color-tierra);
  box-shadow: 0 0 0 3px rgba(227, 9, 33, 0.15);
}

.campo__control--error {
  border-color: var(--color-error);
}

.campo__control--error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.campo__control--textarea {
  resize: vertical;
  min-height: 100px;
}

.campo__control--select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--espacio-3) center;
  padding-right: var(--espacio-8);
}

.campo__ayuda {
  font-size: var(--tam-xs);
  color: var(--color-gris-500);
  line-height: var(--altura-linea-relajada);
}

.campo__error {
  font-size: var(--tam-xs);
  color: var(--color-error);
  font-weight: var(--peso-medio);
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
}

.campo__error::before {
  content: "⚠";
  font-size: 10px;
}

/* ── SelectorBooleano ────────────────────────────────────── */
.campo-booleano {
  border: none;
  padding: 0;
  margin: 0;
}

.campo-booleano__opciones {
  display: flex;
  gap: var(--espacio-3);
}

.campo-booleano__opcion {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-4);
  border: var(--borde);
  border-radius: var(--radio-md);
  cursor: pointer;
  font-size: var(--tam-sm);
  font-weight: var(--peso-medio);
  color: var(--color-gris-600);
  transition: all var(--transicion-rapida);
  user-select: none;
}

.campo-booleano__opcion:hover {
  border-color: var(--color-tierra);
  color: var(--color-tierra);
}

.campo-booleano__opcion--seleccionada {
  background-color: var(--color-tierra-bg);
  border-color: var(--color-tierra);
  color: var(--color-tierra-oscuro);
}

.campo-booleano__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ── CampoCheckbox ───────────────────────────────────────── */
.campo-checkbox__opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde);
  border-radius: var(--radio-md);
  cursor: pointer;
  transition: all var(--transicion-rapida);
}

.campo-checkbox__opcion:hover {
  border-color: var(--color-tierra);
}

.campo-checkbox__opcion--marcada {
  background-color: var(--color-tierra-bg);
  border-color: var(--color-tierra);
}

.campo-checkbox__input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-tierra);
}

.campo-checkbox__texto {
  font-size: var(--tam-sm);
  color: var(--color-gris-700);
  line-height: var(--altura-linea-relajada);
}

.campo--con-error .campo-checkbox__opcion {
  border-color: var(--color-error);
}

/* ── CampoArchivo ────────────────────────────────────────── */
.campo-archivo__zona {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: 2px dashed var(--color-gris-300);
  border-radius: var(--radio-md);
  cursor: pointer;
  transition: all var(--transicion-rapida);
  background-color: var(--color-gris-100);
}

.campo-archivo__zona:hover {
  border-color: var(--color-tierra);
  background-color: var(--color-tierra-bg);
}

.campo-archivo__zona--listo {
  border-style: solid;
  border-color: var(--color-exito-borde);
  background-color: var(--color-exito-bg);
}

.campo-archivo__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.campo-archivo__icono {
  font-size: var(--tam-xl);
  flex-shrink: 0;
}

.campo-archivo__texto {
  font-size: var(--tam-sm);
  color: var(--color-gris-600);
  word-break: break-all;
}

.campo--con-error .campo-archivo__zona {
  border-color: var(--color-error);
}

/* ── CampoCondicional ────────────────────────────────────── */
.campo-condicional {
  border-left: 3px solid var(--color-tierra-claro);
  padding-left: var(--espacio-4);
  animation: deslizar-abajo var(--transicion-normal) ease;
}

@keyframes deslizar-abajo {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mapa de asientos ────────────────────────────────────── */

/* Página contenedora */
.pagina-asientos {
  padding-bottom: var(--espacio-12);
}

.asientos-cabecera {
  background-color: var(--color-tierra);
  color: var(--color-blanco);
  padding: var(--espacio-6) 0;
  margin-bottom: var(--espacio-6);
}

.asientos-cabecera__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
}

.asientos-cabecera__titulo {
  font-size: var(--tam-2xl);
  color: var(--color-blanco);
  margin: 0 0 var(--espacio-1);
}

.asientos-cabecera__subtitulo {
  font-size: var(--tam-sm);
  color: rgba(255,255,255,0.75);
  margin: 0;
}

/* Banner de folio */
.asientos-folio-banner {
  background-color: var(--color-gris-100);
  border: 1px solid var(--color-gris-300);
  border-radius: var(--radio-lg);
  padding: var(--espacio-4) var(--espacio-5);
  margin-bottom: var(--espacio-4);
}

.asientos-folio-banner__texto {
  margin-bottom: var(--espacio-3);
}

.asientos-folio-banner__texto strong {
  font-size: var(--tam-sm);
  color: var(--color-titulo);
  display: block;
  margin-bottom: var(--espacio-1);
}

.asientos-folio-banner__texto p {
  font-size: var(--tam-xs);
  color: var(--color-gris-500);
  margin: 0;
}

.asientos-folio-banner__form {
  display: flex;
  gap: var(--espacio-2);
  align-items: center;
  flex-wrap: wrap;
}

.asientos-folio-banner__input {
  width: 140px;
  font-family: var(--fuente-mono);
  font-weight: var(--peso-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.asientos-folio-banner__reenvio {
  display: inline-block;
  margin-top: var(--espacio-3);
  background: none;
  border: none;
  padding: 0;
  font-size: var(--tam-xs);
  color: var(--color-tierra-oscuro);
  text-decoration: underline;
  cursor: pointer;
}

.asientos-folio-banner__reenvio:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Banner de éxito */
.asientos-exito {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  padding: var(--espacio-4);
  background-color: var(--color-exito-bg);
  border: 1px solid var(--color-exito-borde);
  border-radius: var(--radio-lg);
  margin-bottom: var(--espacio-4);
}

.asientos-exito__icono {
  width: 40px;
  height: 40px;
  border-radius: var(--radio-circulo);
  background-color: var(--color-exito);
  color: var(--color-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--peso-bold);
  flex-shrink: 0;
}

.asientos-exito__texto {
  flex: 1;
}

.asientos-exito__texto strong {
  display: block;
  color: #1d6e40;
  font-size: var(--tam-sm);
}

.asientos-exito__texto span {
  font-size: var(--tam-xs);
  color: var(--color-gris-500);
}

/* Panel de confirmación — se detiene justo arriba del pie de página fijo,
   nunca debajo de él. Fondo sólido (no degradado) para que el contenido
   que pasa por detrás quede claramente oculto. */
.asientos-confirmacion-wrapper {
  position: sticky;
  bottom: var(--altura-pie);
  z-index: var(--z-elevado);
  padding: var(--espacio-3) 0;
  background-color: var(--color-arena);
}

.asientos-confirmacion {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  flex-wrap: wrap;
  background-color: var(--color-tierra-oscuro);
  color: var(--color-blanco);
  border-radius: var(--radio-xl);
  padding: var(--espacio-4) var(--espacio-5);
  box-shadow: var(--sombra-lg);
}

.asientos-confirmacion__info {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  flex: 1;
}

.asientos-confirmacion__numero {
  font-family: var(--fuente-mono);
  font-size: var(--tam-3xl);
  font-weight: var(--peso-bold);
  color: var(--color-blanco);
  line-height: 1;
}

.asientos-confirmacion__camion {
  font-weight: var(--peso-semibold);
  margin: 0 0 var(--espacio-1);
  font-size: var(--tam-sm);
}

.asientos-confirmacion__folio {
  font-size: var(--tam-xs);
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.asientos-confirmacion__acciones {
  display: flex;
  gap: var(--espacio-3);
  align-items: center;
}

.asientos-confirmacion .alerta {
  width: 100%;
}

/* Lista de mapas */
.asientos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-8);
}

.asientos-nota {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding-top: var(--espacio-6);
  border-top: 1px solid var(--color-gris-200);
  margin-top: var(--espacio-4);
}

.asientos-nota p {
  font-size: var(--tam-sm);
  color: var(--color-gris-500);
  margin: 0;
}

/* Mapa de un camión */
.mapa-camion {
  background-color: var(--color-blanco);
  border-radius: var(--radio-xl);
  border: 1px solid var(--color-gris-200);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
}

.mapa-camion__encabezado {
  width: 100%;
  padding: var(--espacio-5) var(--espacio-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  border: none;
  border-bottom: 1px solid var(--color-gris-200);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  flex-wrap: wrap;
}

.mapa-camion__encabezado:hover {
  background-color: var(--color-gris-100);
}

.mapa-camion__info {
  min-width: 0;
}

.mapa-camion__nombre {
  font-size: var(--tam-lg);
  color: var(--color-titulo);
  margin: 0 0 var(--espacio-1);
}

.mapa-camion__capacidad {
  font-size: var(--tam-sm);
  margin: 0;
}

.mapa-camion__disponibles {
  font-weight: var(--peso-semibold);
  color: var(--color-exito);
}

.mapa-camion__disponibles--lleno {
  color: var(--color-error);
}

.mapa-camion__total {
  color: var(--color-gris-500);
}

.mapa-camion__barra-contenedor {
  width: 120px;
  height: 6px;
  background-color: var(--color-gris-200);
  border-radius: var(--radio-pill);
  overflow: hidden;
  flex-shrink: 0;
}

.mapa-camion__barra {
  height: 100%;
  background-color: var(--color-tierra);
  border-radius: var(--radio-pill);
  transition: width var(--transicion-normal);
}

.mapa-camion__toggle {
  font-size: var(--tam-xs);
  font-weight: var(--peso-semibold);
  color: var(--color-tierra);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Vehículo visual — franja horizontal desplazable, de FRENTE (izquierda)
   a PARTE TRASERA (derecha). Cada fila del camión (2 | pasillo | 2) se
   dibuja como una columna vertical dentro de la franja. */
.mapa-camion__vehiculo {
  padding: var(--espacio-6);
  background-color: var(--color-gris-100);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-4);
  overflow-x: auto;
}

.mapa-camion__frente,
.mapa-camion__fondo {
  writing-mode: vertical-rl;
  font-size: var(--tam-xs);
  font-weight: var(--peso-semibold);
  color: var(--color-gris-400);
  letter-spacing: 0.08em;
  padding: var(--espacio-2) 0;
  flex-shrink: 0;
}

.mapa-camion__asientos {
  display: flex;
  flex-direction: row;
  gap: var(--espacio-3);
}

.mapa-camion__columna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
  flex-shrink: 0;
}

.mapa-camion__lado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.mapa-camion__pasillo {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mapa-camion__numero-fila {
  font-size: 10px;
  color: var(--color-gris-400);
  font-weight: var(--peso-semibold);
}

/* Asiento */
.asiento {
  width: 40px;
  height: 40px;
  border-radius: var(--radio-md) var(--radio-md) var(--radio-sm) var(--radio-sm);
  font-size: var(--tam-xs);
  font-weight: var(--peso-bold);
  font-family: var(--fuente-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  transition: all var(--transicion-rapida);
  cursor: pointer;
  position: relative;
}

/* Respaldo del asiento (línea superior) */
.asiento::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px;
  right: 2px;
  height: 4px;
  border-radius: var(--radio-sm) var(--radio-sm) 0 0;
  background-color: currentColor;
  opacity: 0.4;
}

.asiento--disponible {
  background-color: var(--color-blanco);
  color: var(--color-gris-700);
  border-color: var(--color-gris-400);
}

.asiento--disponible:hover {
  background-color: var(--color-tierra-bg);
  border-color: var(--color-tierra);
  color: var(--color-tierra-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.asiento--ocupado {
  background-color: var(--color-gris-200);
  color: var(--color-gris-400);
  border-color: var(--color-gris-300);
  cursor: not-allowed;
}

.asiento--seleccionado {
  background-color: var(--color-tierra);
  color: var(--color-blanco);
  border-color: var(--color-tierra-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(227, 9, 33, 0.4);
  animation: seleccionado-pulso 1s ease infinite;
}

@keyframes seleccionado-pulso {
  0%, 100% { box-shadow: 0 4px 12px rgba(227, 9, 33, 0.4); }
  50%       { box-shadow: 0 4px 20px rgba(227, 9, 33, 0.7); }
}

.asiento--placeholder {
  background: none;
  border: none;
  cursor: default;
  visibility: hidden;
}

/* Muestra en leyenda */
.asiento--muestra {
  width: 20px;
  height: 20px;
  font-size: 8px;
  cursor: default;
}
.asiento--muestra::before { display: none; }
.asiento--disponible.asiento--muestra { transform: none; box-shadow: none; }
.asiento--seleccionado.asiento--muestra { transform: none; animation: none; }

/* Leyenda */
.mapa-leyenda {
  padding: var(--espacio-4) var(--espacio-6);
  display: flex;
  gap: var(--espacio-5);
  border-top: 1px solid var(--color-gris-200);
  flex-wrap: wrap;
}

.mapa-leyenda__item {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--tam-xs);
  color: var(--color-gris-600);
}

/* Panel de reserva grupal — se elige tocando los asientos en el mismo
   mapa (igual que la reserva individual); este panel sticky solo lista
   lo ya elegido y pide el ID institucional de cada integrante. Vive
   dentro del mismo `.asientos-confirmacion-wrapper` sticky que usa la
   reserva individual, pero como tarjeta clara (no roja) porque aloja
   varios campos de texto. */
.asientos-grupo {
  background-color: var(--color-blanco);
  border: 2px solid var(--color-tierra);
  border-radius: var(--radio-xl);
  padding: var(--espacio-4) var(--espacio-5);
  box-shadow: var(--sombra-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.asientos-grupo__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  flex-wrap: wrap;
}

.asientos-grupo__titulo {
  font-weight: var(--peso-semibold);
  color: var(--color-titulo);
  margin: 0;
}

.asientos-grupo__cancelar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--tam-xs);
  color: var(--color-gris-500);
  text-decoration: underline;
  padding: 0;
}

.asientos-grupo__vacio {
  font-size: var(--tam-sm);
  color: var(--color-gris-500);
  margin: 0;
}

.asientos-grupo__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  max-height: 220px;
  overflow-y: auto;
}

.asientos-grupo__fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--espacio-3);
  align-items: center;
}

.asientos-grupo__asiento {
  font-family: var(--fuente-mono);
  font-weight: var(--peso-bold);
  font-size: var(--tam-sm);
  color: var(--color-tierra);
  background-color: var(--color-tierra-bg);
  border-radius: var(--radio-md);
  padding: var(--espacio-1) var(--espacio-2);
  white-space: nowrap;
}

.asientos-grupo__quitar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-error);
  font-size: var(--tam-sm);
  padding: var(--espacio-1);
  border-radius: var(--radio-sm);
}

.asientos-grupo__quitar:hover {
  background-color: var(--color-error-bg);
}

.asientos-grupo__acciones {
  display: flex;
  justify-content: flex-end;
}

.asientos-grupo__acciones--separadas {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

.asientos-grupo__paso {
  font-size: var(--tam-xs);
  font-weight: var(--peso-semibold);
  color: var(--color-tierra);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ¿Para cuántas personas? — selector − n + al estilo ADO */
.asientos-pasajeros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  flex-wrap: wrap;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-gris-300);
  border-radius: var(--radio-lg);
  padding: var(--espacio-4) var(--espacio-5);
  margin-bottom: var(--espacio-4);
}

.asientos-pasajeros__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  font-size: var(--tam-sm);
  color: var(--color-gris-600);
}

.asientos-pasajeros__texto strong {
  color: var(--color-titulo);
  font-size: var(--tam-base);
}

.asientos-pasajeros__control {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-3);
}

.asientos-pasajeros__boton {
  width: 40px;
  height: 40px;
  border-radius: var(--radio-pill);
  border: 2px solid var(--color-tierra);
  background-color: var(--color-blanco);
  color: var(--color-tierra);
  font-size: var(--tam-lg);
  font-weight: var(--peso-bold);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transicion-rapida);
}

.asientos-pasajeros__boton:hover:not(:disabled) {
  background-color: var(--color-tierra-bg);
}

.asientos-pasajeros__boton:disabled {
  border-color: var(--color-gris-300);
  color: var(--color-gris-400);
  cursor: not-allowed;
}

.asientos-pasajeros__numero {
  min-width: 96px;
  text-align: center;
  font-weight: var(--peso-semibold);
  color: var(--color-titulo);
}

/* Paso 1 — integrantes: una fila por persona (número | datos | quitar) */
.asientos-grupo__integrantes {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.asientos-grupo__integrante {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--espacio-3);
  align-items: center;
}

.asientos-grupo__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radio-pill);
  background-color: var(--color-tierra);
  color: var(--color-blanco);
  font-size: var(--tam-xs);
  font-weight: var(--peso-bold);
  flex-shrink: 0;
}

.asientos-grupo__campos {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--espacio-2);
  align-items: center;
}

.asientos-grupo__ayuda {
  grid-column: 1 / -1;
  font-size: var(--tam-xs);
  color: var(--color-gris-500);
}

.asientos-grupo__verificado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  color: var(--color-exito);
  font-size: var(--tam-sm);
}

.asientos-grupo__nota {
  font-size: var(--tam-xs);
  color: var(--color-advertencia);
}

.asientos-grupo__error {
  grid-column: 2 / -1;
}

/* Paso 2 — un botón por pasajero; el activo recibe el siguiente asiento */
.asientos-grupo__pasajeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.asientos-grupo__pasajero {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-3) var(--espacio-1) var(--espacio-1);
  border: 2px solid var(--color-gris-300);
  border-radius: var(--radio-pill);
  background-color: var(--color-blanco);
  font-size: var(--tam-sm);
  cursor: pointer;
  transition: border-color var(--transicion-rapida);
}

.asientos-grupo__pasajero--listo {
  border-color: var(--color-tierra-claro);
}

.asientos-grupo__pasajero--activo {
  border-color: var(--color-tierra);
  box-shadow: 0 0 0 3px var(--color-tierra-bg);
  font-weight: var(--peso-semibold);
}

/* Responsive */
@media (max-width: 768px) {
  .asientos-cabecera__contenido {
    flex-direction: column;
    align-items: flex-start;
  }

  .asientos-folio-banner__form {
    flex-direction: column;
    align-items: stretch;
  }

  .asientos-folio-banner__input {
    width: 100%;
  }

  .asientos-confirmacion {
    flex-direction: column;
    align-items: stretch;
  }

  .asientos-confirmacion__acciones {
    justify-content: flex-end;
  }

  .asientos-nota {
    flex-direction: column;
    align-items: flex-start;
  }

  .asientos-grupo__fila {
    grid-template-columns: 1fr;
  }

  .asientos-grupo__campos {
    grid-template-columns: 1fr;
  }

  .asiento {
    width: 34px;
    height: 34px;
    font-size: 9px;
  }

  /* El mapa de asientos vuelve a apilarse verticalmente en móvil — la
     franja horizontal no cabe bien en pantallas angostas. */
  .mapa-camion__vehiculo {
    flex-direction: column;
  }

  .mapa-camion__frente,
  .mapa-camion__fondo {
    writing-mode: horizontal-tb;
  }

  .mapa-camion__asientos {
    flex-direction: column;
  }

  .mapa-camion__columna {
    flex-direction: row;
  }

  .mapa-camion__lado {
    flex-direction: row;
  }

  .mapa-camion__pasillo {
    width: 32px;
    height: auto;
  }
}