@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-VariableFont_opsz,wght.ttf");
}

* {
  transition: background 500ms ease-in-out;
}

.button-whatsapp {
  background-color: #25d366;

  border: 1px solid #25d366;
}

button,
.button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 360px;
  gap: 8px;
  font-weight: 500;
}

.button-small {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 16px;
}

.icon-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 200px;
  gap: 8px;
  width: 35px;
  height: 35px;
  font-weight: 500;
}

.heading-large-extrabold {
  font-family: "Inter";
  font-size: 40px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -2%;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.progress-contain {
  width: 100%;
  height: 24px;
  position: relative;
}

.progress-percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  z-index: 2;
  width: 100%;
  text-align: center;
  margin-left: 0;
}

.progress-total {
  width: 100%;
  height: 24px;
  background-color: #cccccc2e;
  border: 2px solid #fff;
  border-radius: 8px;
  position: absolute;
}

.body-medium-regular {
  font-family: "Inter";
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.button-large {
  padding: 14px 24px;
  font-size: 16px;
  line-height: 20px;
}

.label-overline-small {
  font-family: "Inter";
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 4px;
  text-decoration: none;
  text-transform: uppercase;
  font-style: normal;
}

dialog::backdrop {
  background-color: #000b;
}

.title-large-medium {
  font-family: "Inter";
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.25px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.body-large-regular {
  font-family: "Inter";
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.button-medium {
  padding: 10px 20px;
  font-size: 14px;
  line-height: 20px;
}

.input {
  background: transparent;
  outline: none;
  font-size: 16px;
  padding: 16px;
  border-color: #ffffff61;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
  color: #ffffff;
}

.heading-small-bold {
  font-family: "Inter";
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.label-small-regular {
  font-family: "Inter";
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.rainbow-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  position: relative;
  padding: 3px;
  border-radius: 9999px;
  overflow: hidden;
}

.rainbow-button {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
}

.rainbow-background {
  width: 100vw;
  aspect-ratio: 1;
  background: conic-gradient(from 180deg at 50% 50%,
      #ffd600 0deg,
      #f36fff 53.30034255981445deg,
      #268aff 90.45685529708862deg,
      #52eaea 126.23775959014893deg,
      #ffd600 178.8213300704956deg),
    #d9d9d9;
  animation: gira 1s infinite linear;
  border-radius: 2000px;
}

.input-full {
  outline: none;
  font-size: 18px;
  font-weight: 600;
  padding: 12px;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
}

.svg-inline--fa {
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

.heading-xsmall-medium {
  font-family: "Inter";
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

button.price-button,
button.price-button-popular {
  font-family: "Inter";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  line-height: 40px;
  padding: 12px 8px;
  min-height: 88px;
  min-width: 88px;
  border-radius: 12px;
}

button.price-button-pressed,
button.price-button-popular-pressed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  line-height: 40px;
  padding: 12px 8px;
  min-height: 88px;
  min-width: 88px;
  border-width: 2px;
  border-radius: 12px;
}

.label-small-medium {
  font-family: "Inter";
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

@keyframes gira {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.numbers-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2rem;
}

.get-number {
  display: none;
}

.page-link {
  color: #fff;

  text-align: center;
  border: 1px #ffff solid;
  padding: 0.375rem 0.75rem;
}

.page-link:focus {
  color: #2c2c2c;
}

.tabla-scroll {
  max-height: 400px;
  /* Ajusta esta altura según tus necesidades */
  overflow-y: auto;
}

.n.hidden {
  display: none;
}

.page-link:hover {
  color: #2c2c2c;
}

.n {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 40px;
  background-color: #f6f6f6;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 10px;
  margin-bottom: 5px;
}

.n p {
  color: #ffff;
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 0px;
}

.cuerpo {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.n {
  font-size: 12px;
  font-weight: 600;
  background-color: #f6f6f6;
}

.n:hover {
  background-color: #f6f6f6;
}

.n.activa {
  background-color: #2c2c2c;
  color: white;
}

.n.desactivada {
  background-color: #7a1717;
  cursor: not-allowed;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

#items {
  display: flex;
}

.page-item button {
  color: #000;
  background-color: #f6f6f6;
  list-style: none;
  text-decoration: none;
}

.row-numbers {
  display: flex;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.blue {
  background: #2c2c2c !important;
  color: #fff !important;
}

.bigText {
  display: block;
  font-weight: 900;
  font-size: xx-large;
  color: #202020;
  text-align: center;
  margin: 16px 0;
}

.numbers {
  display: flex;
  align-items: center;
}

.active>.page-link,
.page-link.active {
  background-color: #3454e2b3;
  border-color: #3454e2b3;
  color: #fff;
}

.box-select {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.n-select {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 12px;
  width: 56px;
  padding: 0 0.5rem;
  height: 32px;
  background-color: #2c2c2c;
  color: white;
  font-weight: 600;
  border-radius: 0.25rem;
}

.n-select i {
  position: absolute;
  top: -5px;
  right: 0;
  background-color: #fff;
}

@media only screen and (max-width: 1080px) {
  .page-item {
    display: flex;
    align-items: center;
  }

  #items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.special-number {
  background-color: #e7f3fe;
  margin: 10px 0;
  padding: 10px;
  border-radius: 4px;
  border-left: 3px solid #2196f3;
}

.n.activa {
  background-color: #4caf50;
  color: white;
}

.n-select {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 12px;
  width: 56px;
  padding: 0 0.5rem;
  height: 32px;
  background-color: #2c2c2c;
  color: white;
  font-weight: 600;
  border-radius: 0.25rem;
}

.n-select i {
  position: absolute;
  top: -5px;
  right: 0;
  background-color: #fff;
}

.n-select {
  padding: 6px 12px;
  margin: 2px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
}

.n-select-signos {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 14px;
  width: 106px;
  padding: 0 0.5rem;
  height: 72px;
  background-color: #2c2c2c;
  color: white;
  font-weight: 600;
  border-radius: 0.25rem;
}

.n-select-signos i {
  position: absolute;
  top: -5px;
  right: 0;
  background-color: #fff;
}

.n-select-signos {
  padding: 6px 12px;
  margin: 2px;
  border-radius: 4px;
  position: relative;
}

.heading-small-medium {
  font-family: "Inter";
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;

  @media (min-width: 767px) {
    font-size: 24px;
    line-height: 32px;
  }
}

.body-small-medium {
  font-family: "Inter";
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.label-medium-regular {
  font-family: "Inter";
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.1px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.metodo-selected {
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
}

.label-small-semibold {
  font-family: "Inter";
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.label-xsmall-regular {
  font-family: "Inter";
  font-size: 10px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

@media (min-width: 1024px) {
  .lg\:body-medium-semibold {
    font-family: "Inter";
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: 0px;
    text-decoration: none;
    text-transform: none;
    font-style: normal;
  }
}

input[type="checkbox"].input:checked,
input[type="radio"].input:checked {
  width: 20px;
  height: 20px;
  background-color: transparent;
  border-width: 2px;
  padding: 0px;
  background-image: none;
  outline: none;
  position: relative;
}

input[type="radio"].input:checked::after {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"].input,
input[type="radio"].input {
  width: 20px;
  height: 20px;
  background-color: transparent;
  border-width: 2px;
  padding: 0px;
  background-image: none;
  outline: none;
}

.metodo-box {
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  background-color: transparent;
}

div#containerSearch {
  display: flex;
  align-items: center;
  border-radius: 25px;
}

div#containerSearch i {
  display: inline;
  font-size: 20px;
}

button.magic_button,
button.download-button {
  padding: 6px 11px !important;
  border: 0;
  font-size: 18px;
  border-radius: 25px;
  margin: 1px 1px;
  cursor: pointer;
}

input#inputSearchTicket {
  border-radius: 25px;
  padding: 6px 11px !important;
  margin: -1px 0 2px 0;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  box-shadow: none;
  width: 90px;
}

.label-medium-medium {
  font-family: "Inter";
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.body-small-regular {
  font-family: "Inter";
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
}

.copyInput {
  position: absolute;
  right: 16px;
  height: 54px;
  margin: auto 0px;
  top: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.premiado {
  animation: pulse-premio 2s infinite;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

@keyframes pulse-premio {
  0% {
    box-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
  }

  50% {
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.8);
  }

  100% {
    box-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
  }
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.lds-ring {
  z-index: 500000;
  position: fixed;
  width: 100%;
  margin: auto;
  height: 100%;
  background: steelblue;
  opacity: 50%;
  align-items: center;
  display: flex;
  text-align: center;
}

.lds-ring div {
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: auto;
  left: 50%;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

.disabled-button {
  cursor: not-allowed !important;
  background-color: #cccccc !important;
  border-color: #999999 !important;
  color: #666666 !important;
}

.max-reached {
  border-color: #ff4444 !important;
  background-color: #ffe6e6 !important;
}

/* Estilos para la etiqueta de Publicidad */
.sponsor-label {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  z-index: 10;
  pointer-events: none;
}

/* Contenedores que tienen contenido visual */
.sponsor-image-container,
.sponsor-video-container,
.sponsor-carousel,
.carousel-item,
.sponsor-banner-carousel,
.sponsor-text-only {
  position: relative;
}

/* Ajustes específicos para diferentes tipos de contenido */
.sponsor-carousel .sponsor-label,
.sponsor-banner-carousel .sponsor-label {
  top: 10px;
  right: 10px;
}

.carousel-item .sponsor-label {
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.8);
  padding: 3px 8px;
  font-size: 0.7rem;
}

.sponsor-text-only .sponsor-label {
  top: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.6);
}

/* =====================================================
   ESTILOS ESTILO GANACONIVAN.COM — tu-rifa.com Premium
   ===================================================== */

/* ── FUENTE ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

* {
  font-family: 'Inter', 'Poppins', sans-serif;
}

/* ── NAVBAR sticky + glassmorphism ── */
#navbar {
  position: sticky !important;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.3s ease !important;
}

/* ── CARDS de rifas finalizadas (grid 2-3 col) ── */
section.grid a {
  display: block;
  text-decoration: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  border-radius: 16px !important;
}

section.grid a:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

section.grid a>div {
  border-radius: 16px !important;
  overflow: hidden;
}

section.grid img {
  transition: transform 0.5s ease !important;
}

section.grid a:hover img {
  transform: scale(1.06) !important;
}

/* Overlay gradient mejorado para cards */
section.grid .absolute.inset-0.bg-gradient-to-b {
  background: linear-gradient(to bottom,
      transparent 30%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(0, 0, 0, 0.92) 100%) !important;
}

/* Badge de estado en cards */
section.grid .absolute.inset-0 .label-small-regular {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 4px;
}

/* ── SECCIÓN "Últimos sorteos" heading ── */
section.grid .text-left label {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

section.grid .text-left label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, currentColor, transparent);
  border-radius: 2px;
  opacity: 0.6;
}

/* ── RIFA VERTICAL (múltiples rifas activas) ── */
.rifas-vertical-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rifa-vertical-item {
  animation: fadeSlideUp 0.5s ease both;
}

.rifa-vertical-item:nth-child(2) {
  animation-delay: 0.1s;
}

.rifa-vertical-item:nth-child(3) {
  animation-delay: 0.2s;
}

/* ── Imagen principal de rifa ── */
.rifa-vertical-item img.rounded-3xl {
  transition: transform 0.4s ease !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.rifa-vertical-item:hover img.rounded-3xl {
  transform: scale(1.01) !important;
}

/* ── BARRA DE PROGRESO mejorada ── */
.progress-contain {
  border-radius: 50px;
  overflow: hidden;
  height: 22px !important;
  position: relative;
}

.progress-total {
  border-radius: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  height: 22px !important;
}

.progress-actual {
  border-radius: 50px !important;
  border-right: none !important;
  height: 20px !important;
  top: 1px !important;
}

.progress-percent {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* ── BOTONES de cantidad de boletos ── */
button.price-button,
button.price-button-popular {
  border-radius: 14px !important;
  transition: all 0.2s ease !important;
  font-size: 28px !important;
  min-height: 80px !important;
  min-width: 80px !important;
  position: relative;
  overflow: hidden;
}

button.price-button::after,
button.price-button-popular::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}

button.price-button:hover,
button.price-button-popular:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ── BOTÓN PRINCIPAL de compra ── */
.button-primary-brand {
  border-radius: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.25s ease !important;
  position: relative;
  overflow: hidden;
}

.button-primary-brand::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.15),
      transparent);
  transition: left 0.5s ease;
}

.button-primary-brand:hover::after {
  left: 100%;
}

.button-primary-brand:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ── ANIMACIONES ── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── MODAL mejorado ── */
dialog {
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── SECCIÓN info (fecha/precio) ── */
.radius-rounded {
  border-radius: 14px !important;
}

/* ── SECCIÓN de números — grid compacto ── */
.n {
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  font-weight: 700 !important;
}

.n:hover:not(.desactivada) {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.n.activa {
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4) !important;
}

/* ── FOOTER mejorado ── */
footer .label-overline-small {
  letter-spacing: 3px;
}

/* ── LOADER ── */
#Loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  display: none;
  /* Oculto por defecto */
  flex-direction: row;
  gap: 8px;
}

#Loader.lds-ring {
  display: flex !important;
}

#Loader div {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  animation: loaderDot 0.8s infinite alternate;
}

#Loader div:nth-child(2) {
  animation-delay: 0.1s;
}

#Loader div:nth-child(3) {
  animation-delay: 0.2s;
}

#Loader div:nth-child(4) {
  animation-delay: 0.3s;
}

@keyframes loaderDot {
  from {
    transform: scale(0.6);
    opacity: 0.4;
  }

  to {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  section.grid a:hover {
    transform: translateY(-3px) !important;
  }

  button.price-button,
  button.price-button-popular {
    font-size: 22px !important;
    min-height: 64px !important;
    min-width: 64px !important;
  }
}