/* Latina Pizza · Resumen: cuadros con los números del período y avisos de lo que hay que atender.
   El cuadro del mes va en el azul del logo con una línea roja que avanza con los días. */

/* ---------- Cuadros ---------- */
.res-cuadros { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-cuadro {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 16px 16px 18px; background: var(--paper); border-radius: 14px; box-shadow: var(--sombra);
  color: var(--ink); text-decoration: none;
}
.res-etq { color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.res-cifra {
  font-size: clamp(1.55rem, 1.25rem + 0.9vw, 2rem); font-weight: 800; font-stretch: 118%; letter-spacing: -0.02em;
  line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: 4px;
}
.res-cifra-mal { color: var(--tomato); }
.res-cuadro small { color: var(--ink-2); font-size: 0.8125rem; line-height: 1.4; }
.res-ir { margin-top: auto; padding-top: 6px; color: var(--basil-txt); font-size: 0.8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.res-cuadro-enlace { transition: box-shadow 0.15s; }
.res-cuadro-enlace:hover { box-shadow: 0 1px 2px rgba(23, 27, 54, 0.08), 0 12px 28px rgba(23, 27, 54, 0.14); }

/* El mes y la fecha */
.res-periodo { grid-column: 1 / -1; background: var(--azul); color: #fff; overflow: hidden; padding-bottom: 22px; gap: 2px; }
.res-periodo-quien { color: rgba(255, 255, 255, 0.72); font-size: 0.875rem; font-weight: 600; }
.res-periodo-tit { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.05rem); line-height: 1.12; letter-spacing: -0.01em; margin: 2px 0; }
.res-periodo-tit span { font-weight: 400; color: rgba(255, 255, 255, 0.62); }
.res-periodo-fecha { color: rgba(255, 255, 255, 0.92); font-size: 0.9375rem; }
.res-periodo small { color: rgba(255, 255, 255, 0.72); margin-top: auto; padding-top: 6px; }
.res-periodo-linea { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255, 255, 255, 0.16); }
.res-periodo-linea > span { display: block; height: 100%; background: var(--rojo); }

@media (max-width: 699px) {
  .res-cuadros[data-n="4"] > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 700px) {
  .res-cuadros { gap: 14px; }
  .res-cuadro { padding: 18px 18px 20px; }
  .res-periodo { padding-bottom: 24px; }
  .res-cuadros[data-n="5"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .res-cuadros[data-n="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .res-periodo { grid-column: auto; }
  .res-cuadros[data-n="5"] { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
  .res-cuadros[data-n="4"] { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
}

/* ---------- Avisos ---------- */
.res-avisos { gap: 6px; }
.res-avisos h2 { display: flex; align-items: center; gap: 10px; }
.res-avisos-n {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--rojo); color: #fff;
  font: 700 0.8125rem/24px var(--ff); text-align: center; font-variant-numeric: tabular-nums;
}
.res-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.res-lista li + li { border-top: 1px solid var(--line-2); }
.res-aviso {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: start; gap: 2px 12px;
  padding: 12px 6px; color: var(--ink); text-decoration: none; border-radius: 8px;
}
a.res-aviso:hover { background: var(--flour); }
a.res-aviso:hover .res-aviso-ir { text-decoration-thickness: 2px; }
.res-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); margin-top: 0.42em; }
.res-t-falta .res-punto { background: var(--tomato); }
.res-t-aviso .res-punto { background: var(--crust); }
.res-t-bien .res-punto { background: var(--ok); }
.res-aviso-txt { display: grid; gap: 2px; min-width: 0; }
.res-aviso-txt b { font-weight: 650; }
.res-t-falta .res-aviso-txt b { color: var(--tomato); }
.res-aviso-txt small { color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }
.res-aviso-ir { color: var(--basil-txt); font-weight: 600; font-size: 0.875rem; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 559px) {
  .res-aviso { grid-template-columns: 10px minmax(0, 1fr); }
  .res-aviso-ir { grid-column: 2; margin-top: 4px; }
}