.iat-tpl--spotlight-v2 {
  --bg-main: #510066;
  --bg-secondary: #1C002F;
  --bg-card-dark: #1f012a;
  --bg-dropdown: #100018;
  --bg-card-purple-dark: #4d0066;
  --bg-input: #1b0028;
  --accent-pill: #8100a8;
  --accent-gold: #ff9900;
  --accent-coral: #ff5e7e;
  --accent-green: #00e676;
  --text-white: #ffffff;
  --text-purple-light: #bc82d9;
  --text-muted: #9f75b8;
  --border-purple: #3e0c52;
  --border-light: #70208c;

  /* 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;

  --bg-segmented-track: #5b007d;
  --bg-primary-box: #73008F;
  --border-primary-box: #B53EE4;
  --bg-secondary-box: #510066;
  --border-secondary-box: #73008F;
}

.iat-tpl--spotlight-v2, .iat-tpl--spotlight-v2 * { 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--spotlight-v2 button, .iat-tpl--spotlight-v2 input, .iat-tpl--spotlight-v2 select, .iat-tpl--spotlight-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--spotlight-v2 { color: var(--text-white); line-height: normal; text-align: left;}
.iat-tpl--spotlight-v2 .iat-container { max-width: 1200px; width: 100%; margin-inline: auto; }

.iat-tpl--spotlight-v2 ::-webkit-scrollbar { width: 8px; height: 8px; }
.iat-tpl--spotlight-v2 ::-webkit-scrollbar-track { background: var(--bg-card-dark); border-radius: 10px; }
.iat-tpl--spotlight-v2 ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 10px; }

.iat-tpl--spotlight-v2 header { margin-bottom: 2rem; }
.iat-tpl--spotlight-v2 .header-subtitle { font-size: 0.8rem; font-weight: 900; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; }
.iat-tpl--spotlight-v2 .header-title { font-size: 2.2rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.iat-tpl--spotlight-v2 .header-dates { font-size: 0.9rem; color: var(--text-white); }
.iat-tpl--spotlight-v2 .error-msg { background-color: #5a0016; border: 1px solid #ff5e7e; color: #fff; padding: 1rem; border-radius: 8px; margin-top: 1rem; }

.iat-tpl--spotlight-v2 .top-config-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 2rem; }

.iat-tpl--spotlight-v2 .config-card { background-color: var(--bg-card-dark); border: 1px solid var(--border-purple); border-radius: 12px; padding: 1.2rem; cursor: pointer; position: relative; user-select: none; transition: background-color 0.2s, border-color 0.2s; }
.iat-tpl--spotlight-v2 .config-card:hover, .iat-tpl--spotlight-v2 .config-card.open { border-color: var(--border-light); }
.iat-tpl--spotlight-v2 .config-card-header { display: flex; justify-content: space-between; align-items: center; }
.iat-tpl--spotlight-v2 .config-card-title { font-size: 0.8rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--text-white); display: flex; align-items: center; gap: 0.5rem; }
.iat-tpl--spotlight-v2 .config-card-icon { width: 16px; height: 16px; object-fit: contain; display: inline-block; vertical-align: middle; }
.iat-tpl--spotlight-v2 .config-card-value { font-size: 0.9rem; font-weight: 500; color: var(--text-purple-light); margin-top: 0.6rem; }
.iat-tpl--spotlight-v2 .config-card-subtext { font-size: 0.8rem; color: var(--text-muted); font-style: italic; margin-top: 0.25rem; }
.iat-tpl--spotlight-v2 .config-card-subtext img.inline-icon { width: 14px; height: 14px; object-fit: contain; display: inline-block; vertical-align: middle; }
.iat-tpl--spotlight-v2 .dropdown-arrow { width: 14px; height: auto; display: inline-block; vertical-align: middle; transition: transform 0.2s ease; }

/* 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--spotlight-v2 .config-card-chevron { display: none; }

.iat-tpl--spotlight-v2 .config-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 440px;
  max-width: 90vw;
  background-color: var(--bg-dropdown);
  border: 1px solid var(--border-purple);
  border-radius: 16px;
  padding: 1.5rem;
  z-index: 100;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  flex-direction: column;
  gap: 1.2rem;
  cursor: default;
}

/* Las dos últimas tarjetas abren su desplegable hacia dentro: colgado por la
   izquierda se saldría de la pantalla por la derecha. Va en una consulta de
   medios y no suelto porque, en cuanto el menú deja de ser una fila de cinco,
   quien manda es la regla de la disposición que toque. */
@media (min-width: 1101px) {
  .iat-tpl--spotlight-v2 .top-config-grid .config-card:nth-child(4) .config-panel, .iat-tpl--spotlight-v2 .top-config-grid .config-card:nth-child(5) .config-panel {
    left: auto;
    right: 0;
  }
}

.iat-tpl--spotlight-v2 .config-card.open .config-panel { display: flex; }
.iat-tpl--spotlight-v2 .config-card.open .dropdown-arrow { transform: rotate(180deg); }

/* ESTILOS DE GRUPOS Y SELECTORES ESTILO COMPRAS MERCADO */
.iat-tpl--spotlight-v2 .market-section-group { display: flex; flex-direction: column; gap: 0.6rem; }
.iat-tpl--spotlight-v2 .market-section-title { font-size: 0.75rem; font-weight: 900; text-transform: uppercase; color: var(--text-purple-light); letter-spacing: 0.5px; }

.iat-tpl--spotlight-v2 .segmented-control {
  display: flex;
  background-color: var(--bg-segmented-track);
  padding: 4px;
  border-radius: 9999px;
  width: 100%;
  gap: 2px;
}

.iat-tpl--spotlight-v2 .select-option-btn {
  flex: 1;
  text-align: center;
  padding: 0.55rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-white);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.iat-tpl--spotlight-v2 .select-option-btn:hover { color: #ffffff; }
.iat-tpl--spotlight-v2 .select-option-btn.selected {
  background-color: var(--text-white);
  color: #3b0054;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

@media (max-width: 1100px) {
  .iat-tpl--spotlight-v2 .top-config-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .iat-tpl--spotlight-v2 .config-card-value { display: none !important;}
  .iat-tpl--spotlight-v2 .config-card-subtext { display: none !important;}
}

/* Con dos columnas, cada desplegable se alinea por el lado de su tarjeta. Se
   corta en 701 px porque desde ahí abajo no cuelga de la tarjeta. */
@media (max-width: 1100px) and (min-width: 701px) {
  .iat-tpl--spotlight-v2 .top-config-grid .config-card:nth-child(even) .config-panel { left: auto; right: 0; }
  .iat-tpl--spotlight-v2 .top-config-grid .config-card:nth-child(odd) .config-panel { left: 0; right: auto; }
}

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

/* En el teléfono las cinco 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--spotlight-v2 .iat-container {
    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--spotlight-v2 .top-config-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(--border-light);
    border-radius: 999px;
    background-color: var(--bg-dropdown);
  }

  /* El apartado deja de ser una tarjeta 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--spotlight-v2 .config-card {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    gap: 5px;
    width: auto;
    height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
  }

  /* 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--spotlight-v2 .config-card.open {
    background-color: 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 ahora el estado de abierto, y
     el icono —que es una imagen y no hereda el color— se perdía encima. Cuelga
     del icono y no de la tarjeta para que se lea como algo que le pasa a ése. */
  .iat-tpl--spotlight-v2 .config-card.is-puesto .config-card-title {
    position: relative;
  }

  .iat-tpl--spotlight-v2 .config-card.is-puesto .config-card-title::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -4px;
    width: var(--punto);
    height: var(--punto);
    border-radius: 50%;
    background-color: var(--punto-color);
  }

  /* La cabecera desaparece como caja para que el icono sea hijo de la tarjeta y
     se centre en ella. */
  .iat-tpl--spotlight-v2 .config-card-header {
    display: contents;
  }

  .iat-tpl--spotlight-v2 .config-card-icon {
    width: 20px;
    height: 20px;
  }

  /* El rótulo no cabe al lado del icono, pero sigue en el marcado: es lo único
     que da nombre al botón para quien lee la página en voz alta. */
  .iat-tpl--spotlight-v2 .config-card-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 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--spotlight-v2 .config-card-header .img-arrow {
    display: none;
  }

  .iat-tpl--spotlight-v2 .config-card-chevron {
    display: flex;
    flex: none;
    color: var(--text-purple-light);
    transition: transform 0.2s ease;
  }

  .iat-tpl--spotlight-v2 .config-card-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--spotlight-v2 .config-card.open .config-card-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--spotlight-v2 .config-panel {
    top: auto;
    right: 0;
    bottom: calc(100% + 4px);
    left: 0;
    width: auto;
    max-width: none;
    max-height: 60vh;
    padding: 1rem;
    gap: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .iat-tpl--spotlight-v2 .segmented-control { flex-wrap: wrap; border-radius: 12px; }
  .iat-tpl--spotlight-v2 .select-option-btn { border-radius: 8px; }
}

.iat-tpl--spotlight-v2 input[type="number"], .iat-tpl--spotlight-v2 input[type="date"] { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--border-purple); border-radius: 10px; font-size: 0.9rem; font-weight: 500; background-color: var(--bg-input); color: var(--text-white); outline: none; }
.iat-tpl--spotlight-v2 input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

.iat-tpl--spotlight-v2 .toggle-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-purple); padding-bottom: 0.6rem; margin-bottom: 0.2rem; }
.iat-tpl--spotlight-v2 .toggle-row span { font-size: 0.85rem; font-weight: 900; text-transform: uppercase; color: var(--text-white); }
.iat-tpl--spotlight-v2 .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.iat-tpl--spotlight-v2 .switch input { opacity: 0; width: 0; height: 0; }
.iat-tpl--spotlight-v2 .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #3e0c52; transition: .3s; border-radius: 24px; border: 1px solid var(--border-light); }
.iat-tpl--spotlight-v2 .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
.iat-tpl--spotlight-v2 input:checked + .slider { background-color: var(--accent-pill); }
.iat-tpl--spotlight-v2 input:checked + .slider:before { transform: translateX(20px); }

