/* =========================================
   ESTILOS GENERALES Y VARIABLES
   ========================================= */
.iat-tpl--evento-especial-v2 {
  --bg-color-top: #510066;
  --bg-color-bottom: #1f012a;
  --card-bg-start: #1f012a;
  --card-bg-end: #1f012a;
  --card-border: #3b0a54;
  --accent-magenta: #a124db;
  --accent-magenta-light: #d355ff;
  --accent-cyan: #00f2fe;
  --text-main: #ffffff;
  --text-subtitle: #DC84FF;
  --text-muted: #8a8a8a;
  --text-car-aux: #a584c3;
  --green-status: #00ff88;
  --red-status: #ff4444;
  --border-radius-card: 12px;
  /* Lo que se aclara un apartado de la barra del teléfono mientras está abierto,
     y el tamaño y el color del punto que marca al que tiene algo puesto. Los tres
     son los mismos que en la barra del listado de coches, que es la misma
     barra. */
  --abierto: rgba(255, 255, 255, 0.2);
  --punto: 6px;
  --punto-color: #FE7112;
}

.iat-tpl--evento-especial-v2, .iat-tpl--evento-especial-v2 *, .iat-tpl--evento-especial-v2::before, .iat-tpl--evento-especial-v2 *::before, .iat-tpl--evento-especial-v2::after, .iat-tpl--evento-especial-v2 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* La tipografía la pone el tema. Los controles de formulario no la heredan por
   sí solos, así que se les pide de forma explícita. */
.iat-tpl--evento-especial-v2 button,
.iat-tpl--evento-especial-v2 input,
.iat-tpl--evento-especial-v2 select,
.iat-tpl--evento-especial-v2 textarea {
  font-family: inherit;
}

/* Lo que en el HTML original iba en `body`. Al vivir la plantilla dentro del
   tema, estas reglas se aplican al contenedor propio: `line-height` y
   `text-align` se declaran de forma explícita para no heredar los del tema, y
   el centrado lo hace `.iat-container` con márgenes automáticos — un
   `display: flex` aquí convertiría en ítems de la misma fila a todo lo que
   otros plugins inyecten dentro. */
.iat-tpl--evento-especial-v2 {
  color: var(--text-main);
  line-height: normal;
  text-align: left;
}

.iat-tpl--evento-especial-v2 .iat-container {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  min-width: 0;
}

.iat-tpl--evento-especial-v2 header {
  margin-bottom: 2.5rem;
}

.iat-tpl--evento-especial-v2 .subtitle {
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: var(--text-subtitle);
  font-weight: 600;
  text-transform: uppercase;
}

.iat-tpl--evento-especial-v2 header h1 {
  font-size: 2.8rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0.3rem 0;
  letter-spacing: -1px;
  color: #FFFFFF;
}

.iat-tpl--evento-especial-v2 .dates {
  font-size: 1rem;
  color: #FFFFFF;
  font-weight: 400;
}

/* =========================================
   MENÚ PRINCIPAL Y DROPDOWNS
   ========================================= */
.iat-tpl--evento-especial-v2 .menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-bottom: 3.5rem;
  align-items: stretch;
}

.iat-tpl--evento-especial-v2 .menu-column {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* El `display` de arriba le gana al que pone `[hidden]`, que viene de la hoja
   del navegador y no lleva `!important`: sin esto, un apartado escondido por el
   script —el de los pases, cuando el evento no reparte ninguno— seguiría a la
   vista. */
.iat-tpl--evento-especial-v2 .menu-column[hidden] {
  display: none;
}

.iat-tpl--evento-especial-v2 .header-card {
  background: rgba(18, 0, 32, 0.85);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-card);
  padding: 1.1rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  backdrop-filter: blur(5px);
  user-select: none;
  transition: background 0.2s ease;
  height: 84px;
  box-sizing: border-box;
}

.iat-tpl--evento-especial-v2 .header-card:hover {
  background: rgba(30, 0, 50, 0.95);
}

.iat-tpl--evento-especial-v2 .header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
}

