/**
 * base.css — LA BASE: reset + estructura, y ORQUESTADOR de las primitivas. Es la capa 1 del
 * sistema de diseño (base → theme-core → theme-app; ver css/CLAUDE.md).
 *
 * Dos mundos de CSS en el framework:
 *   • PRIMITIVAS (siempre): tokens (base/tokens.css — la cadena Primitiva→Semántico→Componente)
 *     y utilidades reutilizables (table, card, button, input, responsive, alert, badge). Se cargan SIEMPRE —
 *     el host carga este base.css y él @importa cada una. Sirven en HTML crudo, sin montar ningún JS.
 *   • COMPONENTES (bajo demanda): tabs/form/modal/toast cargan su CSS junto a su JS con ensure(),
 *     la primera vez que una vista usa su tipo de nodo. NO van aquí. (button y datatable son
 *     solo-JS: su CSS —.og-btn / .og-table— es primitiva base, porque se usa en HTML crudo.)
 *
 * Los @import DEBEN ir al inicio del archivo (regla CSS). tokens.css va PRIMERO. Un theme NO se
 * carga aquí: lo inyecta la instancia según config.theme.name (bajo demanda; ver css/CLAUDE.md).
 */
@import url('base/tokens.css');
@import url('base/table.css');
@import url('base/card.css');
@import url('base/button.css');
@import url('base/input.css');
@import url('base/responsive.css');
@import url('base/alert.css');
@import url('base/badge.css');
@import url('base/section.css');
@import url('base/icon.css');

/* Los tokens (la cadena Primitiva→Semántico→Componente) viven en base/tokens.css. Aquí
   base.css solo aplica la ESTRUCTURA: reset, layout y las utilidades. Un theme sobreescribe
   variables (nunca reglas), scoped por [data-theme]; ver css/CLAUDE.md. */

/* ── El CANVAS del documento (fuera de .og-instance) ─────────────────────────────────────
   `.og-instance` mide `--og-shell-h` (100dvh) y pinta su propio fondo, pero es un DESCENDIENTE
   de <html>/<body> — cuando el móvil hace overscroll/rubber-band (o el navegador enseña la zona
   de la safe-area sin `viewport-fit=cover`), lo que se ve NO es #og-app: es el canvas de
   <html>, que sin esto se queda blanco por defecto pase lo que pase el tema. `color-scheme` le
   dice además al navegador con qué pintar TODO lo que él controla y el CSS no cubre (barras de
   scroll nativas, controles de formulario, ese mismo canvas de overscroll en iOS/Android).
   `data-mode` en <html> lo pone `instance.js` (mirror del data-mode de la instancia; ver
   `core/CLAUDE.md` → instance.js), no el theme — así sigue siendo la instancia quien manda. */
html {
  background: var(--og-white);
  color-scheme: light;
}
html[data-mode="dark"] {
  background: var(--og-black);
  color-scheme: dark;
}

.og-instance {
  font-family: var(--og-font);
  font-size: var(--og-fs);
  color: var(--og-fg);
  box-sizing: border-box;
}
.og-instance *, .og-instance *::before, .og-instance *::after { box-sizing: inherit; }

/* ── Layout: sidebar ─────────────────────────────────────────────────────── */

.og-layout-sidebar {
  display: grid;
  grid-template-columns: var(--og-nav-w) 1fr;
  /* `minmax(0, 1fr)` y no `1fr` a secas: el default de una fila `1fr` es `minmax(auto, 1fr)`, o sea
     que NO puede encoger por debajo de su contenido — es el gemelo en grid del `min-width:0` de
     flex. Sin esto, el `overflow-y:auto` del .og-content no llega a activarse nunca. */
  grid-template-rows: var(--og-header-h) minmax(0, 1fr);
  grid-template-areas: "nav header" "nav content";
  /* Altura FIJA (no min-height), igual que el iconbar y por lo mismo: así el content (la fila 1fr)
     hace scroll INTERNO y el header queda siempre visible, sin position:fixed. Con `min-height` el
     grid crecía con su contenido, el que scrolleaba era la PÁGINA, y una vista a pantalla completa
     —un chat con su cabecera y su campo de escribir— no podía existir: su pie se iba fuera de la
     ventana. Sale del token `--og-shell-h` para que el host lo re-apunte donde el chasis no sea
     dueño de la ventana (WordPress). `100vh` primero, de respaldo para navegadores sin `dvh`. */
  height: 100vh;
  height: var(--og-shell-h);
  background: var(--og-bg);
}

