/*
  reticula.css — el bloque 3 de la landing, el elemento firma.
  Retícula de siete casilleros (la semana) + tira de diez casilleros
  (las diez semanas). Referencia visual: papel con casilleros para
  tachar, no gráfico de dashboard ni barra de progreso.

  Semántica: dos listas. La de la semana es información real (cada <li>
  lleva el día y qué llega como texto); la de las diez semanas es
  decorativa — el texto que la explica va en el párrafo de abajo, así
  que la lista en sí queda aria-hidden.
*/

.bloque-cadencia {
  max-width: var(--medida-ancha);
  margin-inline: auto;
  padding-inline: var(--e-4);
  padding-block: var(--ritmo-bloque);
}

.bloque-cadencia__titulo {
  /* El bloque 3 es el elemento firma y el segundo más importante de la
     página después del hero — el h2 por defecto de base.css (t-xl,
     25-30px) lo dejaba más chico que el texto del bloque 4, invirtiendo
     la jerarquía. --t-elemento-firma es su propio tamaño, no el de h2
     genérico: peso sí se queda el que trae h2 (700). */
  font-size: var(--t-elemento-firma);
  text-align: center;
  margin-bottom: var(--e-6);
}

/* ===== Los siete casilleros ===== */

.semana {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--e-2) var(--e-2);
}

.dia {
  aspect-ratio: 3 / 4; /* vertical, nunca cuadrado */
  border: var(--trazo) solid var(--contorno);
  border-radius: var(--radio-casillero);
  padding: var(--e-2);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);

  /* Entra como objeto completo, ya en su color final: la transición es
     de visibilidad y posición, nunca de color. No es una animación de
     llenado. El disparo (cuándo entra) y el estado inicial oculto ya
     no viven acá: los pone entrada.js cuando el bloque se acerca al
     viewport, nunca la CSS de forma incondicional — así, sin
     JavaScript, los siete casilleros se ven de entrada, no quedan en
     opacity:0 para siempre. El cálculo del desfase (--i, --paso-
     entrada-celda) sigue siendo este, entrada.js solo lo copia tal
     cual al armar el estilo inline. */
}

.dia__nombre {
  font-size: var(--t-xs);
  font-weight: var(--peso-enfasis);
  letter-spacing: var(--tracking-etiqueta);
  line-height: var(--interlineado-subtitulo);
  text-align: center;
}

.dia__contenido {
  font-size: var(--t-xs);
  line-height: var(--interlineado-subtitulo);
  color: var(--texto-secundario);
  text-align: center;
  /* "clase, 10 a 20 min" partía dejando "min" solo en la segunda línea.
     pretty evita esa palabra huérfana al final. */
  text-wrap: pretty;
  /* "nada" entra en una línea; "clase, 10 a 20 min" o "versión corta,
     5 min" necesitan dos. La celda exterior mide siempre lo mismo
     (aspect-ratio la fija), pero .dia__marca es flex:1 y absorbe lo
     que sobra — con "nada" en una sola línea le sobraba más alto, y
     los casilleros vacíos leían más "llenos" de marca que los otros.
     Reservar la altura de dos líneas siempre, tenga el texto una o
     dos, hace que .dia__marca reciba exactamente el mismo espacio en
     los siete casilleros sin depender de cuánto texto haya. */
  min-height: calc(var(--t-xs) * var(--interlineado-subtitulo) * 2);
}

/* La zona de color: el contorno del casillero ya resuelve el contraste
   (coral y salvia solos no llegan a 3:1 sobre crema), así que acá solo
   importa el relleno. flex:1 reparte el espacio disponible, pero el
   margin-block la achica un poco adentro de ese espacio: más aire
   arriba y abajo, para que lea papel con una marca adentro y no un
   mosaico de rectángulos de color pegados a los bordes. */
.dia__marca {
  flex: 1;
  margin-block: var(--e-2);
  border-radius: calc(var(--radio-casillero) - 2px); /* concéntrico con el casillero */
}

.dia--pleno .dia__marca { background: var(--acento); }
.dia--claro .dia__marca { background: var(--acento-suave); }
.dia--salvia .dia__marca { background: var(--logro); }

/* Vacío: mismo tamaño, mismo contorno exterior que los otros seis. La
   zona de color no queda vacía de verdad, lleva su propio contorno
   punteado — es una decisión (este día no llega nada), no un hueco. */
.dia--vacio .dia__marca {
  background: none;
  border: var(--trazo) dashed var(--contorno);
}