.iat-tpl--spotlight-v2 .custom-progress-section { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; transition: opacity 0.2s; }
.iat-tpl--spotlight-v2 .custom-progress-section.disabled-section { opacity: 0.35; pointer-events: none; }
.iat-tpl--spotlight-v2 .custom-progress-label { font-size: 0.75rem; font-weight: 900; text-transform: uppercase; color: var(--text-purple-light); }

.iat-tpl--spotlight-v2 .stages-switch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; max-height: 200px; overflow-y: auto; padding-right: 6px; }
@media (max-width: 600px) {
  .iat-tpl--spotlight-v2 .stages-switch-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
  .iat-tpl--spotlight-v2 .stage-switch-item { padding: 0.35rem 0.45rem; font-size: 0.75rem; }
}

.iat-tpl--spotlight-v2 .stage-switch-item { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text-white); background: rgba(255,255,255,0.03); padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--border-purple); }
.iat-tpl--spotlight-v2 .stage-switch-item.disabled { opacity: 0.35; pointer-events: none; }

.iat-tpl--spotlight-v2 .custom-star-dropdown { position: relative; width: 100%; user-select: none; }
.iat-tpl--spotlight-v2 .star-dropdown-btn { background-color: var(--bg-card-dark); border: 1px solid var(--border-purple); border-radius: 8px; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: border-color 0.2s; }
.iat-tpl--spotlight-v2 .star-dropdown-btn:hover { border-color: var(--border-light); }
.iat-tpl--spotlight-v2 .star-dropdown-btn .selected-val { font-weight: 500; font-size: 0.9rem; color: var(--accent-coral); display: flex; align-items: center; gap: 2px; }