.og-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: calc(var(--og-space) * 1.5);
  padding: 0 calc(var(--og-space) * 2);
  border-bottom: 1px solid var(--og-border);
  background: var(--og-bg);
}
.og-header-title { font-weight: 600; }

.og-nav-toggle {
  display: none;
  border: 0; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--og-fg);
}

/* Botón de modo claro/oscuro: a la derecha del header (margin-left:auto lo empuja). Sin él (gate
   de permiso `theme.toggleCan`), el que empuja es el de salir: si no, se quedaba pegado al título. */
.og-mode-toggle, .og-header > .og-logout:not(.og-mode-toggle ~ *) {
  margin-left: auto;
}
.og-mode-toggle {
  border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--og-fg);
  padding: calc(var(--og-space) * .5); border-radius: var(--og-radius);
}
.og-mode-toggle:hover { background: color-mix(in oklch, var(--og-ink) 8%, transparent); }

.og-nav {
  grid-area: nav;
  background: var(--og-nav-bg);
  border-right: 1px solid var(--og-border);
  padding: var(--og-space);
  overflow-y: auto;
}
/* Sidebar: el MENÚ hace scroll por dentro y el PIE (.og-nav-foot, las versiones) queda fijo abajo,
   haya los items que haya. El aside ya no scrollea: lo hace su hijo. */
