/* ============================================================================
   Portada: la elección de competición.
   Usa los tokens de styles.css ya retintados por marca.css, así que la portada
   y el tablero son la misma web. Nada de esto lo lee app.js.
   ========================================================================= */

/* `.shell` de styles.css mide 1520px, que es lo que necesita un tablero de datos.
   Una página de lectura a ese ancho pierde el ojo entre línea y línea. */
.portada .shell {
  width: min(1160px, calc(100% - 64px));
  margin-inline: auto;
}

.portada main {
  padding: 0;
}

/* Separación entre secciones, no dentro de ellas: más aire encima de un titular
   que debajo, para que el bloque se lea unido a lo que abre. */
.portada main > section + section {
  margin-top: 104px;
}

/* La matriz va pegada al hero: es lo primero que hay que ver, sin scroll. */
.portada main > #competiciones {
  margin-top: 40px;
}

.saltar {
  position: absolute;
  left: -9999px;
}

.saltar:focus {
  position: fixed;
  z-index: var(--z-toast);
  top: 12px;
  left: 12px;
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

/* La cabecera de la portada no tiene navegación: la rejilla es la navegación. */
.portada .topbar {
  /* Flex en vez de la rejilla base: en la portada solo va el logo, y la rejilla
     de 3 columnas dejaba el logo descentrado. Con flex + padding simétrico queda
     centrado con margen real arriba y abajo. */
  display: flex;
  align-items: center;
  padding-block: 22px;
  /* Alineado con la columna de contenido (1160px), no pegado al borde. */
  padding-inline: max(32px, calc((100% - 1160px) / 2));
}

/* ── Entrada ────────────────────────────────────────────────────────────── */

.portada-hero {
  padding: 48px 0 0;
}

.portada-hero h1 {
  margin: 0;
  max-width: 15ch;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.portada-hero .portada-sub {
  margin: 18px 0 0;
  /* 66ch: dentro de la medida cómoda de lectura. */
  max-width: 66ch;
  color: var(--muted);
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.6;
}

/* "Cuatro competiciones": en negrita y en tinta, pero más pequeño que el título. */
.portada-hero .portada-sub strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── La matriz ──────────────────────────────────────────────────────────── */

.matriz-titulo {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
}

.matriz-sub {
  margin: 14px 0 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}

/* Columna estrecha para el rótulo del eje vertical + dos columnas iguales. */
.matriz {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 40px;
}

/* Las filas heredan las columnas de la matriz con `subgrid`: así los rótulos de
   ambos ejes y las cuatro celdas caen sobre las mismas guías, en vez de que cada
   fila se invente su propio reparto. */
.matriz-eje-x,
.matriz-fila {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: 18px;
}

.matriz-eje-x {
  align-items: end;
  padding-bottom: 2px;
}

.matriz-rotulo,
.matriz-eje-y {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* --hairline daba 3,0:1 sobre el fondo: vale para un borde, no para texto. */
  color: var(--muted);
}

.matriz-eje-y {
  display: flex;
  align-items: center;
  padding-right: 6px;
  line-height: 1.5;
  text-align: right;
  justify-content: flex-end;
}

/* Botón «i» de la esquina: al pasar el ratón explica qué significan los ejes. */
.matriz-esquina {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: flex-end;
}

.matriz-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  cursor: help;
  transition: color 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}

.matriz-info:hover {
  color: var(--ink);
  border-color: var(--muted);
}

.matriz-info-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  width: 340px;
  max-width: 78vw;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--muted);
  font-family: "Hind Madurai", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out),
    visibility 0.16s;
}

.matriz-info:hover .matriz-info-tip,
.matriz-info:focus-visible .matriz-info-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.matriz-info-tip b {
  color: var(--ink);
}

.matriz-info-titulo {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--soft) !important;
}

.matriz-info-titulo:first-child {
  margin-top: 0;
}

/* ── La celda: una competición ──────────────────────────────────────────── */

.torneo {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 28px 28px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition:
    transform 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    opacity 460ms var(--ease-out);
}

.torneo h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.16;
}

.torneo p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* El pie se pega abajo para que las cuatro celdas alineen su línea de base
   aunque los textos midan distinto. */
.torneo-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}

.torneo-agentes {
  display: flex;
  align-items: center;
}

.torneo-agentes img {
  width: 24px;
  height: 24px;
  /* Se solapan ligeramente: leen como un grupo, no como cuatro iconos sueltos. */
  margin-right: -6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

.torneo-agentes img:last-child {
  margin-right: 0;
}

.torneo-ver {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--purple);
  font-size: 14.5px;
  font-weight: 600;
}