.iat-tpl--spotlight-v2 .star-dropdown-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background-color: #12001c; border: 1px solid var(--border-purple); border-radius: 16px; padding: 0.8rem; z-index: 120; box-shadow: 0 10px 25px rgba(0,0,0,0.8); flex-direction: column; gap: 0.4rem; }
.iat-tpl--spotlight-v2 .custom-star-dropdown.open .star-dropdown-panel { display: flex; }
.iat-tpl--spotlight-v2 .custom-star-dropdown.open .dropdown-arrow { transform: rotate(180deg); }

.iat-tpl--spotlight-v2 .star-option { padding: 0.6rem 0.9rem; border-radius: 10px; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: var(--accent-gold); transition: background 0.2s; display: flex; align-items: center; gap: 2px; }
.iat-tpl--spotlight-v2 .star-option.blocked-text { color: var(--accent-coral); font-size: 0.9rem; }
.iat-tpl--spotlight-v2 .star-option:hover { background-color: rgba(255, 255, 255, 0.05); }
.iat-tpl--spotlight-v2 .star-option.selected { background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; }
.iat-tpl--spotlight-v2 .star-img-icon { width: 16px; height: 16px; object-fit: contain; display: inline-block; vertical-align: middle; }

.iat-tpl--spotlight-v2 .cars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
@media (max-width: 900px) { .iat-tpl--spotlight-v2 .cars-grid { grid-template-columns: 1fr; } }