.iat-tpl--evento-especial-v2 .header-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.iat-tpl--evento-especial-v2 .header-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.iat-tpl--evento-especial-v2 .header-title {
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iat-tpl--evento-especial-v2 .header-status {
  font-size: 0.85rem;
  color: var(--text-subtitle);
}

.iat-tpl--evento-especial-v2 .header-arrow {
  width: 12px;
  height: 12px;
  object-fit: contain;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.iat-tpl--evento-especial-v2 .menu-column.open .header-arrow {
  transform: rotate(180deg);
}

/* El galón apunta hacia donde el desplegable va a crecer, y arriba sólo crece
   hacia abajo: ahí ya está el galón de siempre diciéndolo. Éste es el de la
   barra del teléfono y no se pinta en ningún otro sitio. */
.iat-tpl--evento-especial-v2 .header-chevron {
  display: none;
}

.iat-tpl--evento-especial-v2 .panel-card {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(18, 0, 32, 0.95);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-card);
  padding: 1.2rem;
  flex-direction: column;
  gap: 1.2rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.iat-tpl--evento-especial-v2 .menu-column.open .panel-card {
  display: flex;
}

@media (max-width: 1024px) {
  .iat-tpl--evento-especial-v2 .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .iat-tpl--evento-especial-v2 {
    padding: 1.5rem 1rem;
  }

  .iat-tpl--evento-especial-v2 header h1 {
    font-size: 2rem;
  }
}

/* =========================================
   BARRA DE AJUSTES DEL TELÉFONO
   ========================================= */

/* En el teléfono las cuatro tarjetas de ajustes no caben arriba: apiladas se
   comían la primera pantalla entera y había que pasarlas de largo cada vez para
   llegar a lo que se está calculando. Así que bajan a una barra flotante
   anclada al borde inferior, un icono por apartado, y el desplegable crece
   hacia arriba desde ella.

   Es el mismo marcado y el mismo script que en el escritorio: aquí sólo cambia
   cómo se pinta. Y son las mismas medidas que la barra del listado de coches
   —diez píxeles a los lados y otros diez por debajo—, porque es la misma barra
   haciendo lo mismo en otra página. */
@media (max-width: 700px) {

  /* En columna para poder mandar el menú al final con `order`: las tarjetas van
     al principio del marcado porque en el escritorio se leen arriba, y para que
     la barra se pegue al borde inferior sin dejar un hueco donde estaban tiene
     que ser lo último de la columna. */
  .iat-tpl--evento-especial-v2 main {
    display: flex;
    flex-direction: column;
  }

  /* Pegajosa y no fija: así se para donde acaba el contenido en vez de seguir
     flotando sobre el pie del tema, que no es suyo. Al ser la última de la
     columna su sitio natural ya es el final.
   *
     Y se ensancha hasta diez píxeles del borde de la ventana, no del contenedor
     que la lleva dentro: el margen negativo es la mitad del contenedor menos la
     mitad de la ventana, que es justo lo que le sobra al contenedor por ese
     lado mientras esté centrado —lo está, con `margin-inline: auto`—, sin tener
     que saber cuánto relleno le pone el tema por fuera. */
  .iat-tpl--evento-especial-v2 .menu-grid {
    order: 99;
    position: sticky;
    bottom: 10px;
    z-index: 200;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: calc(100vw - 20px);
    margin: 0 calc(50% - 50vw + 10px) 10px;
    padding: 5px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: rgba(18, 0, 32, 0.95);
    backdrop-filter: blur(10px);
  }

  /* El apartado deja de ser una columna con su desplegable colgando debajo: es
     el botón redondo, y el desplegable pasa a colgar de la barra entera. Por eso
     se queda sin `position`, que es lo que lo hacía de ancla. */
  .iat-tpl--evento-especial-v2 .menu-column {
    position: static;
    flex: none;
  }

  .iat-tpl--evento-especial-v2 .header-card {
    justify-content: center;
    gap: 5px;
    width: auto;
    height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    backdrop-filter: none;
  }

  .iat-tpl--evento-especial-v2 .header-card:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  /* Abierto se aclara el fondo, y nada más: es el estado que ya se está viendo
     —el desplegable ocupa media pantalla— así que no necesita gritarlo. */
  .iat-tpl--evento-especial-v2 .menu-column.open .header-card {
    background: var(--abierto);
  }

  /* Y el apartado que tenga algo cambiado respecto a cómo arrancó la página
     lleva un punto en la esquina del icono: con el desplegable cerrado no queda
     ni un rastro de lo tocado, y quien no lo sepa leerá como resultado de
     fábrica el de unos ajustes suyos.
   *
     Un punto y no un relleno claro: el relleno es el estado de abierto, y el
     icono —que es una imagen y no hereda el color— se perdería encima. Cuelga
     del icono y no del botón para que se lea como algo que le pasa a ése. */
  .iat-tpl--evento-especial-v2 .menu-column.is-puesto .header-title-row {
    position: relative;
  }

  .iat-tpl--evento-especial-v2 .menu-column.is-puesto .header-title-row::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -4px;
    width: var(--punto);
    height: var(--punto);
    border-radius: 50%;
    background: var(--punto-color);
  }

  /* El rótulo y el estado no caben al lado del icono, pero siguen en el marcado:
     son lo único que da nombre al botón para quien lee la página en voz alta. */
  .iat-tpl--evento-especial-v2 .header-title,
  .iat-tpl--evento-especial-v2 .header-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .iat-tpl--evento-especial-v2 .header-left {
    gap: 0;
  }

  .iat-tpl--evento-especial-v2 .header-icon {
    width: 20px;
    height: 20px;
  }

  /* El galón de arriba apunta hacia abajo y no gira más que a su sitio; aquí lo
     releva el mismo de la barra del listado de coches, que apunta a donde el
     desplegable va a crecer. */
  .iat-tpl--evento-especial-v2 .header-arrow {
    display: none;
  }

  .iat-tpl--evento-especial-v2 .header-chevron {
    display: flex;
    flex: none;
    color: var(--text-subtitle);
    transition: transform 0.2s ease;
  }

  .iat-tpl--evento-especial-v2 .header-chevron svg {
    display: block;
  }

  /* Apuntando abajo mientras hay algo desplegado: el galón dice hacia dónde se va
     al pulsar, no dónde está. */
  .iat-tpl--evento-especial-v2 .menu-column.open .header-chevron {
    transform: rotate(180deg);
  }

  /* El desplegable mide lo que la barra y no lo que el botón que lo abre:
     cuarenta píxeles no dan ni para un interruptor con su rótulo. Crece hacia
     arriba porque hacia abajo no hay pantalla, y lleva techo para que un evento
     con muchas etapas no la tape entera. */
  .iat-tpl--evento-especial-v2 .panel-card {
    top: auto;
    right: 0;
    bottom: calc(100% + 4px);
    left: 0;
    width: auto;
    max-height: 60vh;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.iat-tpl--evento-especial-v2 .switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.iat-tpl--evento-especial-v2 .switch-row.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Lo mismo que en el apartado entero: el interruptor de un pase que este evento
   no reparte se esconde desde el script, y el `display` de arriba le ganaba. */
.iat-tpl--evento-especial-v2 .switch-row[hidden] {
  display: none;
}

.iat-tpl--evento-especial-v2 .toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.iat-tpl--evento-especial-v2 .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.iat-tpl--evento-especial-v2 .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #3b0a54;
  transition: .2s;
  border-radius: 24px;
}

.iat-tpl--evento-especial-v2 .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;
}

.iat-tpl--evento-especial-v2 input:checked + .slider {
  background-color: var(--accent-magenta-light);
}

.iat-tpl--evento-especial-v2 input:checked + .slider:before {
  transform: translateX(20px);
}

.iat-tpl--evento-especial-v2 .select-option-item {
  padding: 0.8rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--text-main);
}