.torneo-ver svg {
  width: 15px;
  height: 15px;
  transition: transform 200ms var(--ease-out);
}

/* Hover solo donde hay puntero de verdad: en táctil se dispara al tocar. */
@media (hover: hover) and (pointer: fine) {
  .torneo:hover {
    transform: translateY(-3px);
    border-color: rgb(153 82 224 / 34%);
    box-shadow:
      0 2px 4px rgb(30 22 52 / 6%),
      0 34px 54px -32px rgb(30 22 52 / 42%);
  }

  .torneo:hover .torneo-ver svg {
    transform: translateX(4px);
  }
}

.torneo:active {
  transform: scale(0.99);
}

/* Entrada en cascada, una sola vez. Nunca desde scale(0): nada aparece de la
   nada. El desplazamiento es corto porque la celda ya se está mirando. */
.torneo.entra {
  opacity: 0;
  transform: translateY(14px);
}

.torneo.entra.dentro {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .torneo.entra {
    transform: none;
  }
}

/* ── Reglas ─────────────────────────────────────────────────────────────── */

.reglas h2 {
  margin: 0 0 32px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
}

.reglas-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin: 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.reglas-lista dt {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.reglas-lista dd {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.62;
}

/* ── Pie ────────────────────────────────────────────────────────────────── */

.cierre {
  margin-top: 104px;
  padding: 34px 0 46px;
  border-top: 1px solid var(--line-2);
}

.cierre-fila {
  display: flex;
  align-items: center;
  gap: 44px;
}

.cierre .brand-logo {
  height: 22px;
  opacity: 0.62;
}

.cierre-nota {
  margin: 0;
  max-width: 74ch;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.6;
}

/* La etiqueta de ejes dentro de la celda. En ancho la matriz ya los rotula
   fuera, así que aquí se oculta A LA VISTA pero no al lector de pantalla: si
   no, el enlace se anuncia sin decir de qué casilla del cuadro es. */
.torneo-marca {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Estrecho ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Sin dos columnas no hay matriz que leer: los rótulos de eje pasan a ser
     una etiqueta dentro de cada celda y la rejilla se vuelve una lista. El
     `subgrid` de las filas no sobrevive a una sola columna, así que se aplana
     con `display: contents` y las cuatro celdas fluyen en una columna. */
  .matriz {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .matriz-fila {
    display: contents;
  }

  .matriz-eje-x,
  .matriz-eje-y {
    display: none;
  }

  /* Sin ejes rotulados, la etiqueta vuelve a ser visible dentro de la celda. */
  .torneo-marca {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .reglas-lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .cierre-fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .portada .shell {
    width: calc(100% - 44px);
  }

  .portada-hero {
    padding-top: 58px;
  }

  .portada main > section + section {
    margin-top: 72px;
  }
}

/* ── Selector de competición: el título del tablero abre un desplegable ──── */

.torneo-selector {
  position: relative;
  display: inline-block;
}

.torneo-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.torneo-selector-btn h1 {
  margin: 0;
}

.torneo-selector-chevron {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--muted);
  transition: transform 180ms var(--ease-out), color 160ms var(--ease-out);
}

.torneo-selector-btn:hover .torneo-selector-chevron {
  color: var(--ink);
}

.torneo-selector-btn[aria-expanded="true"] .torneo-selector-chevron {
  transform: rotate(180deg);
}

.torneo-selector-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.torneo-selector-menu a {
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: background 140ms var(--ease-out);
}

.torneo-selector-menu a:hover {
  background: var(--page);
}

.torneo-selector-menu a.is-current {
  color: var(--purple);
  background: var(--purple-soft);
}

/* ── Vuelta a la portada, dentro del tablero de cada competición ─────────── */

.brand-zona {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  /* Ancla para la flecha, que va posicionada fuera del flujo para NO desplazar el
     logo: así el logo cae exactamente en la misma columna que en la home. */
  position: relative;
}

/* Botón de volver a la portada: solo el icono, en un botón redondo discreto,
   colocado en el margen a la izquierda del logo (el logo también lleva a la
   portada). Al estar en absoluto, no empuja al logo. */
.brand-volver {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out),
    background 160ms var(--ease-out);
}

.brand-volver svg {
  width: 15px;
  height: 15px;
  transition: transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .brand-volver:hover {
    color: var(--ink);
    border-color: var(--hairline);
    background: #f0f2f7;
  }

  .brand-volver:hover svg {
    transform: translateX(-2px);
  }
}

/* En pantallas estrechas el margen no da para meter la flecha fuera de la columna;
   ahí vuelve al flujo, delante del logo. */
@media (max-width: 1319px) {
  .brand-zona {
    gap: 10px;
  }
  .brand-volver {
    position: static;
    transform: none;
    margin-right: 0;
  }
}

/* ── Gráfica de rentabilidad (por IA / por competición) ─────────────────── */
.resumen-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 26px;
}