.iat-tpl--spotlight-v2 .car-card { border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; }
.iat-tpl--spotlight-v2 .car-card.primary, .iat-tpl--spotlight-v2 .metric-card.primary { background-color: var(--bg-primary-box); border: 1px solid var(--border-primary-box); }
.iat-tpl--spotlight-v2 .car-card.auxiliary, .iat-tpl--spotlight-v2 .metric-card.secondary { background-color: var(--bg-secondary-box); border: 1px solid var(--border-secondary-box); }

.iat-tpl--spotlight-v2 .car-tag { font-size: 0.7rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.iat-tpl--spotlight-v2 .car-name { font-size: 1.2rem; font-weight: 900; padding-bottom: 1rem; }
.iat-tpl--spotlight-v2 .car-inputs-row { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; }
.iat-tpl--spotlight-v2 .car-input-group { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.iat-tpl--spotlight-v2 .arrow-icon { color: var(--text-muted); font-weight: 900; }

/* El icono va dentro de la caja, no delante: son dos campos seguidos —planos y
   piezas épicas— y sin la marca dentro no hay forma de saber cuál es cuál. */
.iat-tpl--spotlight-v2 .input-icon-row { position: relative; display: flex; align-items: center; }
.iat-tpl--spotlight-v2 .input-icon-row img { position: absolute; left: 10px; width: 16px; height: 16px; object-fit: contain; pointer-events: none; z-index: 1; }
.iat-tpl--spotlight-v2 .input-icon-row input { flex: 1; padding-left: 34px; }

/* Alineadas a la izquierda desde que llevan icono: centrado, el icono se movía
   de sitio en cada fila según lo larga que fuera la cifra. */
.iat-tpl--spotlight-v2 .pill-display { background-color: var(--accent-pill); border-radius: 8px; padding: 0.5rem; font-size: 0.85rem; font-weight: 900; text-align: left; color: var(--accent-gold); display: flex; align-items: center; justify-content: flex-start; gap: 2px; min-height: 38px; }
.iat-tpl--spotlight-v2 .pill-display.sub { color: var(--text-white); }

.iat-tpl--spotlight-v2 .btn-key-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.4); border-radius: 20px; margin-bottom: 1rem; padding: 0.4rem 1rem; color: var(--text-white); font-size: 0.8rem; font-weight: 600; cursor: pointer; width: fit-content; }
.iat-tpl--spotlight-v2 .btn-key-toggle.has-key { background-color: var(--text-white); color: #000; }

.iat-tpl--spotlight-v2 .car-stats-list { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--text-white); margin-top: 0.5rem; }
.iat-tpl--spotlight-v2 .car-stat-item { display: flex; align-items: center; gap: 0.5rem; }
.iat-tpl--spotlight-v2 .car-stat-item img { width: 15px; height: 15px; object-fit: contain; }

