/* Estilos del sitio. Guía: docs/diseno-sitio.md. Primero el celular. */

:root {
  --fondo: #FFFFFF;
  --texto: #15171A;
  --texto-secundario: #5A616B;
  --texto-parrafo: #3B4048;
  --borde: #E4E6EA;
  --fondo-suave: #F4F6F8;
  --acento: #1C5D99;
  --acento-oscuro: #123F69;
  --celeste-claro: #CFE4F6;
  --barra-secundaria: #9BB8D6;
  --suba: #1E7A46;
  --baja: #B3261E;
  --enlace: var(--acento);
  --negro-tablero: #15171A;
  --resaltado: #EDF4FB;
  --titulos: "Newsreader", Georgia, serif;
  --interfaz: "Public Sans", system-ui, sans-serif;
  --numeros: "IBM Plex Mono", ui-monospace, monospace;
}

/* Modo oscuro: fondo y texto invertidos, el acento se mantiene en fondos y barras.
   Los colores de texto se aclaran donde hace falta para llegar a contraste 4.5:1. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --fondo: #15171A;
    --texto: #F4F6F8;
    --texto-secundario: #AEB4BC;
    --texto-parrafo: #D9DCE0;
    --borde: #2C3036;
    --fondo-suave: #1E2125;
    --enlace: #CFE4F6;
    --suba: #6FCF97;
    --baja: #F28B82;
    --barra-secundaria: #5F7FA3;
    --resaltado: #1A2532;
  } }
:root[data-theme="dark"] {
    --fondo: #15171A;
    --texto: #F4F6F8;
    --texto-secundario: #AEB4BC;
    --texto-parrafo: #D9DCE0;
    --borde: #2C3036;
    --fondo-suave: #1E2125;
    --enlace: #CFE4F6;
    --suba: #6FCF97;
    --baja: #F28B82;
    --barra-secundaria: #5F7FA3;
    --resaltado: #1A2532;
  }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 17px/1.5 var(--interfaz);
  padding-bottom: 64px; /* espacio para la barra inferior del celular */
}
a { color: var(--enlace); text-underline-offset: 2px; }
a:hover { color: var(--acento-oscuro); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a:hover { color: #FFFFFF; } }
:root[data-theme="dark"] a:hover { color: #FFFFFF; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: 34px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
.num { font-family: var(--numeros); font-weight: 500; font-variant-numeric: tabular-nums; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; padding: 12px; background: var(--acento); color: #fff; z-index: 20; }
.saltar:focus { left: 8px; }
.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* Modo claro u oscuro: por defecto, el del dispositivo; el botón del encabezado lo fija (data-theme). */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }

/* Encabezado */
.encabezado { border-bottom: 1px solid var(--borde); background: var(--fondo); }
.encabezado-fila { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); min-height: 44px; }
.logo-grilla { display: grid; grid-template-columns: 14px 14px; grid-template-rows: 14px 14px; border: 1px solid var(--negro-tablero); }
.logo-grilla i:nth-child(1), .logo-grilla i:nth-child(4) { background: var(--negro-tablero); }
.logo-grilla i:nth-child(2), .logo-grilla i:nth-child(3) { background: var(--celeste-claro); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-grilla { border-color: #F4F6F8; } :root:not([data-theme="light"]) .logo-grilla i:nth-child(1), :root:not([data-theme="light"]) .logo-grilla i:nth-child(4) { background: #F4F6F8; } }
:root[data-theme="dark"] .logo-grilla { border-color: #F4F6F8; }
:root[data-theme="dark"] .logo-grilla i:nth-child(1), :root[data-theme="dark"] .logo-grilla i:nth-child(4) { background: #F4F6F8; }
.logo-nombre { font: 700 24px/1 var(--titulos); }
.boton-menu {
  min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--fondo); color: var(--texto); font: 600 15px var(--interfaz); cursor: pointer;
}
.encabezado-acciones { display: flex; align-items: center; gap: 8px; }
.boton-tema {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--borde); border-radius: 50%; background: var(--fondo); color: var(--texto); cursor: pointer;
}
.boton-tema:hover { border-color: var(--acento); }
.boton-tema svg { width: 22px; height: 22px; }
.boton-tema .icono-sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .boton-tema .icono-sol { display: block; }
  :root:not([data-theme="light"]) .boton-tema .icono-luna { display: none; }
}
:root[data-theme="dark"] .boton-tema .icono-sol { display: block; }
:root[data-theme="dark"] .boton-tema .icono-luna { display: none; }
.menu { display: none; }
.menu.abierto { display: block; position: absolute; left: 0; right: 0; top: 64px; background: var(--fondo);
  border-bottom: 1px solid var(--borde); z-index: 10; }
.menu ul { list-style: none; margin: 0; padding: 8px 16px; }
.menu a { display: flex; align-items: center; min-height: 44px; color: var(--texto); text-decoration: none; font-weight: 600; }
.menu a[aria-current="page"] { color: var(--enlace); }

/* Barra fija inferior (solo celular) */
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around;
  background: var(--fondo); border-top: 1px solid var(--borde); z-index: 10;
}
.barra-inferior a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px;
  color: var(--texto-secundario); text-decoration: none; font-weight: 600; font-size: 15px; }
.barra-inferior a[aria-current="page"] { color: var(--enlace); }

/* Etiquetas, fechas, bajadas */
.etiqueta {
  display: inline-block; background: var(--celeste-claro); color: var(--acento-oscuro); font-weight: 600;
  font-size: 14px; letter-spacing: .02em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-right: 8px;
}
time, .meta { color: var(--texto-secundario); font-size: 15px; }
.bajada { font-size: 19px; color: var(--texto-parrafo); }
main.contenedor { padding-top: 40px; padding-bottom: 32px; }   /* "main.contenedor": si no, .contenedor lo pisa */
@media (min-width: 960px) { main.contenedor { padding-top: 56px; } }

/* Inicio: principal (o doble principal), grilla de 6, más leídas, talentos y mini ranking */
/* Nota principal: texto a la izquierda e imagen a la derecha (fijo, también en "doble"). En el celular
   se apila con la imagen arriba; en el HTML el texto va primero, para los lectores de pantalla. */
.nota-grande { display: grid; gap: 20px; }
.grande-visual { order: -1; }
.grande-titulo { margin-top: 12px; font-size: 30px; }
.grande-titulo a { color: var(--texto); text-decoration: none; }
.grande-titulo a:hover { text-decoration: underline; }
.foto { margin: 0; }
.foto img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--negro-tablero); }
.credito { margin-top: 6px; font-size: 13px; color: var(--texto-secundario); }
.credito a { color: inherit; }
.foto-nota { margin: 8px 0 24px; }
/* Getty: tal cual, con su marco; solo se limita el ancho para que entre en el celular. */
.foto-getty iframe { max-width: 100%; }
.grande-visual .grafico { margin: 0; padding: 16px; background: var(--fondo-suave); border-radius: 8px; }
.principal-doble { display: grid; gap: 32px; }
.principal-doble .grande-titulo { font-size: 30px; }
.grilla-notas {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); /* 3, 2 o 1 columnas; sin huecos */
}
.tarjeta-nota { border: 1px solid var(--borde); border-radius: 8px; padding: 16px; }
.tarjeta-nota h3 { margin-top: 10px; font-size: 22px; }
.tarjeta-nota h3 a { color: var(--texto); text-decoration: none; }
.tarjeta-nota h3 a:hover { text-decoration: underline; }
.tarjeta-nota p { color: var(--texto-parrafo); font-size: 17px; margin: 0; }
.mas-leidas ol { counter-reset: puesto; list-style: none; margin: 0; padding: 0; }
.mas-leidas li { counter-increment: puesto; display: grid; grid-template-columns: 40px 1fr; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--borde); }
.mas-leidas li::before { content: counter(puesto); font: 600 24px var(--numeros); color: var(--acento); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mas-leidas li::before { color: var(--enlace); } }
:root[data-theme="dark"] .mas-leidas li::before { color: var(--enlace); }
.mas-leidas a { color: var(--texto); font: 600 19px var(--titulos); text-decoration: none; }
.mas-leidas a:hover { text-decoration: underline; }
.inicio-pie { display: grid; gap: 32px; margin-top: 32px; }
.inicio-pie .bloque { margin-top: 0; }
.columna-rankings { display: grid; gap: 24px; align-content: start; }
.bloque { margin-top: 32px; }
.lista-notas { list-style: none; margin: 0; padding: 0; }
.item-nota { padding: 16px 0; border-bottom: 1px solid var(--borde); }
.item-nota h3 { margin-top: 8px; }
.item-nota h3 a { color: var(--texto); text-decoration: none; }
.item-nota p { color: var(--texto-parrafo); margin: 0; }

