/* ════════════════════════════════════════════════════════════════════════
   VANGUARDIA — CORRECCIONES MÓVILES + SORTEO GANADOR
   Se carga DESPUÉS de main.css y del <style> del header.
   Objetivo:
     1) Reparar el menú hamburguesa (no se abría en celular).
     2) Evitar que filas de balotas / countdown / tabla histórico
        se partan en varias líneas en pantallas pequeñas.
     3) Dar color festivo a la tarjeta de "sorteo ganador".
════════════════════════════════════════════════════════════════════════ */

/* ── 1) FIX MENÚ MÓVIL ─────────────────────────────────────────────────────
   main.css trae reglas antiguas (de un navbar previo) que fuerzan
   `.navbar-nav{display:none}` por debajo de 768px. Esa clase también la usa
   el <ul> del navbar Bootstrap actual (.navbar-vanguardia), así que el menú
   quedaba oculto aunque Bootstrap le agregara la clase "show" al contenedor
   .navbar-collapse. Esta regla, más específica, entrega el control de la
   visibilidad de nuevo al contenedor .navbar-collapse de Bootstrap. */
.navbar-vanguardia .navbar-nav{
  display: flex !important;
}
@media (max-width: 991px){
  .navbar-vanguardia .navbar-nav{
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .navbar-vanguardia .navbar-nav .nav-item{
    width: 100%;
  }
  .navbar-vanguardia .navbar-nav .btn-nav-cta{
    display: inline-block;
    margin-top: 6px;
  }
}

/* ── 2) BALOTAS EN UNA SOLA LÍNEA, A LO ANCHO DE LA PANTALLA (index / resultados) ── */
@media (max-width: 768px){
  .balotas-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: clamp(3px, 1.6vw, 10px) !important;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .balota-wrap{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .balota{
    width: 100% !important;
    max-width: 56px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    font-size: clamp(10px, 4vw, 16px) !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }
  .bn-label{
    font-size: 7.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bonus-sep{
    flex: 0 0 auto !important;
    height: auto;
    align-self: stretch;
    margin: 0 2px !important;
    padding: 0 2px !important;
  }
  .bsep-text{ font-size: 6.5px !important; }
}
@media (max-width: 380px){
  .balota{ max-width: 46px !important; font-size: 10px !important; }
}

/* ── 2b) SECCIONES: reduce el padding vertical excesivo en móvil ────────── */
@media (max-width: 767px){
  .s-resultado.section[style],
  .s-hist.section[style]{
    padding: 100px 16px 48px !important;
  }
  .s-countdown-r[style]{
    padding: 24px !important;
  }
}

/* ── 3) COUNTDOWN EN UNA SOLA LÍNEA ──────────────────────────────────────── */
@media (max-width: 768px){
  .cd-row{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 6px;
    padding-bottom: 4px;
  }
  .cd-box{
    min-width: 68px;
    padding: 12px 10px;
    flex-shrink: 0;
  }
  .cd-num{ font-size: 1.5rem; }
  .cd-dos{ font-size: 1.4rem; padding-bottom: 6px; }
}
@media (max-width: 400px){
  .cd-box{ min-width: 60px; padding: 10px 8px; }
  .cd-num{ font-size: 1.25rem; }
}

/* ── 4) TABLA DE HISTÓRICO / RESULTADOS RECIENTES — TARJETAS EN MÓVIL ──────
   En vez de forzar scroll horizontal (difícil de usar en celular), cada
   fila se convierte en una tarjeta vertical con etiquetas (data-label). ── */
@media (max-width: 767px){
  .hist-table thead{ display: none; }
  .hist-table, .hist-table tbody, .hist-table tr, .hist-table td{
    display: block;
    width: 100%;
  }
  .hist-table{ border-radius: 0; }
  .hist-table tr{
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .hist-table td{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: none !important;
  }
  .hist-table td::before{
    content: attr(data-label);
    font-family: 'Montserrat', sans-serif;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft, var(--gris));
    flex-shrink: 0;
  }
  .hist-table td .bm-row{
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    gap: 5px;
  }
  .hist-table td .bm{
    width: 30px !important;
    height: 30px !important;
    font-size: .68rem !important;
  }
  .hist-table td[data-label="Ganadores"]{
    align-items: flex-start !important;
  }
  .hist-table td[data-label="Acumulado"]{
    flex-wrap: wrap;
  }
}

/* ── 5) SORTEO GANADOR — COLORES ALEGRES Y DE SUERTE ────────────────────── */
.res-card-ganador{
  position: relative;
  background: linear-gradient(135deg, #7B2FF7 0%, #FF2E9A 42%, #FFC400 74%, #00E0FF 100%) !important;
  background-size: 260% 260%;
  animation: ganador-bg-move 10s ease infinite;
  border: none !important;
  box-shadow: 0 10px 40px rgba(123,47,247,.35) !important;
  overflow: hidden;
}
.res-card-ganador::before{
  /* la barra superior animada ya no hace falta: toda la tarjeta es de color */
  display: none !important;
}
.res-card-ganador .res-card-glow{
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%) !important;
}
.res-card-ganador::after{
  content: '🎉';
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 2rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  animation: ganador-bounce 2.4s ease-in-out infinite;
  pointer-events: none;
}
.res-card-ganador .celebracion-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.45);
  padding: 7px 18px;
  border-radius: 100px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}
.res-card-ganador .badge-sorteo{
  background: rgba(255,255,255,.25) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
}
.res-card-ganador .badge-fecha,
.res-card-ganador .nums-label,
.res-card-ganador .bsep-text,
.res-card-ganador .rf-label{
  color: rgba(255,255,255,.9) !important;
}
.res-card-ganador .rf-valor{
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.3) !important;
}
.res-card-ganador .res-footer{
  border-top-color: rgba(255,255,255,.35) !important;
}
.res-card-ganador .btn-outline{
  border-color: rgba(255,255,255,.7) !important;
  color: #fff !important;
}
.res-card-ganador .btn-outline:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: #fff !important;
  color: #fff !important;
}
@keyframes ganador-bg-move{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
@keyframes ganador-bounce{
  0%,100%{ transform: translateY(0) rotate(-8deg); }
  50%{ transform: translateY(-6px) rotate(8deg); }
}
@media (max-width: 480px){
  .res-card-ganador::after{ font-size: 1.5rem; top: 14px; right: 16px; }
  .res-card-ganador .celebracion-tag{ font-size: .64rem; padding: 6px 14px; }
}

/* ── 6) SORTEO GANADOR — ENTRADA ANIMADA DE LAS BALOTAS + CONFETI ───────── */
.res-card-ganador .celebracion-tag{
  animation: tag-pulso 1.8s ease-in-out infinite;
}
@keyframes tag-pulso{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  50%{ box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
.res-card-ganador .balota-wrap{
  animation: balota-pop .55s cubic-bezier(.34,1.56,.64,1) both;
}
.res-card-ganador .balota-wrap:nth-child(1){ animation-delay: .05s; }
.res-card-ganador .balota-wrap:nth-child(2){ animation-delay: .15s; }
.res-card-ganador .balota-wrap:nth-child(3){ animation-delay: .25s; }
.res-card-ganador .balota-wrap:nth-child(4){ animation-delay: .35s; }
.res-card-ganador .balota-wrap:nth-child(5){ animation-delay: .45s; }
.res-card-ganador .balota-wrap:last-child{ animation-delay: .6s; }
@keyframes balota-pop{
  0%{ transform: scale(0) rotate(-30deg); opacity: 0; }
  70%{ transform: scale(1.15) rotate(6deg); opacity: 1; }
  100%{ transform: scale(1) rotate(0); opacity: 1; }
}
.res-card-ganador .balota{
  animation: balota-glow 2.2s ease-in-out infinite;
}
@keyframes balota-glow{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%{ filter: drop-shadow(0 0 10px rgba(255,255,255,.55)); }
}
/* Confeti sutil flotando sobre la tarjeta */
.res-card-ganador::before{
  content:'🎊 🎈 ✨ 🎉 🍀 ⭐';
  display: block !important;
  position: absolute;
  inset: 0;
  font-size: 1.1rem;
  letter-spacing: 3vw;
  line-height: 3.4em;
  opacity: .16;
  animation: confeti-caer 14s linear infinite;
  pointer-events: none;
  overflow: hidden;
  white-space: pre-wrap;
}
@keyframes confeti-caer{
  0%{ transform: translateY(-8%); }
  100%{ transform: translateY(8%); }
}
@media (prefers-reduced-motion: reduce){
  .res-card-ganador .balota-wrap,
  .res-card-ganador .balota,
  .res-card-ganador .celebracion-tag,
  .res-card-ganador::before,
  .res-card-ganador::after{ animation: none !important; }
}

/* ── 5b) SORTEO GANADOR — LAYOUT DISTRIBUIDO CON IMAGEN + PREMIO MAYOR ──── */
.res-ganador-layout{
  display: flex;
  align-items: center;
  gap: 36px;
}
.res-ganador-info{
  flex: 1 1 auto;
  min-width: 0;
}
.res-ganador-img{
  flex: 0 0 190px;
  text-align: center;
}
.res-ganador-img img{
  width: 100%;
  max-width: 190px;
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.3));
  animation: ganador-img-float 3.2s ease-in-out infinite;
}
@keyframes ganador-img-float{
  0%,100%{ transform: translateY(0) rotate(-1.5deg); }
  50%{ transform: translateY(-10px) rotate(1.5deg); }
}
@media (max-width: 860px){
  .res-ganador-layout{ flex-direction: column-reverse; text-align: center; }
  .res-ganador-img{ flex: 0 0 auto; width: 150px; margin: 0 auto 6px; }
}

/* Banner "¡Cayó el Premio Mayor!" — solo aparece cuando gano_acumulado=1 */
.premio-mayor-banner{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.6);
  padding: 10px 20px;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: .85rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  margin: 2px 0 20px;
  animation: tag-pulso 1.8s ease-in-out infinite;
}
.premio-mayor-banner .pm-emoji{
  font-size: 1.2rem;
  animation: ganador-bounce 1.6s ease-in-out infinite;
}