.iat-tpl--evento-especial-v2 .select-option-item.selected {
  background: #ffffff;
  color: #510066;
}

.iat-tpl--evento-especial-v2 .stages-grid-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.2rem;
}

/* =========================================
   GARAJE
   ========================================= */
.iat-tpl--evento-especial-v2 .section-title {
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  margin-bottom: 1.5rem;
  color: var(--text-subtitle);
  font-weight: 900;
  text-transform: uppercase;
}

.iat-tpl--evento-especial-v2 .garage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.iat-tpl--evento-especial-v2 .car-card {
  background: #510066;
  border: 1px solid #73008F;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.iat-tpl--evento-especial-v2 .car-card.main-car {
  background: #73008F;
  border: 1px solid #B53EE4;
}

.iat-tpl--evento-especial-v2 .car-tag {
  font-size: 0.75rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.iat-tpl--evento-especial-v2 .car-name {
  font-size: 1.2rem;
  font-weight: 900;
  padding-bottom: 1rem;
  color: #ffffff;
}

.iat-tpl--evento-especial-v2 .car-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

.iat-tpl--evento-especial-v2 .arrow {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  text-align: center;
  user-select: none;
}

.iat-tpl--evento-especial-v2 .custom-dropdown-container {
  position: relative;
  width: 100%;
  min-width: 0;
}

.iat-tpl--evento-especial-v2 .custom-dropdown-trigger {
  background: #180022;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ff5555;
  font-weight: 900;
  font-size: 0.85rem;
  padding: 0 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  height: 42px;
  width: 100%;
  box-sizing: border-box;
}

.iat-tpl--evento-especial-v2 .custom-dropdown-trigger.has-stars {
  color: #ffffff;
}

.iat-tpl--evento-especial-v2 .custom-dropdown-trigger .dropdown-arrow-icon {
  width: 10px;
  height: 10px;
  object-fit: contain;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.iat-tpl--evento-especial-v2 .custom-dropdown-container.open .dropdown-arrow-icon {
  transform: rotate(180deg);
}

.iat-tpl--evento-especial-v2 .custom-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: #100018;
  border-radius: 8px;
  padding: 6px;
  z-index: 50;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  flex-direction: column;
  gap: 4px;
}

.iat-tpl--evento-especial-v2 .custom-dropdown-container.open .custom-dropdown-menu {
  display: flex;
}

.iat-tpl--evento-especial-v2 .dropdown-opt {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 900;
  font-size: 0.95rem;
  min-height: 34px;
}

.iat-tpl--evento-especial-v2 .dropdown-opt.blocked-opt {
  color: #ff5555;
}

.iat-tpl--evento-especial-v2 .dropdown-opt.selected {
  background: #ffffff;
  color: #ff5555;
}

.iat-tpl--evento-especial-v2 .stars-flex {
  display: flex;
  align-items: center;
  gap: 3px;
}

.iat-tpl--evento-especial-v2 .stars-display-box {
  background: #8100a8;
  border-radius: 8px;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  height: 42px;
  box-sizing: border-box;
}

.iat-tpl--evento-especial-v2 .star-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.iat-tpl--evento-especial-v2 .car-card input[type="number"], .iat-tpl--evento-especial-v2 .car-card input[type="text"].bp-display-static {
  width: 100%;
  min-width: 0;
  height: 42px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 900;
  box-sizing: border-box;
}

.iat-tpl--evento-especial-v2 .car-card input[type="number"] {
  background: #180022;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 0 0.8rem;
}

.iat-tpl--evento-especial-v2 .car-card input[type="text"].bp-display-static {
  background: #8100a8;
  border: none;
  color: #ffffff;
  padding: 0 0.5rem;
  text-align: center;
}

.iat-tpl--evento-especial-v2 .key-btn {
  background: none;
  border: 1px solid var(--text-subtitle);
  color: var(--text-subtitle);
  padding: 0.6rem 1.4rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
}

.iat-tpl--evento-especial-v2 .key-btn.active {
  background: #ffffff;
  border-color: var(--accent-magenta-light);
  color: var(--accent-magenta);
  font-weight: 900;
}

.iat-tpl--evento-especial-v2 .car-rewards-list {
  font-size: 0.9rem;
  color: var(--text-main);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding-left: 12px;
}

.iat-tpl--evento-especial-v2 .car-rewards-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.iat-tpl--evento-especial-v2 .reward-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.iat-tpl--evento-especial-v2 .car-rewards-list strong {
  font-weight: 900;
}

.iat-tpl--evento-especial-v2 .car-rewards-list em {
  font-style: italic;
  opacity: 0.8;
}

/* =========================================
   MÉTRICAS
   ========================================= */
.iat-tpl--evento-especial-v2 .metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 3.5rem;
}