/* Talentos */
.talentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.tarjeta-talento a {
  display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; padding: 14px;
  border: 1px solid var(--borde); border-radius: 8px; text-decoration: none; color: var(--texto); min-height: 44px;
}
.tarjeta-talento a:hover { border-color: var(--acento); }
.iniciales {
  grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: 50%; background: var(--celeste-claro);
  color: var(--acento-oscuro); display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.talento-nombre { font-weight: 700; }
.talento-meta { color: var(--texto-secundario); font-size: 15px; }
.var { font-family: var(--numeros); font-weight: 600; font-size: .9em; }
.var.suba { color: var(--suba); }
.var.baja { color: var(--baja); }

/* Columna lateral y mini ranking */
.lateral .bloque:first-child { margin-top: 0; }
.mini-ranking { background: var(--fondo-suave); border-radius: 8px; padding: 20px; }
.pestanias { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.pestania {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--borde); border-radius: 22px; background: var(--fondo);
  color: var(--texto); font: 600 15px var(--interfaz); cursor: pointer;
}
.pestania[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #FFFFFF; }

/* Tablas */
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-secundario); font-weight: 600; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
td a { color: var(--texto); }
.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: 8px; }
.tabla-caja table th, .tabla-caja table td { white-space: nowrap; }
.mini-tabla td:nth-child(2) { white-space: normal; }

