/* ══════════════════════════════════════════════════════════════════════════
   PRIMERO UNT · reglas propias de "Lo hecho"
   Extiende primero.css, que ya trae la portada, los filtros, .eje y .ficha.
   Acá sólo lo que esta página agrega: el tablero de la portada y el estado
   de cada acción. No redefine nada del sistema.
   ══════════════════════════════════════════════════════════════════════════ */

/* Mismo recurso que la portada: el salto sólo existe si hay ancho. */
.salto-md { display: none; }
@media (min-width: 40rem) { .salto-md { display: inline; } }

/* ── Tablero de la portada ─────────────────────────────────────────────────
   Cuatro cifras sobre azul. No es un gráfico: son datos que se leen de un
   vistazo y ordenan lo que viene abajo — el balance completo, con lo que
   falta incluido, que también se publica. Sin barras, porque acá no hay
   avance que mostrar. */

.tablero {
  display: grid;
  gap: 1px;
  background: var(--az-filete);
  border: 1px solid var(--az-filete);
  margin-top: 1.25rem;
}
@media (min-width: 34rem) { .tablero { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .tablero { grid-template-columns: repeat(4, 1fr); } }

.tablero__uno {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--azul-primero);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.tablero__uno .etiqueta { color: var(--az-etiqueta); }

.tablero__n {
  font-weight: 600;
  font-size: clamp(2.5rem, 8vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--papel);
}

/* La nota metodológica cierra la portada: dice de dónde salen las acciones y
   por qué están agrupadas así. Va en el gris claro de la portada azul, no en
   papel, porque es contexto y no titular. */
.portada__nota {
  margin-top: clamp(1.75rem, 5vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--az-filete);
  color: var(--az-suave);
  max-width: 46em;
}

/* ── Estado de cada acción ────────────────────────────────────────────────
   La ficha del plan lleva barra de avance; ésta no la necesita: una acción
   cumplida no tiene porcentaje. El estado ocupa el lugar del kicker y carga
   la semántica de color del sistema — azul lo hecho, celeste lo que sigue.

   "En curso" va en --enlace y no en --celeste-avance: sobre papel el celeste
   da 2,3:1 y esto es texto de 11 px. Es la misma sustitución que el resto
   del sitio hace para cualquier celeste que sea letra. */

.ficha__kicker--hecho    { color: var(--azul-primero); }
.ficha__kicker--curso    { color: var(--enlace); }
.ficha__kicker--porhacer { color: var(--etiqueta); }

/* Sin barra de avance, el texto arrancaba pegado al titular. */
.ficha--logro .ficha__bloques { margin-top: .75rem; }
.ficha--logro .ficha__cifras { margin-top: .9rem; }

/* ── Cierre ────────────────────────────────────────────────────────────── */

.cierre__bajada { margin-top: 1.75rem; }
.cierre__barra { margin-block: clamp(2.25rem, 6vw, 3rem) clamp(2rem, 5vw, 2.5rem); }