/* El icono de una recompensa dentro de una línea de texto. */
.iat-tpl--spotlight-v2 .reward-icon { width: 13px; height: 13px; object-fit: contain; vertical-align: -2px; margin: 0 4px; display: inline-block; }
.iat-tpl--spotlight-v2 .log-bp-tag .reward-icon,
.iat-tpl--spotlight-v2 .pill-display .reward-icon { margin-right: 3px; }

.iat-tpl--spotlight-v2 .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 900px) { .iat-tpl--spotlight-v2 .metrics-grid { grid-template-columns: repeat(2, 1fr); } }

.iat-tpl--spotlight-v2 .metric-card { border-radius: 12px; padding: 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.iat-tpl--spotlight-v2 .metric-value { font-size: 1.3rem; font-weight: 900; margin-bottom: 0.2rem; }
.iat-tpl--spotlight-v2 .metric-subvalue { font-size: 0.75rem; font-weight: 600; color: var(--text-purple-light); margin-bottom: 0.2rem; }
.iat-tpl--spotlight-v2 .metric-subvalue-subtext { font-size: 0.75rem; font-style:italic; margin-bottom: 0.2rem; }
.iat-tpl--spotlight-v2 .metric-label { font-size: 0.7rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.iat-tpl--spotlight-v2 .metric-label img { width: 15px; height: 15px; object-fit: contain; }

.iat-tpl--spotlight-v2 .section-title { font-size: 0.85rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin: 2rem 0 1rem 0; color: var(--text-muted); }

.iat-tpl--spotlight-v2 .stages-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; margin-bottom: 2rem; align-items: flex-start; }

.iat-tpl--spotlight-v2 .stage-card { min-width: 280px; width: 280px; background: var(--bg-card-dark); border: 1px solid var(--border-purple); border-radius: 12px; padding: 1.2rem; flex-shrink: 0; position: relative; transition: all 0.3s ease; }
.iat-tpl--spotlight-v2 .stage-card.locked { opacity: 0.6; }

.iat-tpl--spotlight-v2 .stage-card.expanded { min-width: 100%; width: 100%; flex: 1 1 100%; border-color: var(--border-light); }

.iat-tpl--spotlight-v2 .stage-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-purple); }
.iat-tpl--spotlight-v2 .stage-title-box { display: flex; align-items: center; gap: 0.5rem; }
.iat-tpl--spotlight-v2 .stage-title { font-weight: 900; font-size: 1rem; }
.iat-tpl--spotlight-v2 .stage-status-pill { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; background: transparent; }
.iat-tpl--spotlight-v2 .stage-status-pill.open { color: var(--accent-green); border: 1px solid var(--accent-green); }
.iat-tpl--spotlight-v2 .stage-status-pill.locked { color: var(--accent-coral); border: 1px solid var(--accent-coral); }

.iat-tpl--spotlight-v2 .stage-toggle-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 4px; transition: background 0.2s; }
.iat-tpl--spotlight-v2 .stage-toggle-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-white); }
.iat-tpl--spotlight-v2 .stage-card.expanded .stage-toggle-btn img { transform: rotate(180deg); }

.iat-tpl--spotlight-v2 .stage-req-subtitle { font-size: 0.7rem; color: var(--text-muted); margin-top: -0.4rem; margin-bottom: 0.5rem; }
.iat-tpl--spotlight-v2 .stage-summary-list { font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; color: var(--text-white); }

.iat-tpl--spotlight-v2 .stage-blocks-breakdown { display: none; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border-purple); gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.iat-tpl--spotlight-v2 .stage-card.expanded .stage-blocks-breakdown { display: grid; }