/* < 720px: rota a siete filas de ancho completo. Mismas clases, mismo
   marcado — la única "otra forma" real es que el <li> deja de ser una
   tarjeta vertical (aspect-ratio 3/4, texto arriba/marca/medio/texto
   abajo) para ser una tira horizontal (fila, día | marca | contenido).
   No es grid-auto-flow solo: grid-auto-flow reordena cómo se acomodan
   ítems dentro de una plantilla fija, y acá lo que cambia es la
   plantilla en sí (de 7 columnas a 1) y el eje del casillero (de
   columna a fila). Es el cambio mínimo posible sin otro componente:
   misma lista, mismas clases, dos bloques de grid distintos. */
@media (max-width: 719px) {
  .semana {
    grid-template-columns: 1fr;
    /* Fija la altura de fila con la más alta posible (Domingo, "lo que
       hiciste esta semana", dos líneas), en vez de dejar que cada fila
       mida lo que le pida su propio texto. Si una fila mide más que las
       otras, dice que ese día pesa más — y ninguno pesa más que otro.
       Cálculo: 2 líneas a interlineado-subtitulo (1.3) sobre --t-xs
       (hasta 15px) ≈ 39px, + padding vertical (2 × e-3 = 24px) ≈ 63px.
       4.5rem (72px) deja margen sin quedar suelto. */
    grid-auto-rows: 4.5rem;
    gap: var(--e-2);
  }

  .dia {
    aspect-ratio: auto;
    flex-direction: row;
    align-items: stretch;
    gap: var(--e-3);
    padding: var(--e-3);
  }

  .dia__nombre {
    flex: 0 0 5.25rem;
    text-align: left;
    display: flex;
    align-items: center;
  }

  .dia__marca {
    flex: 0 0 2.75rem;
  }

  .dia__contenido {
    flex: 1;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

/* ===== La tira de diez semanas ===== */

.semanas-bloque {
  margin-top: var(--ritmo-bloque);
  display: grid;
  /* 8 columnas (semanas 1-8) + 1 columna espaciadora (el corte) + 2
     columnas (semanas 9-10). El corte es una columna vacía, no un
     margen suelto: así el ancho es previsible en cualquier tamaño.

     Ancho fijo en rem, no 1fr: la retícula de siete es el elemento
     firma y tiene que dominar el bloque. Con columnas 1fr esta tira se
     estiraba a los mismos ~960px del contenedor y terminaba compitiendo
     con los siete casilleros de arriba en vez de quedar atrás. Con
     celdas chicas y fijas, la tira ocupa solo lo que necesita y queda
     pegada a la izquierda (el grid no reparte espacio que no le pedís):
     lo que competía era el ancho estirado, no el tamaño en sí, así que
     el tamaño de celda puede subir en desktop sin que vuelva a competir. */
  grid-template-columns: repeat(8, 1.5rem) var(--e-4) repeat(2, 1.5rem);
  column-gap: var(--e-1);
  row-gap: var(--e-3);

  /* Aparece entera, sin desfase entre celdas — a diferencia de los
     siete casilleros de arriba. Arranca justo cuando habría entrado
     una octava celda en esa secuencia, para que se sienta continuación
     y no un segundo momento aparte. Mismo criterio que .dia: el
     disparo y el estado inicial oculto los pone entrada.js, no esta
     hoja de forma incondicional. */
}

.semanas {
  grid-row: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.semana-mini {
  aspect-ratio: 3 / 4;
  border: var(--trazo) solid var(--contorno);
  border-radius: var(--radio-casillero);
}

/* Mismos colores en mobile y desktop: solo el tamaño de celda cambia
   por breakpoint (ver más abajo), el color no. */
.semana-mini--llena { background: var(--acento); }
.semana-mini--claro { background: var(--acento-suave); }

/* La semana 9 salta la columna espaciadora (la 9ª pista): así se abre
   el corte entre el grupo de ocho y el grupo de dos. La 10ª semana
   sigue de forma automática, en la pista siguiente. */
.semana-mini:nth-child(9) {
  grid-column: 10;
}

.semanas__nota {
  grid-row: 2;
  /* Debajo de toda la tira, empezando donde empieza (columna 1, no
     alineada con las dos últimas semanas): es una nota al pie de la
     retícula, cuelga de ella entera, no de un par de celdas puntual.
     max-width en vez de ocupar las 11 columnas evita que el texto se
     estire a lo ancho de toda la tira; sin margin ni justify-self
     puestos a propósito, el bloque por defecto arranca en el borde
     izquierdo del área (columna 1) y no se centra. */
  grid-column: 1 / -1;
  max-width: 28rem;
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  color: var(--texto-secundario);
}

/* Desktop: celdas más grandes (34px). El color es el mismo que en
   mobile (ver arriba); acá solo cambia el tamaño. */
@media (min-width: 720px) {
  .semanas-bloque {
    grid-template-columns: repeat(8, 2.125rem) var(--e-4) repeat(2, 2.125rem);
  }
}

/* entrada-pieza (opacity + translateY) está en base.css. */