.iat-tpl--evento-especial-v2 .metric-card {
  background-color: #530066;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}

.iat-tpl--evento-especial-v2 .metric-card.metric-card-highlight {
  background-color: #6b0085;
  border-color: rgba(255, 255, 255, 0.35);
}

.iat-tpl--evento-especial-v2 .metric-value {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.iat-tpl--evento-especial-v2 .metric-total {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
}

.iat-tpl--evento-especial-v2 .metric-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--text-car-aux);
  text-transform: uppercase;
  line-height: 1.1;
  width: 100%;
  text-align: left;
}

.iat-tpl--evento-especial-v2 .metric-label-text {
  text-align: left;
  display: inline-block;
}

.iat-tpl--evento-especial-v2 .metric-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
}

@media (max-width: 768px) {
  .iat-tpl--evento-especial-v2 {
    padding: 1.5rem 0.8rem;
  }

  .iat-tpl--evento-especial-v2 header h1 {
    font-size: 2.2rem;
  }

  .iat-tpl--evento-especial-v2 .garage-grid {
    grid-template-columns: 1fr;
  }

  .iat-tpl--evento-especial-v2 .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .iat-tpl--evento-especial-v2 .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================
   DESGLOSE POR ETAPAS (CARRUSEL)
   ========================================= */
.iat-tpl--evento-especial-v2 .stages-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1.2rem;
  scroll-behavior: smooth;
}

