/* ==========================================================================
   compra-web — identidad Golden Line
   Marco negro y dorado (barra, pasos, fondo, botones) con las tarjetas en blanco:
   aquí el cliente llena datos, elige silla y paga, y mucho del contenido lo arma
   el código con colores oscuros fijos. Libre/ocupado de las sillas se quedan en
   verde/rojo porque se leen sin pensar; la silla elegida pasa a dorado.
   Se carga DESPUÉS del <style> propio de la página.
   ========================================================================== */
:root {
  --primary: #000;
  --gl-gold: #B8912F;
  --gl-gold-hi: #D9B65C;
  --gl-gold-dk: #8F6D1E;
  --gl-gold-grad: linear-gradient(135deg, #8F6D1E 0%, #B8912F 38%, #E4C477 55%, #B8912F 72%, #8F6D1E 100%);
  --bg: #0a0a0a;
  --radius: 18px;
  --shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
body {
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  background:
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(184, 145, 47, .14) 0%, rgba(0, 0, 0, 0) 70%),
    var(--bg) !important;
  min-height: 100vh;
}

/* Barra superior */
.topbar { background: rgba(0, 0, 0, .94) !important; border-bottom: 1px solid rgba(184, 145, 47, .45); box-shadow: 0 6px 20px rgba(0, 0, 0, .5) !important; }
.topbar h1 { font-weight: 700; letter-spacing: .01em; }
.topbar h1::after {
  content: "Golden Line"; display: inline-block; margin-left: 10px; padding: 3px 9px 2px; vertical-align: 2px;
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gl-gold-hi); border: 1px solid rgba(184, 145, 47, .5); border-radius: 999px;
}
@media (max-width: 380px) { .topbar h1::after { display: none; } }

/* Pasos */
.step-dot { background: #1c1c1c !important; color: #777 !important; border: 1px solid #2c2c2c; }
.step-dot.active { background: var(--gl-gold-grad) !important; color: #111 !important; border-color: transparent; box-shadow: 0 0 0 4px rgba(184, 145, 47, .18); }
.step-dot.done { background: #111 !important; color: var(--gl-gold-hi) !important; border-color: var(--gl-gold); }
.step-label { color: #8a8a8a !important; }

/* Tarjetas (siguen blancas por legibilidad) */
.card-box { border-top: 3px solid var(--gl-gold); box-shadow: var(--shadow) !important; }
.card-box h3 i { color: var(--gl-gold) !important; }

/* Botones */
.btn-concorde {
  background: var(--gl-gold-grad) !important; background-size: 180% 100% !important; color: #111 !important;
  border-radius: 999px !important; box-shadow: 0 8px 22px rgba(184, 145, 47, .25);
  transition: background-position .3s ease, transform .15s ease !important;
}
.btn-concorde:hover { background-position: 100% 0 !important; color: #111 !important; transform: translateY(-1px); }
.btn-concorde:disabled { background: #3a3a3a !important; color: #999 !important; box-shadow: none; opacity: 1 !important; }
/* "Volver" suele quedar sobre el fondo negro */
.btn-outline { border: 1px solid rgba(184, 145, 47, .6) !important; color: #fff !important; background: rgba(0, 0, 0, .35) !important; border-radius: 999px !important; }
.btn-outline:hover { background: var(--gl-gold) !important; color: #111 !important; }
/* …pero si está dentro de una tarjeta blanca, en oscuro */
.card-box .btn-outline { color: #111 !important; background: transparent !important; }
.card-box .btn-outline:hover { color: #111 !important; background: rgba(184, 145, 47, .18) !important; }

/* Formulario */
.form-select:focus, .form-control:focus { border-color: var(--gl-gold) !important; box-shadow: 0 0 0 3px rgba(184, 145, 47, .22) !important; }

/* Tarjetas de horario */
.schedule-card { border-color: #e6e6e6 !important; }
.schedule-card:hover { border-color: var(--gl-gold) !important; }
.schedule-card:active, .schedule-card.selected { border-color: var(--gl-gold) !important; }
.schedule-card.selected { background: #fffaf0 !important; }
.schedule-card .pick { background: #0b0b0b !important; color: #fff !important; border-radius: 999px !important; }
.schedule-card .pick::after { content: ""; }
.schedule-card.selected .pick { background: var(--gl-gold-grad) !important; color: #111 !important; }
.schedule-card .fare { color: var(--gl-gold-dk) !important; }

/* Sillas: libre/ocupado igual; elegida en dorado */
.bus-cell.selected { background: var(--gl-gold-hi) !important; color: #111 !important; border-color: var(--gl-gold-dk) !important; }
.legend-dot[style*="#ffb300"] { background: var(--gl-gold-hi) !important; border-color: var(--gl-gold-dk) !important; }

/* Resumen */
.total-bar { background: #0b0b0b !important; border: 1px solid rgba(184, 145, 47, .55); }
.total-bar > :last-child { color: var(--gl-gold-hi); }
.pax-tab.active { background: #0b0b0b !important; color: var(--gl-gold-hi) !important; }

/* Textos que quedan sobre el fondo negro, fuera de las tarjetas */
.panel > p, .panel > .text-muted, .panel > small { color: #bdbdbd !important; }