/* Torneos: Argentinos por el mundo y Torneos en Argentina, una tarjeta por torneo */
.bloque-mundo { margin-top: 40px; }
.bloque-mundo h2 { padding-bottom: 10px; border-bottom: 3px solid var(--negro-tablero); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bloque-mundo h2 { border-bottom-color: var(--texto); } }
:root[data-theme="dark"] .bloque-mundo h2 { border-bottom-color: var(--texto); }
.bloque-mundo h3 { margin: 28px 0 12px; font: 600 13px var(--interfaz); text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-secundario); }
.torneos { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.tarjeta-torneo { border: 1px solid var(--borde); border-top: 4px solid var(--borde); border-radius: 8px;
  padding: 18px 18px 14px; background: var(--fondo); }
.tarjeta-torneo.estado-en_curso { border-top-color: var(--acento); }
.tarjeta-torneo.estado-proximo { border-top-color: var(--barra-secundaria); }
.torneo-encabezado { display: flex; align-items: flex-start; gap: 10px; }
.bandera { flex: none; width: 24px; height: 18px; margin-top: 5px; border-radius: 2px; box-shadow: 0 0 0 1px var(--borde); }
.torneo-encabezado h4 { flex: 1; margin: 0; font: 700 21px/1.2 var(--titulos); }
.torneo-encabezado h4 a { color: var(--texto); text-decoration: none; }
.torneo-encabezado h4 a:hover { text-decoration: underline; }
.estado { flex: none; padding: 3px 9px; border-radius: 4px; font: 600 13px var(--interfaz); text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap; }
.estado-en_curso.estado { background: var(--acento); color: #FFFFFF; }
.estado-proximo.estado { background: var(--celeste-claro); color: var(--acento-oscuro); }
.estado-terminado.estado { background: var(--fondo-suave); color: var(--texto-secundario); border: 1px solid var(--borde); }
.torneo-meta { margin: 8px 0 0; color: var(--texto-parrafo); font-size: 15px; }
.torneo-detalle { margin: 2px 0 0; color: var(--texto-secundario); font-size: 14px; }
.tarjeta-torneo .tabla-caja { margin-top: 14px; border: 0; border-radius: 0; }
.tabla-torneo th { padding: 8px 10px; font-size: 13px; border-bottom: 2px solid var(--borde); }
.tabla-torneo td { padding: 12px 10px; font-size: 16px; }
.tabla-torneo tbody tr:last-child td { border-bottom: 0; }
.tabla-torneo td.num { font-family: var(--numeros); font-weight: 500; }
.tabla-torneo td.jugador { white-space: normal; min-width: 170px; }
.jugador-nombre { font-weight: 600; }
.titulo-fide { font: 600 13px var(--numeros); color: var(--texto-secundario); }
.rating-rival { color: var(--texto-secundario); font-size: 14px; }
.nota-jugador { display: block; margin-top: 2px; color: var(--texto-secundario); font-size: 14px; }
.tabla-torneo caption { caption-side: top; text-align: left; padding: 0 10px 6px; font-size: 13px;
  color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.tabla-torneo .jugador-nombre { font-weight: 400; }
/* Argentinos: fondo suave. Los que seguimos: además, nombre en negrita y una línea fina a la izquierda. */
.tabla-torneo tr.argentino td { background: var(--resaltado); }
.tabla-torneo tr.seguido td:first-child { box-shadow: inset 2px 0 0 var(--barra-secundaria); }
.tabla-torneo tr.seguido .jugador-nombre { font-weight: 700; }
.tabla-torneo tr.seguido .jugador-nombre a { color: var(--texto); font-weight: 700; }
.tabla-torneo tr.ademas th { padding-top: 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-secundario); border-bottom: 1px solid var(--borde); }
.elo { font: 500 14px var(--numeros); color: var(--texto-secundario); }
.fed { margin-left: 6px; font: 500 13px var(--numeros); color: var(--texto-secundario); }
.ver-tabla { margin: 10px 0 0; font-weight: 600; }
.volver { margin: 0 0 12px; }
.torneo-completo .torneo-encabezado h1 { flex: 1; margin: 0; }
.mencion { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 4px; font-size: 13px; font-weight: 600;
  background: var(--celeste-claro); color: var(--acento-oscuro); }

/* Ranking */
.controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--texto-secundario); }
.campo input, .campo select {
  min-height: 44px; padding: 0 10px; border: 1px solid var(--borde); border-radius: 6px;
  font: 400 16px var(--interfaz); background: var(--fondo); color: var(--texto);
}
.campo.casilla { flex-direction: row; align-items: center; min-height: 44px; color: var(--texto); }
.campo.casilla input { min-height: auto; width: 20px; height: 20px; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  background: var(--acento); color: #FFFFFF; border: 0; border-radius: 6px; font: 600 16px var(--interfaz);
  text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--acento-oscuro); color: #FFFFFF; }
.boton.secundario { background: var(--fondo); color: var(--enlace); border: 1px solid var(--borde); }

/* Nota */
.nota { max-width: 720px; margin: 0 auto; }
.nota h1 { margin-top: 12px; font-size: 30px; }
.datos-al { display: inline; margin: 0; color: var(--texto-secundario); font-size: 15px; }
.datos-al time { font-size: inherit; }
.nota p { font-size: 18px; color: var(--texto-parrafo); }
.nota .bajada { font-size: 20px; }
.nota h2 { margin-top: 1.5em; }
.fuente { font-size: 15px !important; color: var(--texto-secundario) !important; }
.sello {
  margin-top: 32px; padding: 16px; background: var(--fondo-suave); border-left: 4px solid var(--acento);
  border-radius: 4px; font-size: 15px; color: var(--texto-parrafo);
}

/* Gráficos */
.grafico { margin: 24px 0; }
.grafico figcaption { font-size: 15px; color: var(--texto-secundario); margin-bottom: 12px; }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.barras li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.barras li .barra-pista { grid-column: 1 / -1; grid-row: 2; }
.barra-nombre { font-weight: 600; font-size: 15px; }
.barra-nombre a { color: var(--texto); }
.barra-pista { display: block; height: 14px; background: var(--fondo-suave); border-radius: 3px; }
.barra { display: block; height: 100%; background: var(--barra-secundaria); border-radius: 3px; }
.barra.lider { background: var(--acento); }
.barra-dato { font-size: 14px; }
.barra-dato small { font-size: 13px; }
.barra-dato small { color: var(--texto-secundario); font-family: var(--interfaz); }
svg { width: 100%; height: auto; display: block; }
.serie { stroke-width: 2.5; }
.serie-clasico { stroke: var(--acento); }
.serie-rapido { stroke: var(--barra-secundaria); }
.serie-blitz { stroke: var(--texto-secundario); stroke-dasharray: 5 4; }
.ejes text { font: 500 28px var(--numeros); fill: var(--texto-secundario); }   /* unidades del SVG: se achica con el ancho */
@media (max-width: 374px) { .ejes text { font-size: 32px; } }
@media (min-width: 480px) { .ejes text { font-size: 20px; } }
@media (min-width: 720px) { .ejes text { font-size: 13px; } .tarjeta-nota h3 { font-size: 24px; } }
.leyenda { list-style: none; display: flex; gap: 16px; padding: 0; margin: 8px 0; font-size: 14px; }
.muestra { display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; }
.muestra-clasico { background: var(--acento); }
.muestra-rapido { background: var(--barra-secundaria); }
.muestra-blitz { background: var(--texto-secundario); }
details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--enlace); }

