/*
 * Multideportes – UI (Dark only)
 * Últ. act.: 2025-08-20
 * Notas:
 * - Navbar sticky y dropdown por encima del carrusel
 * - Slots con animación
 * - File uploader (un SOLO botón; oculta el nativo)
 * - Overlays de “procesando” y “ok”
 * - Checkout Sheet para móvil (#co-sheet)
 */

/* ====== Fuente ====== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');

/* ====== Paleta (oscuro) ====== */
:root{
  --bg: #0b1220;
  --bg-soft:#0f172a;
  --bg-elev:#151b24;
  --border:#1f2937;
  --text:#e5e7eb;
  --text-2:#cbd5e1;
  --muted:#9ca3af;
  --accent:#22c55e;
  --accent-2:#16f1b6;
  --err:#ef4444;
  --warn:#f59e0b;

  --shadow-soft:0 4px 18px rgba(0,0,0,.22);
  --shadow-strong:0 12px 36px rgba(0,0,0,.35);
}

/* ====== Base + fondo estadio (oscuro) ====== */
html, body{
  min-height:100%;
  margin:0;
  background:
    url('../img/fondo-estadio.png') no-repeat center center fixed,
    linear-gradient(180deg,#161e2e 70%,#274a6a 100%);
  background-size:cover;
  color:var(--text);
  font-family:'Montserrat', Arial, sans-serif;
}

/* ====== Navbar sticky ====== */
.navbar{
  position:sticky; top:0; z-index:1100;
  background:rgba(22,30,46,.82) !important;
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar .nav-link{ font-size:1.05rem; }
.navbar-brand img{ border-radius:.5rem; box-shadow:0 1px 4px #0002; }


/* ====== Hero ====== */
.hero-desktop{ position:relative; min-height:60vh; display:flex; align-items:center; justify-content:center; }
.hero-desktop::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.22); }
.hero-desktop .container{ position:relative; z-index:1; }
.display-title{ font-size:3rem; font-weight:900; text-shadow:0 3px 24px rgba(0,0,0,.65); }

/* ====== Buscador ====== */
.search-form{
  max-width:680px; margin:0 auto 1.5rem;
  display:flex; align-items:center; gap:.4rem;
  background:var(--bg-soft); border:1px solid var(--border);
  border-radius:1.5rem; overflow:hidden; position:relative;
  box-shadow:var(--shadow-soft);
}
.search-icon{ padding:.6rem 1rem; font-size:1.35rem; color:var(--accent); }
.search-form input{
  flex:1; border:none; background:transparent; outline:none;
  color:var(--text); font-size:1.08rem; padding:.6rem .9rem;
}
.search-form input::placeholder{ color:var(--muted); }

/* ====== Secciones / Cards ====== */
.section-title{ font-weight:800; font-size:2.2rem; color:var(--accent-2); text-shadow:0 4px 28px #000b; }
.card-dark, .card.bg-dark{
  background:var(--bg-soft) !important;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:1.25rem;
  box-shadow:var(--shadow-soft);
}
.card-img-top{ width:100%; height:100%; object-fit:cover; border-radius:1.25rem 1.25rem 0 0; }
@media (max-width: 768px){ .card-img-top{ height:180px; } }
.btn-circle{
  border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  font-size:2rem; background:#fff !important; color:#161e2e !important; border:none; opacity:.9;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}

/* ====== Slot Reserva ====== */
.slot{
  cursor:pointer; border:1px solid var(--border); background:var(--bg-soft);
  color:var(--text); border-radius:12px; padding:.8rem;
  transition:transform .15s, border-color .2s, box-shadow .2s;
}
.slot:hover{ transform:translateY(-1px); border-color:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.slot.disabled{ opacity:.45; pointer-events:none; }
.slot.active{ outline:2px solid var(--accent); }
.price{ font-weight:700; }

/* ====== Modales oscuros ====== */
.modal-dark .modal-content{
  background:var(--bg-soft); color:var(--text); border:1px solid var(--border);
}
.modal-dark .btn-close{ filter: invert(1) grayscale(1); opacity:.65; }

/* ====== File uploader (1 solo botón) ====== */
.file-enhanced{ display:flex; align-items:center; gap:.5rem; }
.file-enhanced .btn-icon-file{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:.65rem;
}
.file-enhanced .file-name{ max-width: 60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
/* Oculta el botón nativo del input sin romper .click() programático */
.file-enhanced input[type=file]{
  position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; border:0; padding:0; margin:0;
}

/* ====== Wallet/Card badges ====== */
.badge-soft{ background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--muted); }

/* ====== Overlays (loader + ok) ====== */
.full-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  z-index:1300;
}
.full-overlay.show{ display:flex; }
.loader-ring{
  width:56px; height:56px; border-radius:999px; border:4px solid #fff; border-right-color:transparent;
  animation:spin .7s linear infinite;
}
.check-pop{
  width:86px; height:86px; border-radius:999px; background:#16a34a; color:#ffffff;
  font-size:48px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 36px rgba(0,0,0,.35);
}
@keyframes spin{ to{ transform: rotate(360deg);} }

/* ====== Carrusel deportes ====== */
.deportes-carousel-wrapper{ overflow:hidden }
.deportes-carousel{ display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:6px }
.deportes-carousel::-webkit-scrollbar{ height:8px }
.deportes-carousel::-webkit-scrollbar-thumb{ background:#334155; border-radius:8px }
.deporte-item{ min-width:110px }
.icon-deporte{
  width:88px; height:88px; border-radius:50%;
  background:var(--bg-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, box-shadow .2s;
}
.icon-deporte img{ max-width:70%; max-height:70%; display:block }
.deporte-item:hover .icon-deporte{ transform:translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,.25) }

/* ====== Móvil ====== */
.deportes-destacados-movil-wrapper{ overflow:hidden }
.deportes-destacados-movil{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 8px }
.deporte-item-movil{ scroll-snap-align:start; min-width:86px }
.evento-card-movil{ background:var(--bg-soft); border:1px solid var(--border) }

/* ====== Checkout Sheet (móvil sin modal) ======
   Estructura:
   <div id="co-sheet" class="co-sheet">
     <div class="co-sheet__panel">...</div>
   </div>
*/
.co-sheet{
  position:fixed; inset:0; display:none; z-index:1250;
  background:rgba(0,0,0,.45);
}
.co-sheet.open{ display:block; }
.co-sheet__panel{
  position:absolute; left:0; right:0; bottom:-100%;
  background:var(--bg-soft); color:var(--text);
  border-top:1px solid var(--border);
  border-radius:18px 18px 0 0;
  box-shadow:var(--shadow-strong);
  padding:12px;
  min-height:58%;
  transition: bottom .28s ease;
}
.co-sheet.open .co-sheet__panel{ bottom:0; }
.co-sheet__header{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:4px 4px 8px;
}
.co-sheet__title{ font-weight:700; }
.co-sheet__close{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
}

/* ====== Util ====== */
.text-muted-2{ color:var(--muted) !important; }
.is-hidden{ display:none !important; }
.footer-desktop{ background:rgba(15,23,42,.9); border-top:1px solid rgba(255,255,255,.08); text-align:center; padding:2rem 1rem; }
 /* Asegura que los modales siempre estén por encima de la navbar sticky */
  .modal           { z-index: 2000 !important; }
  .modal-backdrop  { z-index: 1990 !important; }

  /* Mejoras visuales del reproductor */
  #videoModal .modal-content { background:#0b1220; border:0; }
  #videoModal .ratio { background:#000; }
  #videoModal .btn-close { filter: invert(1) grayscale(1); opacity:.9; }
/* === Navbar & Dropdown fixes (siempre visible y clickeable) === */
.navbar{
  position: sticky;
  top: 0;
  z-index: 1500; /* más alto que héroes/carruseles */
  background: rgba(22,30,46,.82) !important;
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* El menú debe quedar por encima de la navbar y cualquier overlay suave */
.navbar .dropdown-menu{
  z-index: 2001 !important;   /* > navbar (1500), > backdrops ligeros */
  margin-top: .4rem;
  inset: auto auto auto 0;    /* asegura anclaje correcto en nav end */
}

/* Evita clipping accidental en contenedores del header */
.navbar, .navbar .container, .navbar .collapse {
  overflow: visible !important;
}

/* 1) Asegura que el modal quede SIEMPRE por encima del footer móvil */
#res-checkout.modal { z-index: 1200; }
.modal-backdrop { z-index: 1190; }

/* 2) Footer del modal PEGADO dentro del modal (no fixed al viewport) */
#res-checkout .modal-footer{
  position: sticky;         /* clave */
  bottom: 0;
  background: #0f172a;
  border-top: 1px solid #1f2937;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 1;               /* suficiente dentro del stacking del modal */
}

/* 3) Evita que el contenido se oculte tras el footer del modal */
#res-checkout .modal-body{
  padding-bottom: 80px;     /* ≈ altura del footer del modal */
}

.object-fit-cover { object-fit: cover; }
.slot{background:#0f172a;border:1px solid #1f2937;border-radius:12px;padding:.75rem;color:#e5e7eb;cursor:pointer}
.slot.disabled{opacity:.5;pointer-events:none}
.slot.active{outline:2px solid #22c55e}
.slot--pico{background:#f3bb02;border-color:#ffe69c;color:#111}
.slot--pico .price{color:#111}

.btn-outline-danger.btn-sm {
  border-color: rgba(220,53,69,.35);
  color: #ffb3bc;
}
.btn-outline-danger.btn-sm:hover {
  background: rgba(220,53,69,.15);
  border-color: rgba(220,53,69,.55);
  color: #fff;
}
#logoutConfirm .modal-content {
  background: linear-gradient(145deg,#0f172a,#0b1220);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 1rem;
}