/* ============================================================
   ejercicios.css — las fichas de ejercicios y la tarjeta del
   desarrollo compacto (que también usan simulacros y memoria).
   ============================================================ */

.ejercicios { max-width: 48rem; }
.ej-saltos { margin-top: 1.1rem; }

.ej-bloque { margin-top: 2.6rem; }
.ej-bloque-cab { display: flex; align-items: baseline; gap: 1rem; padding-bottom: .5rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--linea); }
.ej-bloque-rom { font-family: var(--f-mono); font-weight: 700; font-size: 1.7rem; color: var(--verde); line-height: 1; min-width: 2.6rem; text-align: right; }
.ej-bloque-tit { font-family: var(--f-display); font-weight: 500; font-size: 1.75rem; line-height: 1.15; }
.ej-bloque-sub { color: var(--crema-2); font-style: normal; font-size: .98rem; }

.ej {
  padding: 1.1rem 1.25rem 1.15rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--hoja);
  margin-bottom: 1.25rem;
}
.ej-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .65rem; margin-bottom: .55rem; }
.ej-rot { letter-spacing: .12em; font-weight: 600; font-size: .86rem; color: var(--verde); font-variant-numeric: lining-nums; font-family: var(--f-mono); text-transform: uppercase; }
.ej-alias { color: var(--crema-3); letter-spacing: .12em; font-variant-numeric: lining-nums; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.ej-e { color: var(--azul); font-style: normal; font-size: .92rem; border: 1px solid color-mix(in srgb, var(--azul) 35%, transparent); border-radius: 0; padding: 0 .55rem; }
.ej-tit { flex-basis: 100%; font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 1.3; }
.ej-fuente { font-size: .9rem; color: var(--crema-3); font-style: normal; }
.ej-md ul { padding-left: 1.2rem; margin: .4rem 0 0; }
.ej-md li + li { margin-top: .3rem; }
.ej-usa { margin-top: .7rem; }
.ej-usa .etq { margin-right: .5rem; }
.ej-gol { display: inline-block; margin-top: .7rem; font-style: normal; font-size: .95rem; }

/* Lo plegado: la versión guiada y la solución (nuestras: en azul). */
.ej-plegable { margin-top: .75rem; border-top: 1px solid var(--filete-2); }
.ej-sum { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; padding: .5rem 0 .35rem; }
.ej-sum::-webkit-details-marker { display: none; }
.ej-sum-tit { letter-spacing: .12em; font-weight: 600; color: var(--azul); font-size: .82rem; font-family: var(--f-mono); text-transform: uppercase; }
.ej-sum-sub { font-style: normal; color: var(--crema-3); font-size: .92rem; }
.ej-sum:hover .ej-sum-tit { color: var(--verde); }
.ej-plegable-cuerpo { padding: .2rem 0 .5rem; }
.ej-aviso { font-style: normal; color: var(--azul); font-size: .93rem; margin-bottom: .6rem; }

.guia-fila { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .9rem; padding: .35rem 0; border-top: 1px solid var(--filete-2); }
.guia-fila:first-of-type { border-top: none; }
.guia-etq { color: var(--azul); padding-top: .05rem; }
.guia-txt { min-width: 0; }
.guia-idea .guia-txt { font-style: normal; }
.guia-ojo .guia-etq { color: var(--alerta); }
.guia-sol .pasos { margin-top: 0; }

.ej-sol-tit { font-size: 1.05rem; font-style: normal; font-weight: 500; color: var(--verde); margin: .6rem 0 .2rem; }
.ej-obs { margin-top: .75rem; padding: .55rem .85rem .6rem; border-left: 2px solid var(--azul); background: var(--azul-velo); font-size: .96rem; }
.ej-obs .etq { display: block; color: var(--azul); }

/* ------------------------------------------------------------ el compacto: una hoja de carta */

.compacto-plegado { margin-top: .75rem; border-top: 1px solid var(--filete-2); }
.compacto-sum { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; padding: .5rem 0 .35rem; }
.compacto-sum::-webkit-details-marker { display: none; }
.compacto-sum-etq { letter-spacing: .12em; font-weight: 600; color: var(--azul); font-size: .82rem; font-family: var(--f-mono); text-transform: uppercase; }
.compacto-sum-n { font-style: normal; color: var(--crema-3); font-size: .92rem; }

.compacto {
  margin: .4rem 0 .6rem;
  padding: .9rem 1.2rem 1.1rem 1.6rem;
  border: 1px solid var(--filete);
  border-left: 3px solid var(--azul);
  border-radius: 2px;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.56em - 1px), color-mix(in srgb, var(--azul) 14%, transparent) calc(1.56em - 1px), color-mix(in srgb, var(--azul) 14%, transparent) 1.56em),
    var(--hoja);
  background-position: 0 .55rem;
}
.compacto-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; margin-bottom: .3rem; }
.compacto-etq { letter-spacing: .12em; color: var(--azul); font-weight: 600; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.compacto-sub { font-style: normal; color: var(--crema-3); font-size: .9rem; }
.compacto-cuerpo { line-height: 1.56; }
.compacto-cuerpo p + p { margin-top: 0; }
.compacto-cuerpo::after { content: '■'; display: block; text-align: right; font-size: .6rem; color: var(--crema-2); }

@media (max-width: 620px) {
  .ej { padding: .9rem .85rem 1rem; }
  .guia-fila { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .ej-bloque-rom { min-width: 1.8rem; font-size: 1.9rem; }
  .compacto { padding-left: 1rem; }
}

.ej-guia .pasos, .ej-sol .pasos { margin-top: .2rem; }