/**
 * grid.css — sistema de columnas responsive por breakpoint + gap.
 *
 * Breakpoints canónicos del framework (desktop-first, max-width; los MISMOS en todo el
 * sistema — no inventes otros):
 *   desktop  = default            (> 1024px)
 *   tablet   = max-width: 1024px
 *   mobile   = max-width: 768px
 *   mini     = max-width: 400px   ← celulares de viewport muy pequeño (antiguos/compactos)
 *
 * DOS formas de usarlo:
 *
 *  1) Rápida (degradación automática):   <div class="og-cols og-cols-4">
 *     4 en desktop → 2 en tablet → 1 en mobile. El caso de siempre, una sola clase.
 *
 *  2) Control por breakpoint (lo nuevo):
 *       <div class="og-cols og-desktop-4 og-tablet-3 og-mobile-2 og-mini-1">
 *     Defines SOLO los niveles que te importan; los demás heredan del más ancho definido.
 *     Cada clase og-{bp}-{n} solo ASIGNA una variable; los media queries eligen cuál gana.
 *     Añadir una columna más = una línea (un setter), sin tocar ningún media query. Es el
 *     patrón que evita el CSS a medida por vista y la explosión de clases.
 *
 * Gap: og-gap-{0..4} (múltiplos de --og-space). Ajusta el hueco sin CSS a medida.
 * Flush: og-cols-flush une las cards sin hueco con una sola línea entre ellas (ver abajo).
 *
 * FIJA, sin degradar: og-cols-fixed-{2,3} — el mismo número de columnas en TODO breakpoint,
 * nunca a 1. Opt-in, no reemplaza nada de arriba (ver su bloque, al final del archivo, para el
 * PARA QUÉ / CUÁNDO NO).
 */

.og-cols {
  display: grid;
  gap: var(--og-grid-gap, var(--og-space-md));
  /* desktop (default): prefiere desktop; si no está definido, cae al nivel más ancho que sí. */
  grid-template-columns: repeat(var(--og-cols-desktop, var(--og-cols-tablet, var(--og-cols-mobile, var(--og-cols-mini, 1)))), minmax(0, 1fr));
}

/* Setters de columnas: SOLO asignan la variable de su breakpoint. Escala 1..6 (amplía con
   una línea; el móvil rara vez pasa de 4 y el mini de 3, por eso llegan hasta ahí). */
.og-desktop-1{--og-cols-desktop:1} .og-desktop-2{--og-cols-desktop:2} .og-desktop-3{--og-cols-desktop:3} .og-desktop-4{--og-cols-desktop:4} .og-desktop-5{--og-cols-desktop:5} .og-desktop-6{--og-cols-desktop:6}
.og-tablet-1 {--og-cols-tablet:1} .og-tablet-2 {--og-cols-tablet:2} .og-tablet-3 {--og-cols-tablet:3} .og-tablet-4 {--og-cols-tablet:4} .og-tablet-5 {--og-cols-tablet:5} .og-tablet-6 {--og-cols-tablet:6}
.og-mobile-1 {--og-cols-mobile:1} .og-mobile-2 {--og-cols-mobile:2} .og-mobile-3 {--og-cols-mobile:3} .og-mobile-4 {--og-cols-mobile:4}
.og-mini-1   {--og-cols-mini:1} .og-mini-2   {--og-cols-mini:2} .og-mini-3   {--og-cols-mini:3}

/* Gap (escala de espaciado semántica; combínalo con lo de arriba). */
.og-gap-0{--og-grid-gap:0} .og-gap-1{--og-grid-gap:var(--og-space-sm)} .og-gap-2{--og-grid-gap:var(--og-space-md)} .og-gap-3{--og-grid-gap:var(--og-space-lg)} .og-gap-4{--og-grid-gap:var(--og-space-xl)}

/* ── FLUSH: cards pegadas (sin hueco) con UNA sola línea entre ellas ──────────────────────
   Con gap 0 los bordes vecinos se sumarían (doble raya). El hack: cada card dibuja SOLO su
   borde derecho + inferior, y el contenedor pone el superior + izquierdo. Así toda unión es
   una línea única (nunca doble) y el bloque queda cerrado por sus cuatro lados. Agnóstico al
   nº de columnas y a que una fila se envuelva abajo (cada card siempre aporta right+bottom).
   Las cards pierden su radio para que la unión sea limpia. Se combina: og-cols og-cols-4 og-cols-flush. */
