/* ======================================================
   🚌 BUS VISUAL — LunaTravel
   Estilo tipo app premium
====================================================== */

.bus-floor {
  margin-bottom: 28px;
}

.bus-floor h4 {
  margin: 6px 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* ======================
   FILAS
====================== */
.bus-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  justify-content: center;
}

/* ======================
   CELDA BASE
====================== */
.bus-cell {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  user-select: none;
  transition: .15s;
}

/* ======================
   ASIENTOS
====================== */
.bus-cell.seat {
  background: #e5e7eb;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #d1d5db;
}

.bus-cell.seat.disponible:hover {
  background: #c7d2fe;
  transform: scale(1.05);
}

.bus-cell.seat.ocupado {
  background: #ef4444;
  color: #fff;
}

.bus-cell.seat.pendiente {
  background: #fde047;
}

.bus-cell.seat.verde {
  background: #22c55e !important;
  color: white;
}

.bus-cell.disabled {
  pointer-events: none;
  opacity: .6;
}

/* ======================
   PASILLO
====================== */
.bus-cell.aisle {
  width: 18px;
  background: transparent;
}

/* ======================
   VACÍOS / PANTALLA
====================== */
.bus-cell.empty,
.bus-cell.screen {
  width: 14px;
  height: 14px;
  background: transparent;
}

.bus-cell.screen {
  font-size: 16px;
}

/* ======================
   ICONOS
====================== */
.bus-icon {
  font-size: 18px;
  opacity: .8;
}

/* ======================
   CHOFER
====================== */
.bus-cell.driver {
  width: 48px;
  height: 48px;
  background: #111827;
  color: #facc15;
  border-radius: 14px;
}

/* ======================
   PUERTA
====================== */
.bus-cell.door {
  width: 28px;
  height: 42px;
  background: #fde68a;
  border-radius: 10px;
}

/* ======================
   WC (bloque grande)
====================== */
.bus-cell.wc {
  width: 86px;
  height: 42px;
  background: #c7d2fe;
  border-radius: 14px;
  font-size: 18px;
}

/* ======================
   ESCALERAS
====================== */
.bus-cell.stair {
  width: 86px;
  height: 42px;
  background: #fed7aa;
  border-radius: 14px;
  font-size: 18px;
}

/* ======================
   CAFETERÍA
====================== */
.bus-cell.cafeteria {
  width: 86px;
  height: 42px;
  background: #fde68a;
  border-radius: 14px;
  font-size: 18px;
}

/* ======================
   NOTA
====================== */
.bus-note {
  margin-top: 16px;
  font-size: 12px;
  text-align: center;
  color: #6b7280;
}

.bus-wrapper {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}


/* ======================================================
   🎫 LEYENDA DE ASIENTOS
====================================================== */

.bus-legend {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  margin: 18px 0 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
}

.legend-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}

/* mismos colores que el bus */
.legend-box.disponible { background: #e5e7eb; }
.legend-box.verde { background: #22c55e; }
.legend-box.pendiente { background: #fde047; }
.legend-box.ocupado { background: #ef4444; }

/* mobile */
@media (max-width: 480px) {
  .bus-legend {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
}

/* ======================
   MOBILE
====================== */
@media (max-width: 480px) {
  .bus-cell {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .bus-cell.wc,
  .bus-cell.stair,
  .bus-cell.cafeteria {
    width: 72px;
  }
}