.resumen-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
}

.resumen-filtro {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgb(0 0 0 / 5%);
  border-radius: 999px;
}

.resumen-filtro button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.resumen-filtro button.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}

.resumen-grafica {
  position: relative;
  overflow-x: auto;
}

#resumen-svg {
  display: block;
  width: 100%;
  min-width: 520px;
  height: auto;
}

.resumen-grid {
  stroke: rgb(0 0 0 / 7%);
  stroke-width: 1;
}

.resumen-eje {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Podio: los cuatro (IAs o competiciones) en fila, con medalla, igual que la
   clasificación de cada tablero. */
.resumen-podio {
  display: grid;
  grid-template-columns: repeat(var(--podio-cols, 4), 1fr);
  gap: 12px;
  margin: 4px 0 26px;
}

.podio-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 12px 16px;
  text-align: center;
  border-radius: 18px;
  /* Halo del color, contenido detrás del logo (en px, para que no se corte). */
  background: radial-gradient(circle at 50% 63px,
    color-mix(in srgb, var(--c) 28%, transparent) 0px,
    color-mix(in srgb, var(--c) 10%, transparent) 40px,
    transparent 60px);
}

.podio-logo-wrap {
  position: relative;
  display: inline-flex;
}

.podio-logo {
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  object-fit: cover;
}

/* En «Por competición» no hay logo: una baldosa del color de la competición. */
.podio-tile {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%);
}

/* El S&P 500 es la referencia, no un competidor: baldosa gris con su nombre y borde
   discontinuo, igual que su línea de puntos en la gráfica. */
.podio-tile--bench {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #8b93a7 15%, #fff);
  color: #59616f;
  border: 1.5px dashed #9aa2b3;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.3px;
  text-align: center;
}

.podio-nom {
  margin-top: 2px;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.podio-val {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.podio-val > b {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.podio-val em {
  font-style: normal;
  font-weight: 600;
  font-size: 12.5px;
}

.podio-val em.pos { color: #1a9d5b; }
.podio-val em.neg { color: #e0524d; }

/* Caja blanca que envuelve la gráfica y su leyenda, como el tablero. */
.resumen-caja {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 18px 20px 8px;
}

/* Leyenda de líneas bajo la gráfica: color + nombre, en una fila. */
.resumen-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 8px;
  padding: 2px 4px 8px;
}

.resumen-leg-linea {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
}

.resumen-leg-linea i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.resumen-leg-linea.is-bench i.dash {
  width: 16px;
  height: 0;
  border-top: 2px dashed #9aa1ad;
  border-radius: 0;
  background: none;
}

/* Guía vertical y tooltip del hover. */
.resumen-guia {
  stroke: rgb(0 0 0 / 22%);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.resumen-tip {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  min-width: 158px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgb(0 0 0 / 14%);
  font-size: 12.5px;
}

.resumen-tip.izq {
  transform: translateX(-100%) translateX(-12px);
}

.resumen-tip.der {
  transform: translateX(12px);
}

.resumen-tip-fecha {
  margin-bottom: 5px;
  font-weight: 700;
  color: var(--ink);
}

.resumen-tip-fila {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 1.5px 0;
}

.resumen-tip-fila i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}

.resumen-tip-fila span {
  flex: 1;
  color: var(--muted);
  white-space: nowrap;
}

.resumen-tip-fila b {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.resumen-tip-fila b.pos {
  color: #1a9d5b;
}

.resumen-tip-fila b.neg {
  color: #e0524d;
}

.resumen-nota {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

@media (max-width: 640px) {
  .resumen-podio {
    grid-template-columns: repeat(2, 1fr);
  }
  .podio-nom {
    font-size: 14.5px;
  }
  /* Igual que el tablero: el viewBox se mantiene ancho y solo crece en alto, así que
     el texto del eje se agranda para no quedar minúsculo al escalar. */
  #resumen-svg {
    min-width: 0;
  }
  .resumen-eje {
    font-size: 25px;
  }
}