.og-cols-flush {
  --og-grid-gap: 0;
  border-top:  1px solid var(--og-card-bd);
  border-left: 1px solid var(--og-card-bd);
}
.og-cols-flush > .og-card {
  border-width: 0 1px 1px 0;   /* solo derecha + abajo; el vecino no repite el suyo → 1 raya */
  border-radius: 0;
}
/* Sin salto en hover: una card pegada que se eleva rompería la unión y dejaría ver el hueco.
   Se neutraliza el lift/sombra/borde del hover (equivale a og-card-static, pero implícito aquí). */
.og-cols-flush > .og-card:hover {
  transform: none;
  box-shadow: var(--og-card-shadow);
  border-color: var(--og-card-bd);
}

/* ── Media queries: cada nivel reescribe QUÉ variable manda (prefiere el suyo, si no el
   nivel más ANCHO definido). El orden 1024 → 768 → 400 importa: a 380px aplican los tres
   y gana el último (mini), que es lo que queremos. ─────────────────────────────────── */
@media (max-width: 1024px) {
  .og-cols { grid-template-columns: repeat(var(--og-cols-tablet, var(--og-cols-desktop, var(--og-cols-mobile, var(--og-cols-mini, 1)))), minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .og-cols { grid-template-columns: repeat(var(--og-cols-mobile, var(--og-cols-tablet, var(--og-cols-desktop, var(--og-cols-mini, 1)))), minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .og-cols { grid-template-columns: repeat(var(--og-cols-mini, var(--og-cols-mobile, var(--og-cols-tablet, var(--og-cols-desktop, 1)))), minmax(0, 1fr)); }
}

/* ── Retrocompat / atajo: degradación automática con UNA clase (og-cols-N). Setea las 4
   variables de golpe; usa ESTE sistema o el de por-breakpoint, no ambos en el mismo nodo. ── */
.og-cols-1 { --og-cols-desktop:1; --og-cols-tablet:1; --og-cols-mobile:1; --og-cols-mini:1; }
.og-cols-2 { --og-cols-desktop:2; --og-cols-tablet:2; --og-cols-mobile:1; --og-cols-mini:1; }
.og-cols-3 { --og-cols-desktop:3; --og-cols-tablet:2; --og-cols-mobile:1; --og-cols-mini:1; }
.og-cols-4 { --og-cols-desktop:4; --og-cols-tablet:2; --og-cols-mobile:1; --og-cols-mini:1; }

/* ── FIJA: el MISMO número de columnas en TODO breakpoint, sin degradar — NUNCA a 1 (Lenin,
   2026-09-01: "debe haber una clase que haga eso... que sea permanente"). Opt-in, CONVIVE con
   `og-cols-N`/`og-{bp}-N` de arriba sin tocar una sola línea de las que ya existen: ni una regla
   nueva las pisa, ni una vieja cambia de sitio.
   PARA QUÉ existe: contenido que se LEE MEJOR en columnas estrechas que en una sola ancha — dos
   cifras cortas una junto a la otra, por ejemplo (el caso que la trajo: Gasto/Ingreso del
   dashboard de cuenta) — donde apilar en mobile/mini no gana legibilidad, solo desperdicia el
   ancho de pantalla que ya había.
   CUÁNDO NO USARLA: contenido con texto LARGO (frases, nombres sin acortar, párrafos). Partido en
   dos columnas de ~170px en un móvil de 390px se vuelve ilegible SIN remedio — y con esta clase no
   hay breakpoint al que caer para arreglarlo, es justamente lo que promete "permanente". Para eso
   sigue siendo `og-cols-N`/`og-{bp}-N`, que sí apilan cuando ya no cabe.
   MECÁNICA — el MISMO truco que `.og-cols-N` (setear las 4 variables de golpe), pero IGUALADAS en
   vez de degradadas: `.og-cols` y sus tres `@media` de arriba siguen leyendo estas variables
   exactamente igual que hoy — con las 4 en el mismo número, da igual cuál gane en cada ancho,
   el resultado es el mismo número de columnas siempre. No hace falta pisar `grid-template-columns`
   una segunda vez ni jugar con el orden de cascada: el propio mecanismo de variables ya resuelve.
   TOPE EN 3, no en 6 como los setters de arriba: pensada para MUY POCAS columnas que de verdad no
   deban apilarse nunca. A partir de 4 fijas, un móvil angosto ya no tiene ancho real que repartir
   y forzarlo cae en el mismo problema que el párrafo de arriba avisa de evitar. Si algún día hace
   falta más, se amplía con una línea, igual que `.og-desktop-{1..6}`. */
.og-cols-fixed-2 { --og-cols-desktop:2; --og-cols-tablet:2; --og-cols-mobile:2; --og-cols-mini:2; }
.og-cols-fixed-3 { --og-cols-desktop:3; --og-cols-tablet:3; --og-cols-mobile:3; --og-cols-mini:3; }