/* CSS para plano que respeta celdas en blanco */
.plano-bus-container { background:#f8f9fb;padding:16px;border-radius:10px;display:inline-block;overflow:visible; }
.plano-title { font-weight:600;margin-bottom:10px;color:#2d3b4f; }
.plano-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 48px);
  grid-auto-rows: 48px;
  gap: 6px;
  justify-content: center;
  padding: 8px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: visible;
}
/* celda vacía / pasillo (puntos en blanco) */
.plano-cell {
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  box-sizing: border-box;
  transition: filter 0.15s ease, transform 0.15s ease;
  position: relative;
}
/* default empty look (white) */
.plano-cell-empty {
  background: #ffffff;
  border: 1px dashed rgba(0,0,0,0.06);
}
/* seat styling */
.plano-seat {
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.plano-seat-label {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  color: #fff;
}
.plano-seat.disponible { background: linear-gradient(145deg,#43a047,#2e7d32); }
.plano-seat.ocupado    { background: linear-gradient(145deg,#e53935,#b71c1c); }
.plano-seat.reservado  { background: linear-gradient(145deg,#ff9800,#ef6c00); }

/* ── HOVER ── solo brillo + escala, sin tocar clases ni estado */
.plano-seat.disponible:hover {
  filter: brightness(1.25);
  transform: scale(1.1);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(67,160,71,0.45);
}
.plano-seat.ocupado:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
  z-index: 10;
  cursor: not-allowed;
  box-shadow: 0 4px 12px rgba(229,57,53,0.45);
}
.plano-seat.reservado:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(255,152,0,0.45);
}

/* leyenda */
.plano-leyenda { margin-top:10px;font-size:13px;color:#555; }
.plano-leyenda span { margin:0 8px;padding-left:18px;position:relative; }
.plano-leyenda span::before { content:'';position:absolute;left:0;top:2px;width:12px;height:12px;border-radius:3px; }
.plano-leyenda .disp::before { background:#43a047; }
.plano-leyenda .ocp::before  { background:#e53935; }
.plano-leyenda .res::before  { background:#ff9800; }

/* ── PENDIENTE (ámbar) ── asiento agregado al carrito, aún no grabado */
.plano-seat.pendiente {
  background: linear-gradient(145deg,#ffb300,#e65100) !important;
  color: #fff !important;
  cursor: not-allowed !important;
  opacity: 0.95;
  box-shadow: 0 0 8px rgba(255,179,0,0.6);
}
.plano-seat.pendiente:hover {
  filter: brightness(1.12);
  transform: scale(1.04);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(255,179,0,0.5);
}