/* Etiqueta "Premio Mayor" junto al valor del acumulado */
.rf-tag-mayor{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 11px;
  border-radius: 100px;
  background: rgba(255,255,255,.28);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ── 7) LISTA DE GANADORES Y TARJETAS DE PREMIO — 1 columna en móvil ────── */
@media (max-width: 575px){
  .ganadores-grid{ grid-template-columns: 1fr !important; }
  .ganador-card{ padding: 16px !important; }
  .premios-grid{ grid-template-columns: 1fr !important; gap: 12px !important; }
}
@media (max-width: 767px) and (min-width: 576px){
  .premios-grid{ grid-template-columns: repeat(3,1fr) !important; gap: 10px !important; }
  .premio-nivel-card{ padding: 16px 10px !important; }
  .premio-nivel-card .pn-premio{ font-size: 1rem !important; }
}

/* ── 8) CONTADOR (DÍAS:HORAS:MIN:SEG) — SIEMPRE COMPLETO, A LO ANCHO DE LA
        PANTALLA, SIN CORTES NI SALTO DE LÍNEA (index / resultados) ────────── */
@media (max-width: 600px){
  .cd-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: clamp(3px, 1.4vw, 8px) !important;
  }
  .cd-box{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: clamp(8px, 3vw, 14px) clamp(3px, 1.5vw, 10px) !important;
    text-align: center;
  }
  .cd-num{
    font-size: clamp(1.05rem, 6.2vw, 1.9rem) !important;
  }
  .cd-lbl{
    font-size: clamp(.46rem, 1.9vw, .58rem) !important;
    letter-spacing: .5px !important;
    white-space: nowrap;
  }
  .cd-dos{
    flex: 0 0 auto !important;
    font-size: clamp(.95rem, 5vw, 1.8rem) !important;
    padding-bottom: 0 !important;
  }
}
@media (max-width: 360px){
  .cd-box{ padding: 7px 2px !important; }
  .cd-num{ font-size: 1rem !important; }
}