.og-layout-sidebar .og-nav { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.og-nav-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--og-space); }
.og-nav-foot {
  flex: none;
  padding: calc(var(--og-space) * .75) calc(var(--og-space) * 1.5);
  border-top: 1px solid var(--og-border);
  font-size: .75em; color: var(--og-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.og-nav-foot:empty { display: none; }
.og-nav-item {
  display: flex; align-items: center; gap: var(--og-space);
  padding: calc(var(--og-space) * 1.25) calc(var(--og-space) * 1.5);
  border-radius: var(--og-radius);
  color: var(--og-fg); text-decoration: none;
  cursor: pointer;
}
.og-nav-item:hover { background: color-mix(in oklch, var(--og-ink) 8%, transparent); }
.og-nav-item.is-active { background: var(--og-primary); color: var(--og-on-primary); }
.og-nav-icon { width: 1.25em; text-align: center; }

/* Submenú acordeón: un grupo = botón (mismo look que un item) + lista colapsable de hijos.
   Minimalista: toggle por clase .is-open (sin animación de altura), chevron que rota. */
.og-nav-group-btn {
  display: flex; align-items: center; gap: var(--og-space); width: 100%;
  padding: calc(var(--og-space) * 1.25) calc(var(--og-space) * 1.5);
  border: 0; background: transparent; border-radius: var(--og-radius);
  color: var(--og-fg); font: inherit; text-align: left; cursor: pointer;
}
.og-nav-group-btn:hover { background: color-mix(in oklch, var(--og-ink) 8%, transparent); }
/* Chevron ▸ (bordes CSS, hereda currentColor); rota 90° al abrir. */
.og-nav-chevron {
  margin-left: auto; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor; opacity: .5;
  transition: transform .15s ease;
}
.og-nav-group.is-open .og-nav-chevron { transform: rotate(90deg); }
/* Hijos: ocultos por defecto; visibles solo con .is-open en el grupo. Al abrirse se dibujan
   como un RECUADRO PUNTEADO sangrado — la sangría sola no bastaba: con iconos delante, los
   hijos parecían items normales del menú y no se veía que fueran de un desplegable. Todo por
   tokens (--og-nav-group-*) para que un theme lo re-vista sin tocar esta regla. */
.og-nav-group-items {
  display: none;
  margin: var(--og-space-xs) 0 var(--og-space-xs) var(--og-nav-group-indent);
  padding: var(--og-nav-group-pad);
  border: var(--og-1) var(--og-nav-group-bd-style) var(--og-nav-group-bd);
  border-radius: var(--og-nav-group-radius);
  background: var(--og-nav-group-bg);
  font-size: var(--og-nav-group-fs);
}
.og-nav-group.is-open .og-nav-group-items { display: block; }
/* Separador de menú: rótulo pequeño en mayúsculas que agrupa items (no navegable). Color
   TENUE (≈ #b0b0c0 en claro; ink 30% adapta el mismo tono al modo — más apagado que --og-muted). */
.og-nav-sep {
  padding: calc(var(--og-space) * 1.5) calc(var(--og-space) * 1.5) var(--og-space);
  font-size: .68em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in oklch, var(--og-ink) 30%, var(--og-base));
}
.og-nav-sep:first-child { padding-top: var(--og-space); }
/* Zona SIN rótulo: separa con aire (como WordPress), no con un título vacío. Sin esto, apagar el
   nombre de una franja pegaba dos zonas y el menú volvía a leerse como una lista corrida. Una línea
   fina lo hace legible sin nombrar nada; el alto es el del padding, no el de un texto vacío. */
.og-nav-sep--gap {
  padding: 0; margin: var(--og-space) calc(var(--og-space) * 1.5);
  border-top: 1px solid color-mix(in oklch, var(--og-ink) 12%, var(--og-base));
}
.og-layout-iconbar .og-nav-sep { display: none; } /* bottom nav: sin separadores entre iconos */

/* Divisor con rótulo centrado (líneas a los lados). Reutilizable en cualquier vista para
   separar secciones. Uso: <div class="og-rule"><span>Título</span></div>. */
.og-rule { display: flex; align-items: center; gap: var(--og-space-md); margin: var(--og-space-lg) 0; }
.og-rule::before, .og-rule::after { content: ""; flex: 1; height: 1px; background: var(--og-border); }
.og-rule > span {
  font-size: .68em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in oklch, var(--og-ink) 40%, var(--og-base));
}
/* Iconos SVG (OG.icons): heredan el color del item vía currentColor (activo → primary). */
.og-nav-icon svg { width: var(--og-nav-icon); height: var(--og-nav-icon); display: block; }
/* En un submenú el icono encoge lo mismo que el texto: si solo baja la letra, el icono queda
   pesado al lado y el hijo vuelve a leerse como un item de primer nivel. */
.og-nav-group-items .og-nav-icon svg { width: var(--og-nav-group-icon); height: var(--og-nav-group-icon); }

/* min-height:0 permite que el content encoja y haga scroll interno en layouts de altura
   fija (iconbar), en vez de estirar el track del grid. */
.og-content { grid-area: content; padding: calc(var(--og-space) * 3); overflow-y: auto; min-height: 0; }
/* PADDING POR BREAKPOINT (Lenin, 2026-08-31): el respiro que se agradece en escritorio es ancho
   perdido en un móvil — visto en `.og-view--account-home`, pero el padding fijo es de `.og-content`
   entero, así que afectaba a TODAS las vistas por igual. Escala x3 → x2 → x1, mismos breakpoints
   canónicos de `grid.css` (desktop-first, `max-width`). `.og-layout-bare .og-content{padding:0}`
   (más abajo) no lo pisa esta escala: gana siempre por ir sobre una clase de layout completa, más
   específica que cualquiera de estos media queries. `mini` (≤400px) no se toca — nadie pidió bajar
   de x1 ahí todavía. */
