/* ============================================================
   LUKI — Layout tokens
   Grid de columnas + breakpoints + anchos de contenido.

   Breakpoints (usar estos valores literales en media queries):
   - Desktop            ≥ 1280px   → 12 columnas · gutter 24 · margen 32
   - Tablet horizontal  1024-1279  → 8 columnas  · gutter 20 · margen 24  (mismo layout que desktop, fluido)
   - Tablet vertical    768-1023   → 8 columnas  · gutter 20 · margen 24  (nav: rail + flyout en overlay)
   - Mobile             < 768      → 4 columnas  · gutter 16 · margen 16  (nav: cabecera + tab bar + drawer)
   ============================================================ */

:root {
  /* Breakpoints (informativos — las media queries usan los literales) */
  --mic-bp-mobile: 768px;
  --mic-bp-tablet-v: 1024px;
  --mic-bp-desktop: 1280px;

  /* Grid — cambia por breakpoint vía las media queries de abajo */
  --mic-grid-cols: 12; /* @kind other */
  --mic-grid-gutter: 24px;
  --mic-page-margin: 32px;

  /* Anchos de contenido */
  --mic-content-max: 1440px;   /* ancho máximo del área de contenido */
  --mic-prose-max: 720px;      /* texto corrido (informes, descripciones) */

  /* Zonas fijas del shell */
  --mic-rail-w: 96px;          /* rail de iconos (nivel 1) */
  --mic-flyout-w: 264px;       /* menú flyout (nivel 2) */
  --mic-tabbar-h: 64px;        /* tab bar inferior en mobile */
  --mic-header-h: 77px;        /* cabecera (breadcrumb + acciones) */
}

@media (max-width: 1279px) {
  :root {
    --mic-grid-cols: 8; /* @kind other */
    --mic-grid-gutter: 20px;
    --mic-page-margin: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --mic-grid-cols: 4; /* @kind other */
    --mic-grid-gutter: 16px;
    --mic-page-margin: 16px;
  }
}

/* Utilidad: contenedor de página + rejilla de columnas.
   <div class="mic-page"><div class="mic-grid"> … </div></div> */
.mic-page {
  max-width: var(--mic-content-max);
  margin: 0 auto;
  padding-left: var(--mic-page-margin);
  padding-right: var(--mic-page-margin);
}
.mic-grid {
  display: grid;
  grid-template-columns: repeat(var(--mic-grid-cols), minmax(0, 1fr));
  gap: var(--mic-grid-gutter);
}