/* HappyPlayTV UI v5.1 fixes */
body .ai-launcher,body .hp-wheel-launcher,body .whatsapp-floating{right:12px!important;display:grid!important;place-items:center!important;overflow:hidden!important;background-color:#090e27!important;background-position:center center!important;background-repeat:no-repeat!important;background-size:contain!important}
body .ai-launcher{bottom:171px!important}
body .hp-wheel-launcher{bottom:94px!important}
body .whatsapp-floating{bottom:17px!important;background-image:url('../img/hp-premium-v5/wa-float.webp')!important}
body .whatsapp-floating::before{display:none!important}
body .hp-wheel-launcher::before{display:none!important}
body .hp-wheel-launcher{background-image:url('../img/hp-premium-v5/wheel-float.webp')!important}
body .ai-launcher .ai-icon{background-image:url('../img/hp-premium-v5/bot-float.webp')!important}
body .ai-launcher .ai-icon, body .whatsapp-floating .hp-wa-icon{width:100%!important;height:100%!important}
.hp-wheel-promo-toast{position:fixed;right:84px;bottom:104px;z-index:1202;background:rgba(10,17,40,.98);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 13px;box-shadow:0 16px 40px rgba(0,0,0,.35);font-size:.88rem;line-height:1.25;max-width:180px;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.hp-wheel-promo-toast.show{opacity:1;transform:none}
.hp-wheel-promo-toast strong{display:block;color:#ffdd7a;font-size:.83rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:2px}
#hp-wheel-root .hp-wheel-dialog{background:radial-gradient(circle at 50% 0%,#1a2e71,#0c1333 48%,#070a1b 92%);border:1px solid #768effc2;border-radius:28px;box-shadow:0 28px 95px #02051cc9,0 0 40px rgba(96,78,255,.34)}
#hp-wheel-root .hp-wheel-before h2{font-size:clamp(1.65rem,5vw,2.2rem);font-weight:900}
#hp-wheel-root .hp-wheel-before p{color:#cfdbff}
#hp-wheel-root .hp-wheel-disc{border:10px solid #ffd773;box-shadow:0 0 0 5px #563bd2,0 0 30px rgba(121,65,255,.58),inset 0 0 12px rgba(255,255,255,.55)}
#hp-wheel-root .hp-wheel-disc-center{background:radial-gradient(circle,#1f2f8a 0%,#090f2d 100%);border:2px solid rgba(255,255,255,.25)}
#hp-wheel-root .hp-wheel-spin{background:linear-gradient(104deg,#ff40ba,#7d39ff 50%,#2d7dff);border:1px solid #c39cff;box-shadow:0 10px 24px rgba(115,45,237,.42);font-weight:800}
#hp-wheel-root .hp-wheel-after .hp-wheel-after-title{font-size:clamp(1.8rem,6vw,2.3rem);font-weight:900}
#hp-wheel-root .hp-wheel-after .hp-wheel-ticket{background:linear-gradient(120deg,#fff1bf,#f6be57 65%,#ffd56b);border:2px solid #fff6db;box-shadow:0 10px 34px rgba(246,173,67,.28)}
#hp-wheel-root .hp-wheel-after .hp-wheel-code-line{border-radius:14px;background:#101b3b;border:1px dashed #8593f1;padding:12px}
#hp-wheel-root .hp-wheel-after .hp-wheel-whatsapp{background:linear-gradient(105deg,#07bf61,#029d4f);border:1px solid #23de8c;border-radius:12px}
.bonus-card img{width:130px!important;height:130px!important;object-fit:contain!important;display:block;margin-inline:auto!important;filter:none!important}
.bonus-card{display:flex;align-items:center;gap:26px}
@media(max-width:720px){.bonus-card{flex-direction:column;align-items:center;text-align:center}.bonus-card img{margin:0 auto 8px!important}.hp-wheel-promo-toast{right:78px;bottom:97px;max-width:150px;font-size:.8rem}body .ai-launcher{bottom:159px!important}body .hp-wheel-launcher{bottom:88px!important}body .whatsapp-floating{bottom:17px!important}}

/* V5.2: centra contador y estadísticas sin romper la cuadrícula de escritorio */
@media(max-width:720px){
 .hero .hero-copy .studio-hero-countdown{width:min(100%,440px)!important;max-width:none!important;margin:26px auto 22px!important;display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;text-align:center!important;gap:5px;padding:20px 16px!important;box-sizing:border-box;border-radius:22px!important;background:linear-gradient(135deg,rgba(35,25,68,.94),rgba(14,23,54,.95))!important;border:1px solid rgba(251,194,90,.56)!important;box-shadow:0 12px 34px rgba(0,0,0,.18),0 0 20px rgba(236,172,70,.08)}
 .hero .hero-copy .studio-hero-countdown small{display:block;color:#dce5f8;font-size:clamp(1rem,4.3vw,1.25rem)!important;line-height:1.4;text-align:center}
 .hero .hero-copy .studio-hero-countdown .studio-season-countdown{display:block;font-size:clamp(1.46rem,6.3vw,2.05rem)!important;line-height:1.22!important;letter-spacing:-.025em;color:#ffce65;text-align:center;font-variant-numeric:tabular-nums;white-space:normal}
 .hero .hero-stats{display:grid!important;grid-template-columns:1fr!important;justify-items:stretch!important;gap:12px!important;margin:16px auto 24px!important;width:100%;max-width:440px!important}
 .hero .hero-stats>div{min-width:0!important;width:100%!important;box-sizing:border-box!important;text-align:center!important;align-items:center!important;justify-content:center!important;padding:17px 15px!important;display:flex!important;flex-direction:column!important;gap:4px}
 .hero .hero-stats>div strong{font-size:clamp(1.5rem,6vw,2rem)!important;line-height:1.17}
 .hero .hero-stats>div span{font-size:1rem!important}
 .hero .hero-copy .actions{justify-content:center!important}
}
/* Restablece el fondo correcto cuando otros CSS anulan el icono */
body .whatsapp-floating{background-color:#08132c!important;background-image:url('../img/hp-premium-v5/wa-float.webp')!important;background-repeat:no-repeat!important;background-position:center!important;background-size:100% 100%!important}
body .ai-chat .ai-avatar.assistant,body .ai-chat-head .ai-icon{background-image:url('../img/hp-premium-v5/bot-float.webp')!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important}
body .ai-chat .ai-avatar.user{background-image:none!important;background-color:#293c6a!important;position:relative}
body .ai-chat .ai-avatar.user:after{content:' ';position:absolute;inset:21%;background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
body .ai-chat .ai-row{display:flex;align-items:flex-end;gap:9px;width:100%}
body .ai-chat .ai-row.user{justify-content:flex-end}
body .ai-chat .ai-row .ai-msg{max-width:min(82%,520px);min-width:0;flex:0 1 auto}
body .ai-chat .ai-row .ai-avatar{display:block!important;flex:0 0 36px!important;width:36px!important;height:36px!important}
body .ai-chat .ai-chat-head{min-height:0!important}
body .ai-chat .ai-chat-messages{align-content:start!important}
@media(max-width:700px){body .ai-chat .ai-row .ai-avatar{flex-basis:32px!important;width:32px!important;height:32px!important}}
.hp-prompt-bubble{position:fixed;right:86px;bottom:164px;z-index:1202;width:min(230px,calc(100vw - 120px));background:linear-gradient(135deg,#121d3c,#0b1430);border:1px solid rgba(116,149,255,.58);border-radius:17px;padding:13px 17px;color:#fff;box-shadow:0 14px 40px #0009;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(9px);transition:opacity .25s,transform .25s;pointer-events:none}
.hp-prompt-bubble.show{opacity:1;transform:translateY(0);pointer-events:auto}
.hp-prompt-bubble .hp-prompt-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:center/contain no-repeat url('../img/hp-premium-v5/bot-float.webp')}
.hp-prompt-bubble.wheel .hp-prompt-avatar{background-image:url('../img/hp-premium-v5/wheel-float.webp')}
.hp-prompt-bubble strong{font-size:.89rem;display:block;line-height:1.25}
.hp-prompt-bubble span{font-size:.75rem;display:block;color:#bfd1ef;margin-top:3px;line-height:1.35}
.hp-prompt-bubble button{position:absolute;right:5px;top:2px;background:none;border:0;color:#c9d5ec;font-size:18px;cursor:pointer}
@media(max-width:700px){.hp-prompt-bubble{right:78px;bottom:159px;padding:10px 13px}.hp-prompt-bubble.wheel{bottom:88px}}
@media(prefers-reduced-motion:reduce){.hp-prompt-bubble{transition:none}}


/* HappyPlayTV mini-ajuste: WhatsApp visible y leve alineacion movil. */
/* Se dibuja el logo dentro del boton existente: conserva el href original de WhatsApp. */
body a.whatsapp-floating {
    isolation: isolate;
    position: fixed !important;
    overflow: visible !important;
}
body a.whatsapp-floating::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M20.52%203.48A11.87%2011.87%200%200%200%2012.05%200C5.43%200%20.04%205.38.04%2012c0%202.11.55%204.17%201.6%205.99L0%2024l6.16-1.62A12%2012%200%200%200%2012.04%2024C18.66%2024%2024.04%2018.62%2024.04%2012c0-3.2-1.24-6.21-3.52-8.52ZM12.04%2021.9c-1.78%200-3.53-.48-5.07-1.39l-.36-.21-3.66.96.98-3.57-.24-.37a9.85%209.85%200%200%201-1.51-5.32c0-5.44%204.43-9.87%209.87-9.87a9.81%209.81%200%200%201%206.98%202.9%209.81%209.81%200%200%201%202.89%206.98c0%205.44-4.43%209.89-9.88%209.89Zm5.42-7.4c-.3-.15-1.75-.87-2.02-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94%201.17-.17.2-.35.22-.65.07-.3-.15-1.25-.46-2.38-1.47-.88-.79-1.47-1.76-1.64-2.06-.17-.3-.02-.46.13-.61.14-.13.3-.35.44-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2%200-.52.08-.79.37-.27.3-1.04%201.02-1.04%202.49%200%201.47%201.07%202.89%201.22%203.09.15.2%202.1%203.2%205.09%204.49.71.31%201.26.49%201.69.63.71.23%201.36.2%201.87.12.57-.09%201.75-.72%201.99-1.41.25-.7.25-1.3.17-1.42-.08-.13-.27-.2-.57-.35Z%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(circle at 30% 20%, #22e9a0, #09a962 53%, #087044 95%) !important;
    background-position: center, center !important;
    background-size: 58% 58%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    box-shadow: inset 0 0 0 1.5px rgba(135,255,213,.85), 0 0 12px rgba(0,218,131,.24) !important;
}
/* Solo telefonos: pequenos ajustes en dos zonas concretas. */
@media (max-width: 720px) {
  /* OXXO: descripcion al lado del icono, debajo del nombre. No afecta otras tarjetas. */
  #pagos .payment-icon-grid .payment-method-card.payment-method-oxxo {
      display: grid !important;
      grid-template-columns: 76px minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      align-content: center !important;
      column-gap: 12px !important;
      row-gap: 3px !important;
      text-align: left !important;
  }
  #pagos .payment-icon-grid .payment-method-card.payment-method-oxxo > img {
      grid-column: 1 !important;
      grid-row: 1 / 3 !important;
      width: 76px !important;
      height: 76px !important;
      margin: 0 !important;
      object-fit: contain !important;
  }
  #pagos .payment-icon-grid .payment-method-card.payment-method-oxxo > h3 {
      grid-column: 2 !important;
      grid-row: 1 !important;
      align-self: end !important;
      margin: 0 !important;
      text-align: left !important;
  }
  #pagos .payment-icon-grid .payment-method-card.payment-method-oxxo > p {
      grid-column: 2 !important;
      grid-row: 2 !important;
      align-self: start !important;
      text-align: left !important;
      margin: 0 !important;
  }
  /* Downloader: centrar SOLO encabezado, etiqueta, codigo y nota corta. */
  #instalacion .download-variant-card .download-variant-head {
      justify-content: center !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
      margin-bottom: 12px !important;
  }
  #instalacion .download-variant-card .download-variant-head h3 {
      flex-basis: 100% !important;
      text-align: center !important;
  }
  #instalacion .download-variant-card .download-badge {
      margin-inline: auto !important;
      text-align: center !important;
  }
  #instalacion .download-variant-card .download-variant-code {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      gap: 5px !important;
  }
  #instalacion .download-variant-card .download-variant-code > span,
  #instalacion .download-variant-card .download-variant-code > strong {
      text-align: center !important;
  }
  #instalacion .download-variant-card > p:not(.copy-status) {
      text-align: center !important;
  }
  /* Parrafos extensos de caracteristicas: mantener alineacion a la izquierda. */
  #instalacion .download-variant-info,
  #instalacion .download-variant-info p,
  #instalacion .download-variant-info .download-variant-inline {
      text-align: left !important;
  }
}