.iat-tpl--evento-especial-v2 .stages-carousel::-webkit-scrollbar {
  height: 8px;
}

.iat-tpl--evento-especial-v2 .stages-carousel::-webkit-scrollbar-track {
  background: rgba(18, 0, 32, 0.6);
  border-radius: 4px;
}

.iat-tpl--evento-especial-v2 .stages-carousel::-webkit-scrollbar-thumb {
  background: #7a12a3;
  border-radius: 4px;
}

.iat-tpl--evento-especial-v2 .stages-carousel::-webkit-scrollbar-thumb:hover {
  background: var(--accent-magenta-light);
}

.iat-tpl--evento-especial-v2 .stage-card-column {
  flex: 0 0 240px;
  background: rgba(25, 0, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 260px;
}

.iat-tpl--evento-especial-v2 .stage-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.iat-tpl--evento-especial-v2 .stage-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #ffffff;
}

.iat-tpl--evento-especial-v2 .stage-badge {
  font-size: 0.65rem;
  font-weight: 900;
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.iat-tpl--evento-especial-v2 .stage-badge.badge-unlocked {
  color: var(--green-status);
  border: 1px solid var(--green-status);
  background: rgba(0, 255, 136, 0.05);
}

.iat-tpl--evento-especial-v2 .stage-badge.badge-locked {
  color: var(--red-status);
  border: 1px solid var(--red-status);
  background: rgba(255, 68, 68, 0.05);
}

.iat-tpl--evento-especial-v2 .stage-rewards-vertical {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.iat-tpl--evento-especial-v2 .stage-rewards-vertical li {
  line-height: 1.3;
}

.iat-tpl--evento-especial-v2 .stage-rewards-vertical li.empty-rewards {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-size: 0.85rem;
}

.iat-tpl--evento-especial-v2 .missing-max-box {
  margin-top: 20px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 10px;
}

.iat-tpl--evento-especial-v2 .missing-max-title {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-bottom: 8px;
}

.iat-tpl--evento-especial-v2 .missing-max-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.iat-tpl--evento-especial-v2 .missing-max-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 500;
}

.iat-tpl--evento-especial-v2 .missing-max-item strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.iat-tpl--evento-especial-v2 .missing-max-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/**
 * Lo que el motor esconde porque este evento no lo tiene —un pase que no
 * reparte nada, y con él su tarjeta si no reparte ninguno—. Va al final y con
 * la misma especificidad que las reglas de arriba para poder con sus `display`.
 */
.iat-tpl--evento-especial-v2 [hidden] {
  display: none;
}