.iat-tpl--spotlight-v2 .stage-block-item { background: rgba(0,0,0,0.25); border: 1px solid var(--border-purple); border-radius: 8px; padding: 0.75rem 0.9rem; font-size: 0.8rem; }
.iat-tpl--spotlight-v2 .stage-block-item.played { border-color: var(--border-light); }
.iat-tpl--spotlight-v2 .stage-block-item.unplayed { opacity: 0.6; }
.iat-tpl--spotlight-v2 .block-header { display: flex; justify-content: space-between; align-items: center; font-weight: 900; margin-bottom: 0.4rem; color: var(--text-purple-light); }
.iat-tpl--spotlight-v2 .block-req-badge { font-size: 0.7rem; color: var(--accent-gold); display: flex; align-items: center; gap: 3px; background: rgba(255,153,0,0.1); padding: 2px 6px; border-radius: 4px; }
.iat-tpl--spotlight-v2 .block-rewards { display: flex; flex-direction: column; gap: 0.2rem; color: var(--text-white); margin-top: 0.4rem; }

.iat-tpl--spotlight-v2 .comparative-container { background: var(--bg-card-dark); border: 1px solid var(--border-purple); border-radius: 12px; padding: 1rem; overflow-x: auto; }
.iat-tpl--spotlight-v2 .comparative-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; text-align: center; }
.iat-tpl--spotlight-v2 .comparative-table th, .iat-tpl--spotlight-v2 .comparative-table td { padding: 0.75rem 0.5rem; border: 1px solid var(--border-purple); }
.iat-tpl--spotlight-v2 .comparative-table th { background-color: var(--bg-main); color: var(--text-white); font-weight: 900; text-transform: uppercase; font-size: 0.75rem; }
.iat-tpl--spotlight-v2 .comparative-table td.highlight-row { background-color: var(--bg-card-purple-dark); font-weight: 900; }
.iat-tpl--spotlight-v2 .comparative-table td.metric-title { text-align: left; font-weight: 900; background-color: var(--bg-main); }
.iat-tpl--spotlight-v2 .table-stars-cell { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }

/* Log diario ---------------------------------------------------------------
   La tabla crece con el número de coches y con los días del evento, así que
   scrollea en horizontal dentro de su caja en vez de ensanchar la página. */
.iat-tpl--spotlight-v2 .log-container { background: var(--bg-card-dark); border: 1px solid var(--border-purple); border-radius: 12px; padding: 1rem; overflow-x: auto; margin-bottom: 2rem; }
.iat-tpl--spotlight-v2 .log-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; text-align: center; }
.iat-tpl--spotlight-v2 .log-table th, .iat-tpl--spotlight-v2 .log-table td { padding: 0.6rem 0.4rem; border: 1px solid var(--border-purple); vertical-align: middle; }
.iat-tpl--spotlight-v2 .log-table th { background-color: var(--bg-main); color: var(--text-white); font-weight: 800; text-transform: uppercase; font-size: 0.7rem; }
.iat-tpl--spotlight-v2 .log-table td.day-cell { font-weight: 800; background-color: var(--bg-main); color: var(--text-purple-light); }
.iat-tpl--spotlight-v2 .log-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.03); }

.iat-tpl--spotlight-v2 .log-bp-tag { display: inline-block; padding: 2px 6px; font-weight: 600; margin: 1px; font-size: 0.75rem; }
.iat-tpl--spotlight-v2 .log-bp-empty { color: var(--text-muted); font-style: italic; }

/* Las cifras cambian de longitud fila a fila; sin ancho fijo por dígito las
   columnas de saldo bailan al leerlas en vertical. */
.iat-tpl--spotlight-v2 .log-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.iat-tpl--spotlight-v2 .log-num--in { color: var(--accent-gold); }
.iat-tpl--spotlight-v2 .log-num--out { color: var(--accent-coral); }

.iat-tpl--spotlight-v2 .log-highlight-list { display: flex; flex-direction: column; gap: 0.25rem; text-align: left; font-size: 0.75rem; }
.iat-tpl--spotlight-v2 .log-highlight-item { display: flex; align-items: center; gap: 0.4rem; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.iat-tpl--spotlight-v2 .log-highlight-item.star-up { color: var(--accent-gold); }
.iat-tpl--spotlight-v2 .log-highlight-item.stage-up { color: var(--accent-green); }