/* Perfil */
.perfil-encabezado h1 { margin-top: 8px; }
.tarjetas-rating { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.tarjeta-rating { border: 1px solid var(--borde); border-radius: 8px; padding: 16px; }
.tarjeta-rating h2 { font: 600 14px var(--interfaz); text-transform: uppercase; letter-spacing: .03em; color: var(--texto-secundario); }
.rating-grande { font-size: 32px; margin: 0 0 4px; color: var(--texto); }
.tarjeta-rating p:last-child { margin: 0; color: var(--texto-secundario); font-size: 15px; }

/* Pie */
.pie { background: var(--fondo-suave); border-top: 1px solid var(--borde); padding: 24px 0; font-size: 15px; color: var(--texto-secundario); }
.pie-nombre { font: 700 20px var(--titulos); color: var(--texto); margin-bottom: 4px; }

/* Computadora */
@media (min-width: 720px) {
  .talentos { grid-template-columns: repeat(2, 1fr); }
  .tarjetas-rating { grid-template-columns: repeat(3, 1fr); }
  .barras li { grid-template-columns: 180px 1fr 110px; align-items: center; gap: 12px; }
  .barras li .barra-pista { grid-column: 2; grid-row: 1; }
  .barras li .barra-dato { grid-column: 3; grid-row: 1; }
}
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .barra-inferior, .boton-menu { display: none; }
  .menu, .menu.abierto { display: block; position: static; border: 0; }
  .menu ul { display: flex; gap: 24px; padding: 0; }
  .encabezado-fila .menu { margin-left: auto; }
  .boton-tema { width: 44px; height: 44px; }
  h1 { font-size: 44px; }
  .nota h1 { font-size: 44px; }
  .principal-unica .grande-titulo { font-size: 42px; }
  .principal-doble .grande-titulo { font-size: 34px; }
  .principal-unica .nota-grande { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
  .principal-unica .grande-visual { order: 0; }
  .principal-unica .nota-grande.sin-visual { grid-template-columns: 1fr; }
  .principal-doble { grid-template-columns: 1fr 1fr; gap: 40px; }
  .inicio-pie { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
  .talentos { grid-template-columns: repeat(2, 1fr); }
  .nota p { font-size: 19px; }
}
/* Doble principal: cada nota también con texto a la izquierda e imagen a la derecha, desde el ancho en
   que entran las dos columnas sin apretar el gráfico. */
@media (min-width: 1100px) {
  .principal-doble .nota-grande { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
  .principal-doble .grande-visual { order: 0; }
  .principal-doble .nota-grande.sin-visual { grid-template-columns: 1fr; }
}

/* ===================== Home (maqueta docs/maquetas/home-propuesta-2.html) ===================== */
:root { --naranja: #C2571A; --celeste-panel: #F2F7FB; --negro-panel: #15171A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --naranja: #F0965E; --celeste-panel: #1A2430; --negro-panel: #0B0D10; } }
:root[data-theme="dark"] { --naranja: #F0965E; --celeste-panel: #1A2430; --negro-panel: #0B0D10; }
body { overflow-x: clip; }

/* Franja "En juego" (clases al-toque-*): rectángulo negro dentro de los márgenes, separado del menú */
.al-toque-caja { margin-top: 20px; }
.al-toque-caja + main.contenedor { padding-top: 24px; }
.al-toque { display: flex; align-items: center; gap: 16px; background: var(--negro-panel); color: #FFFFFF; font-size: 14px;
  border-radius: 10px; padding: 10px 12px; border: 1px solid var(--negro-panel); }
.al-toque-rotulo { display: flex; align-items: center; gap: 8px; flex: none; padding: 5px 10px; border-radius: 6px;
  border: 1px solid rgba(207, 228, 246, .25); background: rgba(207, 228, 246, .08); font-size: 12px; font-weight: 800;
  letter-spacing: 1px; color: #CFE4F6; }
.al-toque-items { display: flex; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  white-space: nowrap; color: #FFFFFF; text-decoration: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.al-toque-items::-webkit-scrollbar { display: none; }
.al-toque-items:hover .toque-item strong { text-decoration: underline; }
.toque-item { scroll-snap-align: start; padding: 0 16px; border-left: 1px solid rgba(207, 228, 246, .2); color: #D5DAE0; }
.toque-item:first-child { padding-left: 0; border-left: 0; }
.toque-item:last-child { padding-right: 28px; }
.toque-item strong { color: #FFFFFF; }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); } 70% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
.vivo { width: 9px; height: 9px; border-radius: 50%; background: #E5484D; animation: late 1.6s infinite; display: inline-block; flex: none; }
@media (prefers-reduced-motion: reduce) { .vivo { animation: none; } }

/* Nota principal: texto sobre celeste, gráfico sobre negro */
.principal-unica, .principal-doble { display: grid; gap: 24px; }
.nota-principal { display: grid; border-radius: 16px; overflow: hidden; background: var(--celeste-panel); }
.principal-texto { padding: 28px 22px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.rotulo { align-self: flex-start; color: #FFFFFF; font-weight: 700; padding: 5px 10px; border-radius: 4px; text-transform: uppercase;
  letter-spacing: .5px; font-size: 13px; }
.rotulo-azul { background: #1C5D99; }
.rotulo-naranja { background: #C2571A; }
.principal-titulo { margin: 0; font: 700 30px/1.1 var(--titulos); letter-spacing: -.3px; }
.principal-titulo a { color: var(--texto); text-decoration: none; }
.principal-titulo a:hover { text-decoration: underline; }
.principal-bajada { margin: 0; font-size: 18px; line-height: 1.55; color: var(--texto-parrafo); }
.principal-meta { margin: 0; font-size: 13px; color: var(--texto-secundario); }
.panel-negro { background: var(--negro-panel); color: #FFFFFF; padding: 26px 22px; display: flex; flex-direction: column; gap: 16px; }
.panel-titulo { margin: 0; font: 600 22px var(--titulos); color: #CFE4F6; }
.panel-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.panel-fila { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 56px; gap: 12px; align-items: center; }
.panel-nombre { font-size: 15px; color: #D5DAE0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-pista { position: relative; height: 22px; background: rgba(207, 228, 246, .08); border-radius: 4px; }
.panel-barra { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #4D6B8A; }
.panel-elo { font: 600 17px var(--numeros); text-align: right; color: #D5DAE0; }
.panel-fila.lider .panel-nombre { font-weight: 800; color: #FFFFFF; }
.panel-fila.lider .panel-barra { background: #CFE4F6; }
.panel-fila.lider .panel-elo { color: #CFE4F6; }
.panel-pie { margin: 0; font-size: 13px; color: #9AA3AE; }
.panel-foto { padding: 0; justify-content: center; }
.panel-foto .foto img { border-radius: 0; }
.panel-foto .credito { padding: 0 16px 12px; color: #9AA3AE; }

/* Grilla de 6: siempre alineada (título hasta 3 líneas, bajada hasta 2, con altura fija) */
.grilla-notas { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 28px 24px; grid-template-columns: minmax(0, 1fr); }
.tarjeta-grilla a { display: flex; flex-direction: column; gap: 10px; color: var(--texto); text-decoration: none; }
.tarjeta-grilla a:hover .tarjeta-titulo { text-decoration: underline; }
.tarjeta-visual { display: block; height: 200px; border-radius: 12px; overflow: hidden; }
.tarjeta-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visual-barras { display: flex; align-items: flex-end; gap: 12px; padding: 28px 32px 0; background: var(--celeste-panel); }
.visual-barras span { flex: 1; background: #9BB8D6; border-radius: 4px 4px 0 0; }
.visual-barras span:first-child { background: #1C5D99; }
.visual-tablero { display: flex; align-items: flex-end; padding: 12px;
  background-image: repeating-conic-gradient(#6F93B8 0% 25%, #E6F0F8 0% 50%); background-size: 50px 50px; }
.visual-tablero span { background: #15171A; color: #CFE4F6; padding: 6px 10px; border-radius: 4px; font: 600 14px var(--numeros); }
.rotulo-texto { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.rotulo-texto-azul { color: var(--enlace); }
.rotulo-texto-naranja { color: var(--naranja); }
.tarjeta-titulo { font: 600 22px/1.18 var(--titulos); height: calc(3 * 1.18em); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.tarjeta-bajada { font-size: 16px; line-height: 1.5; color: var(--texto-secundario); height: 3em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Torneos en vivo */
.torneos-vivo { margin-top: 48px; }
.bloque-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.bloque-cabeza h2 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 30px; }
.bloque-cabeza a { font-weight: 700; }
.vivo-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.vivo-tarjeta { border: 1px solid var(--borde); border-top: 4px solid var(--acento); border-radius: 12px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px; }
.vivo-tarjeta.proximo { border-top-color: var(--barra-secundaria); }
.vivo-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--texto); text-decoration: none; }
.vivo-cabeza:hover .vivo-titulo { text-decoration: underline; }
.vivo-titulo { font-weight: 800; font-size: 18px; }
.vivo-estado { font: 500 14px var(--numeros); color: var(--texto-secundario); white-space: nowrap; }
.vivo-tabla { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.vivo-tabla li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.vivo-tabla li.nuestro .vivo-nombre { font-weight: 700; }
.vivo-puesto { color: var(--texto-secundario); font-family: var(--numeros); }
.vivo-puntos { font-family: var(--numeros); }
.vivo-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texto-parrafo); }
.vivo-pie { margin: 0; background: var(--celeste-panel); border-radius: 8px; padding: 10px 12px; font-size: 14px; }

/* Mapa de los talentos (a todo el ancho) */
.mapa-talentos { width: 100vw; margin: 56px calc(50% - 50vw) 0; background: var(--celeste-panel); padding: 40px 0; }
.mapa-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.mapa-cabeza h2 { margin: 8px 0; font: 600 28px/1.15 var(--titulos); }
.mapa-cabeza p { margin: 0; max-width: 720px; color: var(--texto-secundario); font-size: 15px; }
.mapa-leyenda { display: flex; gap: 18px; font-size: 13px; }
.mapa-leyenda span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.mapa-leyenda .varon::before { background: #1C5D99; }
.mapa-leyenda .mujer::before { background: var(--naranja); }
.mapa-cuerpo { display: flex; flex-direction: column; gap: 24px; margin-top: 18px; }
.mapa-grafico { flex: 1; min-width: 0; }
.mapa-area { position: relative; height: 340px; margin: 12px 0 0 48px; }
.mapa-linea { position: absolute; left: 0; right: 0; border-top: 1px solid var(--borde); }
.mapa-linea span { position: absolute; left: -48px; top: -9px; font: 500 13px var(--numeros); color: var(--texto-secundario); }
.mapa-columnas { position: relative; height: 28px; margin-left: 48px; }
.mapa-columna { position: absolute; top: 8px; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.mapa-punto { position: absolute; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; transform: translate(-50%, -50%);
  cursor: pointer; }
.mapa-punto::after { content: ""; position: absolute; inset: -10px; }
.mapa-punto.grande { width: 14px; height: 14px; }
.mapa-punto.varon { background: #1C5D99; color: #1C5D99; }
.mapa-punto.mujer { background: var(--naranja); color: var(--naranja); }
.mapa-punto.activo { box-shadow: 0 0 0 2px var(--celeste-panel), 0 0 0 4px currentColor; }
.mapa-etiqueta { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px;
  color: var(--texto-parrafo); pointer-events: none; }
.mapa-punto.der .mapa-etiqueta { left: calc(100% + 6px); }
.mapa-punto.izq .mapa-etiqueta { right: calc(100% + 6px); }
.mapa-punto.activo .mapa-etiqueta { font-weight: 700; color: var(--texto); }
.mapa-ficha { background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; padding: 18px; display: flex;
  flex-direction: column; gap: 6px; }
.mapa-ficha-cat { font-size: 12px; font-weight: 700; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 1px; }
.mapa-ficha-nombre { font: 600 20px/1.15 var(--titulos); }
.mapa-ficha-titulo, .mapa-ficha-nota { font-size: 13px; color: var(--texto-secundario); }
.mapa-ficha-elo { font: 600 26px var(--numeros); }
.mapa-ficha-elo.varon { color: var(--enlace); }
.mapa-ficha-elo.mujer { color: var(--naranja); }
.mapa-ficha-enlace { font-size: 13px; font-weight: 700; }

/* Rankings lado a lado y "Las más leídas" en casillas */
.inicio-final { display: grid; gap: 40px; padding: 48px 0 8px; }
.rankings-lado { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.ranking-compacto { border: 1px solid var(--borde); border-radius: 12px; padding: 18px 20px; }
.ranking-compacto h3 { margin: 0 0 8px; font: 800 14px var(--interfaz); text-transform: uppercase; letter-spacing: 1px; color: var(--texto-secundario); }
.ranking-compacto td { padding: 7px 4px; }
.ranking-compacto td:nth-child(2) { width: 100%; }
.ranking-compacto a { font-weight: 600; }
.casillas h2 { margin: 0 0 14px; font-size: 30px; }
.casillas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.casillas li { display: flex; gap: 14px; align-items: center; }
.casilla { width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 28px var(--titulos); }
.casilla-oscura .casilla { background: #15171A; color: #CFE4F6; }
.casilla-clara .casilla { background: #CFE4F6; color: #15171A; }
.casillas a { font: 600 19px/1.2 var(--titulos); color: var(--texto); text-decoration: none; }
.casillas a:hover { text-decoration: underline; }

/* Pie oscuro */
.pie { background: #15171A; color: #D5DAE0; border-top: 0; }
.pie a { color: #CFE4F6; }
.pie-nombre { color: #FFFFFF; }

@media (min-width: 600px) {
  .grilla-notas, .vivo-tarjetas, .rankings-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta-titulo { font-size: 24px; }
}
@media (min-width: 900px) {
  .nota-principal { grid-template-columns: 5fr 7fr; }
  .nota-principal.sin-visual { grid-template-columns: 1fr; }
  .principal-texto { padding: 44px 40px; }
  .panel-negro { padding: 34px 36px; }
  .principal-unica .principal-titulo { font-size: 42px; }
  .principal-doble { grid-template-columns: 1fr 1fr; }
  .principal-doble .nota-principal { grid-template-columns: 1fr; }
  .principal-doble .principal-titulo { font-size: 32px; }
  .grilla-notas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mapa-cuerpo { flex-direction: row; align-items: flex-start; }
  .mapa-ficha { width: 300px; flex: none; }
  .mapa-area { height: 400px; }
  .inicio-final { grid-template-columns: 7fr 5fr; }
}
@media (max-width: 599px) {
  .mapa-etiqueta { display: none; }
  .mapa-punto.activo .mapa-etiqueta, .mapa-punto.grande .mapa-etiqueta { display: block; }
}
.ranking-compacto td:nth-child(2) { max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-compacto td.num, .ranking-compacto td:last-child { white-space: nowrap; }
@media (min-width: 900px) { .inicio-final.sin-leidas { grid-template-columns: 1fr; } }
/* El mapa va a todo el ancho sin 100vw (que suma el ancho de la barra de desplazamiento) */
.mapa-talentos { width: auto; margin: 56px 0 0; box-shadow: 0 0 0 100vmax var(--celeste-panel); clip-path: inset(0 -100vmax); }
.mapa-talentos > .contenedor { padding-left: 0; padding-right: 0; max-width: none; }
@media (min-width: 900px) and (max-width: 1099px) { .inicio-final { grid-template-columns: 1fr; } }
.mapa-columna { white-space: nowrap; }
/* Varones del mapa: el azul #1C5D99 se aclara en modo oscuro para que se vea sobre el fondo */
:root { --azul-mapa: #1C5D99; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --azul-mapa: #6FA8DC; } }
:root[data-theme="dark"] { --azul-mapa: #6FA8DC; }
.mapa-punto.varon { background: var(--azul-mapa); color: var(--azul-mapa); }
.mapa-leyenda .varon::before { background: var(--azul-mapa); }
/* Nota del mapa ("← Faustino juega en otra liga…"), armada desde los datos */
.mapa-destacado { position: absolute; margin: 0; width: 220px; font: italic 500 14px/1.35 var(--titulos); color: var(--texto); }
.mapa-destacado.der { left: calc(var(--x) + 90px); top: calc(var(--y) - 10px); }
.mapa-destacado.abajo { left: 0; right: 0; width: auto; top: calc(100% + 40px); }
.mapa-grafico.con-destacado:has(.abajo) { padding-bottom: 56px; }
@media (max-width: 899px) {
  .mapa-destacado.der { left: 0; right: 0; width: auto; top: calc(100% + 40px); }
  .mapa-grafico.con-destacado { padding-bottom: 56px; }
}
@media (max-width: 899px) { .mapa-destacado .flecha { display: none; } }
@media (min-width: 900px) {
  .mapa-destacado.der { left: calc(var(--x) + 110px); top: calc(var(--y) - 10px); width: min(300px, calc(100% - var(--x) - 110px)); }
}
/* La flecha queda a la altura de Faustino y el texto sube a su derecha, en el aire que deja el margen de arriba */
@media (min-width: 900px) {
  .mapa-destacado.der { display: flex; gap: 6px; align-items: flex-end; top: calc(var(--y) + 9px); transform: translateY(-100%); }
  .mapa-destacado .flecha { flex: none; }
}
.mapa-etiqueta { line-height: 1; }
/* Nota principal: en el celular, siempre primero el texto y después el gráfico */
.nota-principal > .principal-texto { order: 0; }
.nota-principal > .panel-negro { order: 1; }

/* Grilla: la tarjeta con foto de Getty (inserción entera, con su crédito, fuera del link) */
.tarjeta-grilla { display: flex; flex-direction: column; gap: 10px; }
.tarjeta-getty { display: flex; align-items: center; justify-content: center; background: var(--negro-panel); }
.tarjeta-getty .foto { margin: 0; width: 300px; max-width: 100%; }  /* la inserción de Getty toma el ancho de su caja */
.tarjeta-getty iframe { display: block; max-width: 100%; }

/* Mapa de talentos: columnas de fondo por categoría y líneas de los títulos FIDE (suaves: los puntos mandan) */
:root { --banda: #FFFFFF; --banda-par: #E8F1F9; --linea-titulo: #8FA3B8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --banda: #141A21; --banda-par: #1D2631; --linea-titulo: #5D7086; } }
:root[data-theme="dark"] { --banda: #141A21; --banda-par: #1D2631; --linea-titulo: #5D7086; }
.mapa-area, .mapa-columnas { margin-right: 28px; }
.mapa-banda { position: absolute; top: 0; bottom: 0; background: var(--banda); }
.mapa-banda.par { background: var(--banda-par); }
.mapa-titulo-fide { position: absolute; left: 10%; right: 0; border-top: 1px dashed var(--linea-titulo); opacity: .8; }
.mapa-titulo-fide > span { position: absolute; left: calc(100% + 6px); top: -8px; font-size: 12px; line-height: 1;
  white-space: nowrap; color: var(--texto-secundario); }
.mapa-titulo-fide .largo { display: none; }
.mapa-punto, .mapa-destacado { z-index: 1; }
@media (min-width: 900px) {
  .mapa-area, .mapa-columnas { margin-right: 140px; }
  .mapa-titulo-fide .largo { display: inline; }
  .mapa-titulo-fide .corto { display: none; }
}
.mapa-titulo-fide { right: 10%; }
.mapa-titulo-fide > span { left: calc(100% + 10% / .8 + 6px); }
@media (min-width: 900px) {
  /* la nota de Faustino puede usar el margen de la derecha: queda arriba de las etiquetas de los títulos */
  .mapa-destacado.der { width: min(320px, calc(100% - var(--x) - 110px + 130px)); }
}
.mapa-titulo-fide { left: 15%; right: 10%; }
.mapa-titulo-fide > span { left: calc(100% + 10% / .75 + 6px); }
.pie-contacto { margin-top: 8px; }

/* Notas de partidas: diagrama del momento clave y visor (colores de docs/diseno-sitio.md) */
.visor { margin: 36px 0 24px; border-top: 1px solid var(--borde); padding-top: 20px; }
.visor h2 { margin: 0 0 4px; }
.visor-encabezado { margin: 0 0 14px; color: var(--texto-secundario); font-size: 15px; }
.visor-cuerpo { display: grid; gap: 16px; }
.visor-tablero svg { width: 100%; max-width: 420px; display: block; border: 6px solid #15171A; border-radius: 6px; }
.visor-tablero .cla { fill: #E6F0F8; }
.visor-tablero .osc { fill: #6F93B8; }
.visor-tablero .cla.marcada { fill: #CFE4F6; }
.visor-tablero .osc.marcada { fill: #5A82AC; }
.visor-controles { display: flex; gap: 8px; }
.visor-controles button { flex: 1; min-height: 44px; font-size: 18px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--fondo); color: var(--texto); cursor: pointer; }
.visor-jugadas { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px;
  max-height: 260px; overflow-y: auto; font-family: var(--numeros); font-size: 14px; }
.visor-jugadas button { border: 0; background: none; color: var(--texto); padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.visor-jugadas button.actual { background: #1C5D99; color: #FFFFFF; }
@media (min-width: 700px) { .visor-cuerpo { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
/* Momento clave dentro del visor: la jugada marcada y la variante (se recorre en el mismo tablero) */
.visor-jugadas button.clave { box-shadow: inset 0 0 0 2px var(--naranja); }
.visor-variante { flex-basis: 100%; color: var(--texto-secundario); font-style: italic; }
.visor-variante button { font-style: italic; }
.visor-clave { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--naranja); background: var(--celeste-panel);
  font-size: 15px; line-height: 1.5; }
.visor-clave button { margin: 6px 8px 0 0; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--fondo); color: var(--texto); cursor: pointer; font-size: 14px; }
.visor-tablero.en-variante svg { border-color: var(--naranja); }
/* Visor: "Abrir en Lichess" (tablero de análisis de la transmisión) */
.visor-acciones { margin: 10px 0 0; }
.visor-lichess { display: inline-block; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px;
  font-size: 14px; font-weight: 700; text-decoration: none; color: var(--enlace); background: var(--fondo); }
.visor-lichess:hover { border-color: var(--enlace); }
/* Visor interactivo: el lector mueve las piezas (toca origen y destino) y puede activar el análisis */
.visor-tablero svg { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.visor-tablero rect { cursor: pointer; }
.visor-tablero use, .visor-tablero circle { pointer-events: none; }
.visor-tablero .cla.elegida, .visor-tablero .osc.elegida { fill: #F2C14E; }
.visor-tablero .destino { fill: rgba(21, 23, 26, 0.35); }
.visor-ayuda { margin: 8px 0 0; font-size: 14px; color: var(--texto-secundario); }
.visor-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.visor-boton { min-height: 40px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px; font: inherit;
  font-size: 14px; font-weight: 700; color: var(--texto); background: var(--fondo); cursor: pointer; }
.visor-boton:hover { border-color: var(--enlace); }
.visor-boton:disabled { cursor: progress; opacity: 0.7; }
.visor-lichess { min-height: 40px; box-sizing: border-box; }
.visor-libre, .visor-linea { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 15px; }
.visor-libre span, .visor-linea span { color: var(--texto-secundario); margin-right: 4px; }
.visor-libre button, .visor-linea button { border: 0; background: none; color: var(--texto); padding: 4px 6px;
  border-radius: 4px; cursor: pointer; font: inherit; }
.visor-libre button { color: var(--naranja); font-weight: 700; }
.visor-libre button.actual { background: var(--naranja); color: #FFFFFF; }
.visor-linea button:hover, .visor-libre button:hover { text-decoration: underline; }
.visor-coronar { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; }
.visor-coronar[hidden], .visor-analisis[hidden], .visor-libre[hidden], .visor-boton[hidden] { display: none; }
.visor-coronar button { min-height: 40px; padding: 6px 12px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--fondo); color: var(--texto); font: inherit; cursor: pointer; }
.visor-analisis { margin: 12px 0 0; }
.visor-barra { max-width: 420px; height: 12px; border: 1px solid var(--texto-secundario); border-radius: 6px;
  background: #15171A; overflow: hidden; }
.visor-barra span { display: block; height: 100%; width: 50%; background: #F4F6F8; transition: width 0.3s; }
.visor-eval { margin: 6px 0 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Visor: tablero a la izquierda, jugadas a la derecha (a la altura del tablero, con scroll) y análisis abajo, a
   todo el ancho. En celular, uno abajo del otro. */
.visor-cuerpo { grid-template-areas: "principal" "lado" "abajo"; }
.visor-principal { grid-area: principal; min-width: 0; }
.visor-lado { grid-area: lado; min-width: 0; }
.visor-abajo { grid-area: abajo; min-width: 0; }
.visor-pie { margin: 6px 0 10px; font-size: 12px; color: var(--texto-secundario); }
.visor-lista { position: relative; max-height: 220px; overflow-y: auto; border: 1px solid var(--borde);
  border-radius: 8px; padding: 6px; }
.visor-lista .visor-jugadas { margin: 0; max-height: none; overflow: visible; }
.visor-abajo .visor-acciones { margin: 0; }
.visor-barra { max-width: none; }
@media (min-width: 700px) {
  .visor-cuerpo { grid-template-areas: "principal lado" "abajo abajo"; align-items: stretch; }
  .visor-lado { position: relative; }
  .visor-lista { position: absolute; inset: 0; max-height: none; }
}
/* Nota de ronda: resultados de las primeras mesas. En celular, cada mesa se apila: sin scroll horizontal. */
.resultados-ronda { margin: 32px 0 24px; border-top: 1px solid var(--borde); padding-top: 20px; }
.resultados-ronda h2 { margin: 0 0 10px; }
.resultados-ronda table { font-size: 15px; }
.resultados-ronda th { text-align: left; font-size: 13px; color: var(--texto-secundario); font-weight: 700;
  padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.resultados-ronda td { padding: 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.resultados-ronda .r-mesa, .resultados-ronda .r-resultado { text-align: center; font-family: var(--numeros);
  white-space: nowrap; }
.resultados-ronda .r-resultado { font-weight: 700; }
.resultados-ronda .r-enlace { white-space: nowrap; text-align: right; font-size: 14px; }
.resultados-ronda .titulo-fide { font-size: 12px; font-weight: 700; color: var(--texto-secundario); }
.resultados-ronda .elo { font-family: var(--numeros); font-size: 13px; color: var(--texto-secundario); }
.resultados-ronda [class^="color-"] { display: inline-block; width: 10px; height: 10px; margin-right: 6px;
  border: 1px solid var(--texto-secundario); border-radius: 2px; vertical-align: baseline; }
.resultados-ronda .color-b { background: #F4F6F8; }
.resultados-ronda .color-n { background: #15171A; }
.resultados-ronda thead [class^="color-"] { display: none; }
@media (min-width: 640px) { .resultados-ronda [class^="color-"] { display: none; } }
@media (max-width: 639px) {
  .resultados-ronda thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .resultados-ronda tr { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto;
    grid-template-areas: "mesa blancas resultado" "mesa negras resultado" "mesa enlace enlace";
    padding: 10px 0; border-bottom: 1px solid var(--borde); column-gap: 8px; row-gap: 2px; }
  .resultados-ronda td { display: block; padding: 0; border: 0; }
  .resultados-ronda .r-mesa { grid-area: mesa; text-align: left; color: var(--texto-secundario); }
  .resultados-ronda .r-blancas { grid-area: blancas; }
  .resultados-ronda .r-negras { grid-area: negras; }
  .resultados-ronda .r-resultado { grid-area: resultado; align-self: center; }
  .resultados-ronda .r-enlace { grid-area: enlace; text-align: left; }
  .resultados-ronda .r-enlace:empty { display: none; }
}
/* Visor: lo que va debajo de los botones ("Tu variante" y el análisis), 2 px más chico que el texto de la nota */
.nota .visor-libre, .nota .visor-eval, .nota .visor-linea { font-size: 16px; }
@media (min-width: 960px) { .nota .visor-libre, .nota .visor-eval, .nota .visor-linea { font-size: 17px; } }
/* Visor: arrastrar las piezas (mouse o dedo). Sobre el tablero, el dedo mueve piezas en lugar de desplazar la página. */
.visor-tablero svg { touch-action: none; user-select: none; -webkit-user-select: none; }
.visor-tablero .flotante { pointer-events: none; filter: drop-shadow(0 0.04px 0.08px rgba(0, 0, 0, 0.5)); }
.visor-tablero.arrastrando rect { cursor: grabbing; }
/* Nota de ronda: posiciones después de la ronda (los 10 primeros); talentos destacados como en la página de torneos */
.posiciones-ronda { margin: 32px 0 24px; border-top: 1px solid var(--borde); padding-top: 20px; }
.posiciones-ronda h2 { margin: 0 0 10px; }
.posiciones-ronda table { font-size: 15px; }
.posiciones-ronda th { text-align: left; font-size: 13px; color: var(--texto-secundario); font-weight: 700;
  padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.posiciones-ronda td { padding: 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.posiciones-ronda .p-puesto, .posiciones-ronda .p-puntos { width: 4.5em; text-align: center; font-family: var(--numeros);
  white-space: nowrap; }
.posiciones-ronda th:first-child, .posiciones-ronda th:last-child { text-align: center; }
.posiciones-ronda .p-puntos { font-weight: 700; }
.posiciones-ronda .titulo-fide { font-size: 12px; font-weight: 700; color: var(--texto-secundario); }
.posiciones-ronda .elo { font-family: var(--numeros); font-size: 13px; color: var(--texto-secundario); }
.posiciones-ronda tr.talento td:first-child { box-shadow: inset 2px 0 0 var(--barra-secundaria); }
.posiciones-ronda .jugador-nombre { font-weight: 400; }
.posiciones-ronda tr.talento .jugador-nombre { font-weight: 700; }
.nota .posiciones-completa { margin: 10px 0 0; font-size: 15px; }
@media (max-width: 639px) {
  .posiciones-ronda .p-puesto, .posiciones-ronda .p-puntos { width: 3em; }
  .posiciones-ronda td { padding: 8px 4px; }
}
/* Visor: la lista de jugadas en dos columnas, como en Lichess ("1.  Cf3  e6") */
.visor-lista .visor-jugadas { display: block; }
.visor-jugadas li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  column-gap: 2px; }
.visor-jugadas li:nth-child(even) { background: var(--celeste-panel); border-radius: 4px; }
.visor-jugadas .visor-numero { color: var(--texto-secundario); text-align: right; padding-right: 8px; }
.visor-jugadas .visor-hueco { color: var(--texto-secundario); padding: 4px 6px; }
.visor-jugadas li button { text-align: left; width: 100%; font: inherit; }
.visor-jugadas li.visor-variante { display: block; }
.visor-jugadas li.visor-variante button { width: auto; }
/* Nota de ronda sin foto: la posición final de la primera partida destacada, con "Mesa N · Blancas–Negras" en chico */
.panel-tablero { justify-content: center; align-items: center; }
.tablero-principal { margin: 0; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.tablero-principal img { width: 100%; height: auto; display: block; }
.tablero-tapa .tablero-pie { font-size: 13px; color: #9AA3AE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-visual.tablero-tapa { position: relative; background: var(--negro-panel); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 12px; box-sizing: border-box; }
.tarjeta-visual.tablero-tapa img { width: auto; height: calc(100% - 24px); aspect-ratio: 1; object-fit: contain; }
.tarjeta-visual.tablero-tapa .tablero-pie { font-size: 12px; max-width: 100%; }