/* ==========================================================================
   El mejor ajedrecista — estilos del entrenamiento
   ==========================================================================
   Igual que en el resto del sitio: el tablero manda y el HTML es el marco.
   Acá hay más texto que en un juego, porque la mitad del trabajo es explicar,
   así que el tipo de letra y el ancho de los renglones importan más.
   ========================================================================== */

/* La intro y el resumen son una sola cosa, así que no se separan: la sección
   del sitio trae relleno abajo y dejaba un agujero de ciento cincuenta
   píxeles en el medio. */
.ent-intro { padding-top: 2.4rem; padding-bottom: 0; }
.ent-intro h1 { margin: .2rem 0 .6rem; }
.ent-intro .lead { max-width: 62ch; }
.ent-nota-motor {
  font-size: .82rem; line-height: 1.6; color: var(--text-muted);
  max-width: 62ch; margin-top: .8rem;
}

/* ------------------------------------------------------------ resumen -- */
.ent-resumen {
  display: flex; flex-direction: column; gap: .7rem;
  margin: .4rem 0 1.4rem;
}
.ent-numeros { display: flex; gap: 2rem; }
.ent-numeros div { display: flex; flex-direction: column; }
.ent-numeros strong { font-size: 1.7rem; line-height: 1; font-weight: 800; }
.ent-numeros span { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
.ent-barra {
  height: 7px; border-radius: 4px; overflow: hidden;
  background: var(--border); max-width: 420px;
}
.ent-barra > i { display: block; height: 100%; background: #3f6f8a; transition: width .4s ease; }

/* ------------------------------------------- lo que conviene ahora ---- */
.ent-ahora {
  border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 1.1rem 1.2rem; margin-bottom: 2rem;
  background: linear-gradient(180deg, #f7f4ec, #fffdf8);
}
.ent-ahora-eyebrow {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: #3f6f8a; font-weight: 700; margin: 0 0 .25rem;
}
.ent-ahora h3 { margin: 0 0 .3rem; font-size: 1.25rem; }
.ent-ahora-por { margin: 0 0 .3rem; font-size: .9rem; }
.ent-ahora-corto { margin: 0 0 .9rem; font-size: .86rem; color: var(--text-muted); }

/* -------------------------------------------------------------- grupos -- */
.ent-grupo { margin-bottom: 2.2rem; }
.ent-grupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ent-grupo-cab h3 { margin: 0; font-size: 1.1rem; }
.ent-grupo-cuenta { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ent-grupo-bajada { margin: .2rem 0 .8rem; font-size: .86rem; color: var(--text-muted); }

.ent-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 720px) { .ent-lista { grid-template-columns: 1fr 1fr; } }

.ent-item {
  display: grid; gap: .15rem; width: 100%; text-align: left;
  padding: .7rem .85rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: #fff; font: inherit; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ent-item:hover, .ent-item:focus-visible {
  border-color: #3f6f8a; transform: translateY(-1px); box-shadow: var(--shadow-s);
}
.ent-item-nom { font-weight: 650; font-size: .95rem; }
.ent-item-corto { font-size: .8rem; color: var(--text-muted); line-height: 1.45; }
.ent-item-estado { font-size: .72rem; font-weight: 600; color: var(--text-muted); margin-top: .2rem; }
.ent-item.etapa-1 .ent-item-estado { color: #9a7b3f; }
.ent-item.etapa-2 .ent-item-estado { color: #3f6f8a; }
.ent-item.etapa-3 .ent-item-estado { color: #4b7a4b; }
.ent-item.etapa-3 { border-color: #bcd4bc; background: #fafdf9; }

.ent-item-puntos { display: flex; gap: 3px; margin-top: .3rem; }
.ent-item-puntos > i {
  width: 16px; height: 4px; border-radius: 2px;
  background: var(--border);
}
.ent-item-puntos > i.es-hecho { background: #3f6f8a; }

/* ------------------------------------------------------------- lección -- */
.ent-panel { padding-top: 1rem; }
.ent-panel[hidden] { display: none; }
.ent-panel-cab {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
  margin-bottom: .7rem;
}
.ent-panel-cab h2 { margin: 0; font-size: 1.25rem; }
.ent-panel-cab > div { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.ent-etapa { margin: 0; font-size: .8rem; font-weight: 600; color: #3f6f8a; }
.ent-volver {
  display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start;
  border: 1px solid var(--border); border-radius: 999px;
  background: #fff; padding: .3rem .8rem .3rem .6rem;
  font: inherit; font-size: .8rem; cursor: pointer; color: inherit;
}
.ent-volver:hover { border-color: #3f6f8a; color: #3f6f8a; }

/* La pantalla de una lección es más parecida a una aplicación que a una
   página de texto, así que se le deja romper el ancho del sitio (1160) en
   monitores grandes. El resto de la página —la intro, la lista de
   lecciones— se queda en 1160, que es el ancho en el que se lee cómodo. */
@media (min-width: 1280px) { .ent-panel { max-width: 1440px; } }

.ent-juego { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 900px)  { .ent-juego { grid-template-columns: minmax(0, 480px) 1fr; } }
@media (min-width: 1160px) { .ent-juego { grid-template-columns: minmax(0, 560px) 1fr; } }
@media (min-width: 1280px) { .ent-juego { grid-template-columns: minmax(0, 660px) 1fr; } }
@media (min-width: 1560px) { .ent-juego { grid-template-columns: minmax(0, 780px) 1fr; } }

/* En pantalla ancha NO se infla la fila para que el tablero se pueda clavar:
   probé eso y en una notebook quedaba peor, porque la página se hacía más
   alta y el tablero terminaba saliéndose igual. Acá la solución es otra: el
   tablero se mide para entrar entero, y así no hace falta bajar la página
   para usarlo. La que sí se clava es la del teléfono, donde el texto va
   abajo y bajar es inevitable. */

/* El tablero se queda quieto mientras se lee al costado.

   Antes, para leer la explicación de abajo había que bajar la página, y el
   tablero se iba para arriba: mirabas el texto sin ver de qué te hablaba, y
   cada vez que querías mover tenías que volver a subir. Con sticky el
   tablero se clava debajo del encabezado y el costado se desplaza solo. */
.ent-tablero {
  display: flex; flex-direction: column; gap: .6rem;
  position: sticky; top: calc(66px + .8rem);
  align-self: start;
}
/* El tablero se mide contra el alto de la PANTALLA, no sólo contra el ancho
   de la columna. Si no, en una notebook quedaba un tablero de 560 que no
   entraba debajo del encabezado y había que bajar la página para ver la
   fila 1: justo lo que hace que jugar sea incómodo. Ahora se achica solo
   hasta entrar entero, y en un monitor grande se agranda. */
.ent-tablero canvas {
  display: block; width: 100%; height: auto;
  max-width: min(100%, calc(100vh - 15rem));
  aspect-ratio: 1 / 1;
  /* las piezas ya no son de píxeles sino de curvas: pedirle al navegador que
     no suavice al achicar las dejaba con los bordes dentados */
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-m);
  touch-action: none;
}

/* En pantallas bajas un tablero de 560 no entra entero debajo del
   encabezado, y quedarse quieto dejaría la mitad afuera. Ahí conviene que
   se desplace como cualquier cosa. */
@media (max-height: 760px) and (min-width: 900px) {
  .ent-tablero { position: static; }
}
/* En el teléfono el texto va debajo del tablero, así que para leerlo hay que
   bajar sí o sí. Ahí el tablero se clava arriba y el texto se desplaza por
   abajo: se lee la explicación sin perder de vista la posición de la que
   habla. Necesita fondo propio, si no el texto se ve pasar por atrás. */
@media (max-width: 899px) {
  .ent-tablero {
    top: calc(66px + .4rem); z-index: 3;
    background: var(--surface-0);
    padding-bottom: .5rem;
    /* la sombra abajo hace que el texto que pasa por atrás se lea como que
       pasa por atrás, y no como un renglón cortado por la mitad */
    box-shadow: 0 10px 12px -8px rgba(0, 0, 0, .18);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .ent-tablero canvas { max-width: min(100%, min(460px, calc(100vh - 20rem))); margin: 0 auto; }
}

/* En un teléfono angosto el margen del sitio se come cuarenta píxeles de
   tablero. Para el tablero, y sólo para el tablero, se achica. */
@media (max-width: 460px) {
  .ent-tablero { padding-inline: 8px; }
}

.ent-niveles { display: flex; gap: .35rem; }
.lec-nivel {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: #fff;
  font: inherit; font-weight: 700; font-size: .85rem; color: var(--text-muted);
}
.lec-nivel:hover { border-color: #3f6f8a; color: #3f6f8a; }
.lec-nivel.es-hecho { background: #e8f0e8; border-color: #bcd4bc; color: #4b7a4b; }
.lec-nivel.es-ahora { border-color: #3f6f8a; background: #3f6f8a; color: #fff; }

.ent-costado { display: flex; flex-direction: column; gap: .9rem; }
.lec-texto {
  margin: 0; font-size: .98rem; line-height: 1.65;
  border-left: 3px solid var(--border); padding-left: .9rem;
  min-height: 3.2em; max-width: 62ch;
}
.lec-texto.bien { border-left-color: #6f9a6f; }
.lec-texto.mal  { border-left-color: #c08a7a; }

.lec-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.lec-btn {
  border: 0; border-radius: 9px; cursor: pointer; font: inherit;
  font-weight: 650; font-size: .88rem; padding: .5rem 1rem;
  background: #3f6f8a; color: #fff;
}
.lec-btn:hover { background: #35607a; }
.lec-btn-2 { background: #efeadd; color: #4a4136; }
.lec-btn-2:hover { background: #e4ddcc; }

.ent-planilla {
  border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: .7rem .85rem; background: #fbf9f3;
}
.ent-planilla h3 {
  margin: 0 0 .3rem; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
/* La lista de jugadas crece durante la lección. Si la dejo crecer libre,
   el costado se hace más alto que el tablero y vuelve a empujar la página,
   que es lo que estábamos tratando de sacar. Se corta y se desplaza sola. */
.ent-planilla p {
  margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8rem; line-height: 1.7; word-spacing: .1em;
  max-height: 7.5em; overflow-y: auto;
}

/* ----------------------------------------------------------- cómo va -- */
.ent-como { margin: 2.6rem auto 1rem; }
.ent-como h2 { font-size: 1.1rem; margin-bottom: .6rem; }
.ent-como ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; max-width: 66ch; }
.ent-como li { font-size: .9rem; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .ent-item, .ent-barra > i { transition: none; }
  .ent-item:hover, .ent-item:focus-visible { transform: none; }
}

/* ------------------------------------------------- para qué y cuidado -- */
/* Las dos preguntas que uno se hace cuando le enseñan una jugada: para qué
   sirve, y qué tiene que NO pasar para que sirva. Van siempre a la vista,
   al lado del tablero, porque son la lección: las jugadas se olvidan, la
   idea queda. */
.ent-porques { display: grid; gap: .6rem; }
@media (min-width: 640px) { .ent-porques { grid-template-columns: 1fr 1fr; } }

.ent-porque {
  border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: .7rem .85rem; background: #fff;
}
.ent-porque h3 {
  margin: 0 0 .3rem; font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; display: flex; align-items: center; gap: .35rem;
}
.ent-porque p { margin: 0; font-size: .86rem; line-height: 1.6; }
.ent-porque-meta h3 { color: #3f6f8a; }
.ent-porque-meta { background: #f5fafc; border-color: #cfe2ea; }
.ent-porque-ojo h3 { color: #9a5f4a; }
.ent-porque-ojo { background: #fdf7f4; border-color: #ead5cb; }

/* ------------------------------------------------- sólo para escuchar -- */
/* El cartel que lee el lector de pantalla. Usaba la clase de hub.css, que
   esta página no carga, así que el texto aparecía escrito abajo del tablero
   y se veía repetido. */
.ent-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- escuchar -- */
/* El botón que lee la explicación en voz alta. Sale del flujo del texto
   para que se vea que es un control y no parte de la explicación. Si el
   equipo no tiene voz, el botón nunca se muestra: un botón que no hace
   nada es peor que no tener botón. */
.lec-oir {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-0); color: var(--text-secondary);
  font: inherit; font-size: .72rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  padding: .18rem .55rem .18rem .45rem;
  cursor: pointer; flex: none;
}
.lec-oir[hidden] { display: none; }
.lec-oir:hover { border-color: var(--brand-texto); color: var(--brand-texto); }
.lec-oir:focus-visible { outline: 2px solid var(--brand-texto); outline-offset: 2px; }
.lec-oir .lec-oir-stop { display: none; }
.lec-oir.esta-sonando { border-color: var(--brand-texto); color: var(--brand-texto); background: var(--brand-soft); }
.lec-oir.esta-sonando .lec-oir-play { display: none; }
.lec-oir.esta-sonando .lec-oir-stop { display: inline; }

/* el de la explicación grande va al lado del texto, no encima */
.lec-texto-caja { display: flex; align-items: flex-start; gap: .7rem; }
.lec-texto-caja .lec-texto { flex: 1 1 auto; }
.lec-texto-caja .lec-oir { margin-top: .1rem; }

/* los de los dos cuadritos van pegados al título */
.ent-porque h3 { justify-content: space-between; }

/* Con el dedo hace falta más superficie que con el mouse: 22 píxeles de alto
   se tocan mal. En pantallas táctiles los botones de escuchar se agrandan. */
@media (pointer: coarse) {
  .lec-oir { padding: .4rem .7rem .4rem .6rem; font-size: .78rem; }
}