@media (max-width: 1024px) { .og-content { padding: calc(var(--og-space) * 2); } }
@media (max-width: 768px)  { .og-content { padding: calc(var(--og-space) * 1); } }

/* ── Layout: iconbar ─────────────────────────────────────────────────────── */
/* Bottom nav mobile-first: header arriba, content, barra de iconos abajo. El .og-nav
   es el mismo que llena nav.js; aquí se re-presenta como fila de iconos. */
.og-layout-iconbar {
  display: grid;
  grid-template-rows: var(--og-header-h) minmax(0, 1fr) auto;
  grid-template-areas: "header" "content" "nav";
  /* Altura FIJA del viewport (no min-height): así el content (fila 1fr) hace scroll
     INTERNO y la barra (fila auto) queda siempre visible abajo, sin position:fixed.
     Del mismo token que el sidebar (`--og-shell-h`, `100dvh` por defecto: el viewport
     dinámico, que descuenta la barra de direcciones del navegador móvil). */
  height: 100vh;
  height: var(--og-shell-h);
  background: var(--og-bg);
}
.og-layout-iconbar .og-header { justify-content: center; } /* sin toggle: título centrado */

.og-layout-iconbar .og-nav {
  grid-area: nav;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 0;
  background: var(--og-nav-bg);
  border-top: 1px solid var(--og-border);
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0); /* notch inferior en móvil */
  overflow-x: auto;
}
.og-layout-iconbar .og-nav-item {
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  padding: calc(var(--og-space) * 0.75) var(--og-space);
  border-radius: 0;
  color: var(--og-muted);
  font-size: 0.7em;
  text-align: center;
}
.og-layout-iconbar .og-nav-icon { width: auto; font-size: 1.4em; }
.og-layout-iconbar .og-nav-icon svg { width: 24px; height: 24px; }
.og-layout-iconbar .og-nav-item:hover { background: color-mix(in oklch, var(--og-ink) 8%, transparent); }
/* Activo = solo color de marca en icono+label (sin bloque de fondo, estilo app móvil). */
.og-layout-iconbar .og-nav-item.is-active { background: transparent; color: var(--og-primary); }

/* bare: sin chasis; hereda el ancho del hueco donde se monta (Woo tab, metabox…) */
.og-layout-bare { display: block; }
.og-layout-bare .og-content { padding: 0; }
.og-view + .og-view { margin-top: calc(var(--og-space) * 2); }

.og-nav-scrim { display: none; }

.og-hidden { display: none !important; }

/* Sin permiso en modo `disable` (OG.auth.disable): se ve pero no responde. El backend lo
   comprueba igual; esto solo evita ofrecer lo que va a dar 403. */
.og-denied { opacity: .5; cursor: not-allowed; }
.og-denied, .og-denied * { pointer-events: none; }

.og-view-error, .og-nav-error, .og-view-denied {
  padding: var(--og-space); border-radius: var(--og-radius);
  /* Variante de error DERIVADA de la semilla --og-red (se adapta sola al modo). */
  background: color-mix(in oklch, var(--og-red) 14%, var(--og-base));
  color:      color-mix(in oklch, var(--og-red) 55%, var(--og-ink));
}

/* ── Móvil: en SIDEBAR el nav se vuelve drawer ───────────────────────────── */
/* TODO acotado a .og-layout-sidebar: si no, este drawer empujaba fuera de pantalla
   también al .og-nav del iconbar (bug: el menú desaparecía al reducir la ventana). */
@media (max-width: 768px) {
  .og-layout-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "content";
  }
  .og-layout-sidebar .og-nav-toggle { display: block; }
  .og-layout-sidebar .og-nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--og-nav-w);
    transform: translateX(-100%); transition: transform .2s ease; z-index: var(--og-z-nav);
  }
  .og-layout-sidebar.og-nav-open .og-nav { transform: translateX(0); }
  .og-layout-sidebar.og-nav-open .og-nav-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); z-index: var(--og-z-backdrop);
  }
}