/*
* Copia de despliegue del vocabulario Groumind. NO EDITAR A MANO.
*
* El workflow deploy-groumind-web.yml sube solo esta carpeta a Cloudflare Pages, asi que el
* bundle de brand/ no llega por ruta relativa: viaja una copia. Para que no envejezca en
* silencio, el contenido vive entre los marcadores de _embeber.mjs y se refresca con:
*
* node projects/_groumind/brand/_bundle.mjs
* node projects/_groumind/brand/_embeber.mjs projects/_groumind/outputs/sitio-web/groumind.css
*
* Fuente: projects/_groumind/brand/ (tokens.css, tokens-light.css, components.css).
*/
/* ═══ groumind.css embebido: inicio ═══ */
/*
* groumind.css v1.0.0 (generado el 2026-09-02 por _bundle.mjs)
*
* NO EDITAR A MANO. Fuentes: tokens.css, tokens-light.css, components.css en
* projects/_groumind/brand/. Regenerar con: node projects/_groumind/brand/_bundle.mjs
*
* Uso en un artefacto:
*
*
*
*
*
*
* Modo claro: . Seguir al sistema: data-theme="auto".
* Que clase va en cada caso: DESIGN.md (raiz del repo).
*/
/* ═══ 1. Tokens, modo oscuro (default) ═══ */
/*
* Groumind — Design Tokens (dark mode / default)
* Sistema de Identidad v1 · 2026-06
*
* Uso: importar este archivo en cualquier proyecto web/UI de Groumind.
* Para modo claro: importar también tokens-light.css con media query.
*
* @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
*/
:root {
/* ── FONTS ──────────────────────────────────────── */
--font-display: 'Space Grotesk', sans-serif;
--font-sans: 'IBM Plex Sans', sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
/* ── BRAND COLORS ───────────────────────────────── */
--color-brand: #2EC98A; /* Verde Mente — señal primaria. WCAG AAA 10.7:1 sobre #0C100E */
--color-brand-deep: #1B9E6E; /* Verde Profundo — para fondos claros */
--color-accent: #E6C896; /* Arena — SOLO contextos marca/marketing, nunca UI funcional */
--color-focus: rgba(46, 201, 138, 0.5); /* ring de foco */
/* Tinta sobre acento: lo que se dibuja ENCIMA del verde (tilde de un filtro elegido,
monograma del logo, glifo adentro de un chip verde). Existe desde 2026-08-13 porque
el prototipo del panel resolvia ese caso con un hex fijo (#08110C) y "todo color sale
de un token". El valor es el mismo casi negro del sistema y se midio en los dos modos,
no se copio: 8.98:1 sobre el Verde Mente en oscuro, 5.62:1 sobre el Verde Profundo en
claro. El reflejo equivocado es --surface-base, que sobre el verde de claro da 3.19:1
y sobre el de oscuro 2.13:1, debajo del piso. Lo mide _check-contraste.mjs. */
--on-brand: #0C100E;
/* ── STATUS COLORS ──────────────────────────────── */
--color-success: #2EC88A;
--color-success-soft: #0E2B1D;
--color-warning: #D4A444;
--color-warning-soft: #2B1F09;
--color-danger: #E05454;
--color-danger-soft: #2B1010;
--color-info: #5B9FD4;
--color-info-soft: #0E1F2B;
/* ── SURFACE (dark) ─────────────────────────────── */
--surface-base: #0C100E; /* Verde Noche — fondo base */
--surface-section: #0A0D0B; /* Abismo — secciones contenedoras */
--surface-panel: #10160F; /* Sotobosque — cards/paneles elevados */
--surface-raised: #141C18; /* Carbón — superficie raised */
--surface-card: #1B241F; /* Pizarra — cards y bordes raised */
/* ── TEXT (dark) ────────────────────────────────── */
/* --text-muted apunta a N-500 y no a N-600 por accesibilidad (2026-08-02):
N-600 (#67756C) sobre Verde Noche da 3.97:1, debajo del minimo AA de 4.5:1,
y el rol se usa para texto real (eyebrows, labels, notas al pie), no para
decoracion. N-500 da 5.6:1 sobre el fondo base y 4.7:1 sobre Pizarra, la
superficie mas clara del sistema. N-600 sigue en la rampa de abajo: cambia
a que neutral apunta el rol, no la paleta. */
--text-primary: #ECF1ED;
--text-secondary: #9AA8A0;
--text-muted: #808E86;
--text-faint: #48544C; /* solo decorativo: no pasa AA, nunca para texto */
--text-brand: #2EC98A;
/* ── BORDER (dark) ──────────────────────────────── */
--border-subtle: #1B241F;
--border-default: #2A332D;
--border-strong: #3D4D42;
--border-brand: #2EC98A;
/* ── NEUTRAL RAMP ───────────────────────────────── */
--n-0: #F6F8F5;
--n-50: #E9EDE8;
--n-100: #D9DED9;
--n-200: #C7CEC8;
--n-300: #B1BBB4;
--n-400: #9AA8A0;
--n-500: #808E86;
--n-600: #67756C;
--n-700: #48544C;
--n-800: #2A332D;
/* ── TYPOGRAPHY SCALE ───────────────────────────── */
/* display-xl: Space Grotesk 700, 96px */
--text-display-xl-size: 96px;
--text-display-xl-weight: 700;
--text-display-xl-lh: 0.9;
--text-display-xl-tracking: -0.035em;
/* display-l: Space Grotesk 700, 72px */
--text-display-l-size: 72px;
--text-display-l-weight: 700;
--text-display-l-lh: 0.92;
--text-display-l-tracking: -0.03em;
/* display-m: Space Grotesk 600, 48px */
--text-display-m-size: 48px;
--text-display-m-weight: 600;
--text-display-m-lh: 1.0;
--text-display-m-tracking: -0.025em;
/* h1: Space Grotesk 600, 36px */
--text-h1-size: 36px;
--text-h1-weight: 600;
--text-h1-lh: 1.1;
--text-h1-tracking: -0.02em;
/* h2: Space Grotesk 600, 28px */
--text-h2-size: 28px;
--text-h2-weight: 600;
--text-h2-lh: 1.15;
--text-h2-tracking: -0.015em;
/* h3: Space Grotesk 500, 22px */
--text-h3-size: 22px;
--text-h3-weight: 500;
--text-h3-lh: 1.2;
--text-h3-tracking: -0.01em;
/* body: IBM Plex Sans 400, 16px */
--text-body-size: 16px;
--text-body-weight: 400;
--text-body-lh: 1.6;
--text-body-tracking: 0em;
/* sm: IBM Plex Sans 400, 14px */
--text-sm-size: 14px;
--text-sm-weight: 400;
--text-sm-lh: 1.5;
--text-sm-tracking: 0em;
/* label: IBM Plex Mono 500, 12px UPPERCASE */
--text-label-size: 12px;
--text-label-weight: 500;
--text-label-lh: 1;
--text-label-tracking: 0.18em;
/* micro: IBM Plex Mono 400, 11px UPPERCASE */
--text-micro-size: 11px;
--text-micro-weight: 400;
--text-micro-lh: 1;
--text-micro-tracking: 0.24em;
/* ── SPACING ────────────────────────────────────── */
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-section: 96px;
/* ── RADII ──────────────────────────────────────── */
--radius-sm: 8px; /* inputs, badges */
--radius-md: 12px; /* cards */
--radius-lg: 16px; /* panels, modales */
--radius-pill: 999px;
/* ── TOUCH & LAYOUT ─────────────────────────────── */
--touch-min: 44px;
--container: 1180px;
--gutter: 40px;
/* ── SHADOWS ────────────────────────────────────── */
--shadow-card: 0 4px 16px -4px rgba(0, 0, 0, 0.48);
--shadow-hover: 0 6px 16px -6px rgba(46, 201, 138, 0.35);
/* ── INTERACTIVE STATES ─────────────────────────── */
/* Button primary */
--btn-primary-bg: #2EC88A;
--btn-primary-text: #0C100E;
--btn-primary-hover: #25B87A;
--btn-primary-active: #1DA368;
/* Button ghost */
--btn-ghost-border: #2A332D;
--btn-ghost-hover-border: #3D4D42;
--btn-ghost-hover-bg: #16201A;
--btn-ghost-active-bg: #1B241F;
/* Focus ring */
--focus-ring: 0 0 0 2px var(--surface-panel), 0 0 0 4px var(--color-brand);
/* ── MOTION ─────────────────────────────────────── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 360ms;
}
/* ═══ 2. Tokens, modo claro ═══ */
[data-theme="light"] {
--surface-base: #F6F8F5;
--surface-section: #EDEEED;
--surface-panel: #F0F4F1;
--surface-raised: #FFFFFF;
--surface-card: #F0F4F1;
/* --text-muted se oscurece por accesibilidad (2026-08-02): N-500 (#808E86)
sobre #F6F8F5 daba 3.2:1, muy debajo del minimo AA de 4.5:1. Este valor esta
entre N-500 y N-600 a proposito: da 4.9:1 sobre la base, 5.3:1 sobre blanco y
4.5:1 sobre #EDEEED, la superficie de seccion, que es la mas exigente. N-600
puro no alcanzaba ahi (4.2:1). Es el unico valor del sistema fuera de la rampa
y existe por ese piso. */
--text-primary: #0C100E;
--text-secondary: #48544C;
--text-muted: #626F67;
--text-faint: #9AA8A0; /* solo decorativo: no pasa AA, nunca para texto */
--text-brand: #1B9E6E; /* verde profundo sobre claro */
--border-subtle: #E9EDE8;
--border-default: #C7CEC8;
/* N-500 y no N-400 (#9AA8A0), que daba 2.25:1 sobre la base y no llegaba al minimo de
3:1 de WCAG 1.4.11 para un elemento grafico. El rol dibuja cosas que hay que ver, no
solo separar: el trazo de los anillos del mapa del panel es --border-strong, y con
N-400 desaparecia en claro igual que desaparecia en oscuro antes del 2026-08-10.
N-500 da 3.11:1 sobre la base y sigue adentro de la rampa. */
--border-strong: #808E86;
/* ── ACENTO SOBRE CLARO ─────────────────────────────
El Verde Mente (#2EC98A) es AAA sobre el fondo oscuro y 1.9:1 sobre el claro: como
trazo, anillo de foco o relleno de boton en claro directamente no se ve. Sobre claro
el acento es el Verde Profundo, que el brand ya declara para eso (3.10:1 sobre la
base, arriba del minimo de 3:1 de elemento grafico). */
--color-brand: #1B9E6E;
--border-brand: #1B9E6E;
--color-focus: rgba(27, 158, 110, 0.5);
/* Tinta sobre acento. Se declara en los dos modos aunque el valor coincida: el modo de
falla del sistema es el token que existe en uno y no en el otro. Medido, no heredado:
5.62:1 sobre el Verde Profundo, contra 3.19:1 que daria --surface-base y 3.41:1 el
blanco puro. Es el mismo casi negro que --btn-primary-text usa sobre el relleno verde,
por el mismo motivo. */
--on-brand: #0C100E;
/* ── ESTADOS SOBRE CLARO ────────────────────────────
El semaforo es un punto de 8 a 10px: elemento grafico, piso de 3:1. Los tres valores
del dark quedan debajo sobre fondo claro (verde 1.90:1, ambar 2.08:1, rojo 3.43:1 que
pasa como grafico pero no como texto), asi que cada uno tiene su version profunda,
mismo tono y mas oscura. Los `-soft` son fondos de aviso: en dark son casi negros y
sobre claro dejarian el texto ilegible. */
--color-success: #1B9E6E;
--color-success-soft: #E4F4EC;
--color-warning: #8A6516;
--color-warning-soft: #FBF1DC;
--color-danger: #B32B2B;
--color-danger-soft: #FBE7E7;
--color-info: #2C6E9E;
--color-info-soft: #E4EFF7;
--shadow-card: 0 2px 8px -2px rgba(12, 16, 14, 0.12);
--shadow-hover: 0 4px 16px -4px rgba(27, 158, 110, 0.2);
/* Boton primario: relleno Verde Profundo con el texto casi negro del sistema (5.37:1).
El blanco sobre ese verde da 3.40:1 y no pasa AA, asi que el texto va oscuro, igual
que en dark. */
--btn-primary-bg: #1B9E6E;
--btn-primary-text: #0C100E;
--btn-primary-hover: #178B60;
--btn-primary-active: #137552;
/* btn-ghost hover — en dark usa #16201A (oscuro) que falla sobre fondo claro */
--btn-ghost-border: #C7CEC8;
--btn-ghost-hover-bg: rgba(27, 158, 110, 0.10);
--btn-ghost-hover-border: #1B9E6E;
--btn-ghost-active-bg: rgba(27, 158, 110, 0.18);
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] {
--surface-base: #F6F8F5;
--surface-section: #EDEEED;
--surface-panel: #F0F4F1;
--surface-raised: #FFFFFF;
--surface-card: #F0F4F1;
/* --text-muted se oscurece por accesibilidad (2026-08-02): N-500 (#808E86)
sobre #F6F8F5 daba 3.2:1, muy debajo del minimo AA de 4.5:1. Este valor esta
entre N-500 y N-600 a proposito: da 4.9:1 sobre la base, 5.3:1 sobre blanco y
4.5:1 sobre #EDEEED, la superficie de seccion, que es la mas exigente. N-600
puro no alcanzaba ahi (4.2:1). Es el unico valor del sistema fuera de la rampa
y existe por ese piso. */
--text-primary: #0C100E;
--text-secondary: #48544C;
--text-muted: #626F67;
--text-faint: #9AA8A0; /* solo decorativo: no pasa AA, nunca para texto */
--text-brand: #1B9E6E; /* verde profundo sobre claro */
--border-subtle: #E9EDE8;
--border-default: #C7CEC8;
/* N-500 y no N-400 (#9AA8A0), que daba 2.25:1 sobre la base y no llegaba al minimo de
3:1 de WCAG 1.4.11 para un elemento grafico. El rol dibuja cosas que hay que ver, no
solo separar: el trazo de los anillos del mapa del panel es --border-strong, y con
N-400 desaparecia en claro igual que desaparecia en oscuro antes del 2026-08-10.
N-500 da 3.11:1 sobre la base y sigue adentro de la rampa. */
--border-strong: #808E86;
/* ── ACENTO SOBRE CLARO ─────────────────────────────
El Verde Mente (#2EC98A) es AAA sobre el fondo oscuro y 1.9:1 sobre el claro: como
trazo, anillo de foco o relleno de boton en claro directamente no se ve. Sobre claro
el acento es el Verde Profundo, que el brand ya declara para eso (3.10:1 sobre la
base, arriba del minimo de 3:1 de elemento grafico). */
--color-brand: #1B9E6E;
--border-brand: #1B9E6E;
--color-focus: rgba(27, 158, 110, 0.5);
/* Tinta sobre acento. Se declara en los dos modos aunque el valor coincida: el modo de
falla del sistema es el token que existe en uno y no en el otro. Medido, no heredado:
5.62:1 sobre el Verde Profundo, contra 3.19:1 que daria --surface-base y 3.41:1 el
blanco puro. Es el mismo casi negro que --btn-primary-text usa sobre el relleno verde,
por el mismo motivo. */
--on-brand: #0C100E;
/* ── ESTADOS SOBRE CLARO ────────────────────────────
El semaforo es un punto de 8 a 10px: elemento grafico, piso de 3:1. Los tres valores
del dark quedan debajo sobre fondo claro (verde 1.90:1, ambar 2.08:1, rojo 3.43:1 que
pasa como grafico pero no como texto), asi que cada uno tiene su version profunda,
mismo tono y mas oscura. Los `-soft` son fondos de aviso: en dark son casi negros y
sobre claro dejarian el texto ilegible. */
--color-success: #1B9E6E;
--color-success-soft: #E4F4EC;
--color-warning: #8A6516;
--color-warning-soft: #FBF1DC;
--color-danger: #B32B2B;
--color-danger-soft: #FBE7E7;
--color-info: #2C6E9E;
--color-info-soft: #E4EFF7;
--shadow-card: 0 2px 8px -2px rgba(12, 16, 14, 0.12);
--shadow-hover: 0 4px 16px -4px rgba(27, 158, 110, 0.2);
/* Boton primario: relleno Verde Profundo con el texto casi negro del sistema (5.37:1).
El blanco sobre ese verde da 3.40:1 y no pasa AA, asi que el texto va oscuro, igual
que en dark. */
--btn-primary-bg: #1B9E6E;
--btn-primary-text: #0C100E;
--btn-primary-hover: #178B60;
--btn-primary-active: #137552;
/* btn-ghost hover — en dark usa #16201A (oscuro) que falla sobre fondo claro */
--btn-ghost-border: #C7CEC8;
--btn-ghost-hover-bg: rgba(27, 158, 110, 0.10);
--btn-ghost-hover-border: #1B9E6E;
--btn-ghost-active-bg: rgba(27, 158, 110, 0.18);
}
}
/* ═══ 3. Componentes gm-* ═══ */
/*
* Groumind: vocabulario de componentes (fuente)
*
* Clases con prefijo `gm-`. Todo color, tamano y ritmo sale de los tokens de
* `tokens.css` (oscuro, default) y `tokens-light.css` (claro). Aca no hay ningun hex.
*
* NO se enlaza este archivo directo: se usa `groumind.css`, el bundle que genera
* `_bundle.mjs` (tokens oscuros + claros + este archivo). Editar aca, correr
* `node projects/_groumind/brand/_bundle.mjs`, y listo.
*
* Que es cada clase y cuando se usa: `DESIGN.md` en la raiz del repo, seccion
* "Vocabulario". Regla: si existe la clase, se usa la clase; no se reinventa.
*
* Modo: oscuro por default. `` cambia a claro (propuestas,
* impresos). `data-theme="auto"` sigue la preferencia del sistema.
*/
/* ── 0. Tokens derivados ─────────────────────────────────────────────────── */
:root {
/* Series para graficos, en orden de uso. La 1 es la senal; el resto no compite. */
--chart-1: var(--color-brand);
--chart-2: var(--color-info);
--chart-3: var(--n-400);
--chart-4: var(--color-warning);
--chart-grid: var(--border-subtle);
--chart-text: var(--text-secondary);
--prose-max: 68ch;
--lead-max: 60ch;
}
/* ── 1. Base de pagina ───────────────────────────────────────────────────── */
.gm-page {
margin: 0;
color-scheme: dark; /* controles nativos (select, scrollbar, date) en el modo de la pagina */
background: var(--surface-base);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-body-size);
line-height: var(--text-body-lh);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
[data-theme="light"] .gm-page, [data-theme="light"].gm-page { color-scheme: light; }
.gm-page *, .gm-page *::before, .gm-page *::after { box-sizing: border-box; }
.gm-page ::selection { background: var(--color-brand); color: var(--on-brand); }
/* `:where(a)` deja la especificidad en 0,1,0, igual que `.gm-btn--primary` y `.gm-wordmark`:
asi un toma el color del boton y no el del link (bug visto en la
captura del 2026-09-02: primario verde con texto verde, ilegible). */
.gm-page :where(a) { color: var(--text-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gm-page :where(a:hover) { text-decoration-thickness: 2px; }
.gm-page :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* ── 2. Layout ───────────────────────────────────────────────────────────── */
.gm-container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(20px, 5vw, var(--gutter));
}
.gm-container--prose { max-width: 760px; }
.gm-section { padding-block: clamp(var(--space-2xl), 8vw, var(--space-section)); }
.gm-section--tight { padding-block: var(--space-2xl); }
.gm-section--alt { background: var(--surface-section); }
.gm-stack { display: flex; flex-direction: column; gap: var(--space-md); }
.gm-stack--sm { gap: var(--space-xs); }
.gm-stack--lg { gap: var(--space-xl); }
.gm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.gm-row--between { justify-content: space-between; }
.gm-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.gm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.gm-hr { border: 0; border-top: 1px solid var(--border-subtle); margin-block: var(--space-xl); }
/* ── 3. Tipografia ───────────────────────────────────────────────────────── */
.gm-display, .gm-h1, .gm-h2, .gm-h3 {
font-family: var(--font-display);
color: var(--text-primary);
margin: 0;
text-wrap: balance;
}
.gm-display {
font-size: clamp(40px, 7vw, var(--text-display-l-size));
font-weight: var(--text-display-l-weight);
line-height: var(--text-display-l-lh);
letter-spacing: var(--text-display-l-tracking);
}
/* Escalon display-m (48px): el titular de una seccion cuando el display-l es demasiado.
Se usa sobre .gm-display. Entro al vocabulario el 2026-09-02 (T3b): el token existia y dos
piezas ya lo pedian a mano, el titulo de slide de la propuesta y los h2 del sitio. */
.gm-display--m {
font-size: clamp(28px, 4.4vw, var(--text-display-m-size));
font-weight: var(--text-display-m-weight);
line-height: var(--text-display-m-lh);
letter-spacing: var(--text-display-m-tracking);
}
.gm-h1 {
font-size: clamp(28px, 4vw, var(--text-h1-size));
font-weight: var(--text-h1-weight);
line-height: var(--text-h1-lh);
letter-spacing: var(--text-h1-tracking);
}
.gm-h2 {
font-size: clamp(24px, 3vw, var(--text-h2-size));
font-weight: var(--text-h2-weight);
line-height: var(--text-h2-lh);
letter-spacing: var(--text-h2-tracking);
}
.gm-h3 {
font-size: var(--text-h3-size);
font-weight: var(--text-h3-weight);
line-height: var(--text-h3-lh);
letter-spacing: var(--text-h3-tracking);
}
.gm-lead {
font-size: 18px;
line-height: 1.55;
color: var(--text-secondary);
max-width: var(--lead-max);
margin: 0;
}
.gm-small { font-size: var(--text-sm-size); line-height: var(--text-sm-lh); }
.gm-muted { color: var(--text-secondary); }
.gm-brand { color: var(--text-brand); }
.gm-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gm-eyebrow, .gm-micro {
font-family: var(--font-mono);
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
}
.gm-eyebrow {
font-size: var(--text-label-size);
font-weight: var(--text-label-weight);
letter-spacing: var(--text-label-tracking);
line-height: var(--text-label-lh);
}
.gm-micro {
font-size: var(--text-micro-size);
font-weight: var(--text-micro-weight);
letter-spacing: var(--text-micro-tracking);
line-height: var(--text-micro-lh);
}
/* Prosa corrida: parrafos, listas, citas. Linea de 68 caracteres como tope. */
.gm-prose { max-width: var(--prose-max); }
.gm-prose > * + * { margin-top: var(--space-md); }
.gm-prose > .gm-h2 { margin-top: var(--space-2xl); }
.gm-prose > .gm-h3 { margin-top: var(--space-xl); }
.gm-prose p { margin: 0; }
.gm-prose ul, .gm-prose ol { margin: 0; padding-left: 1.25em; }
.gm-prose li + li { margin-top: var(--space-xs); }
.gm-prose li::marker { color: var(--text-brand); }
.gm-prose blockquote {
margin: 0;
padding: var(--space-md) var(--space-lg);
background: var(--surface-panel);
border-radius: var(--radius-md);
color: var(--text-secondary);
}
.gm-prose strong { font-weight: 600; color: var(--text-primary); }
.gm-code, .gm-prose code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: 1px 6px;
}
/* ── 4. Marca ────────────────────────────────────────────────────────────── */
/* Version en texto del wordmark partido. Para logos definitivos van los SVG de
brand/logos/ (tipografia trazada); esta clase es para topbars y pies donde la fuente
ya esta cargada. */
.gm-wordmark {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text-primary);
text-decoration: none;
white-space: nowrap;
}
.gm-wordmark--lg { font-size: 40px; }
.gm-wordmark__grou { font-weight: 400; }
.gm-wordmark__mind { font-weight: 700; color: var(--text-brand); }
.gm-monogram {
--size: 32px;
display: inline-grid;
place-items: center;
width: var(--size);
height: var(--size);
border-radius: calc(var(--size) * 0.28);
background: var(--color-brand);
color: var(--on-brand);
font-family: var(--font-display);
font-weight: 700;
font-size: calc(var(--size) * 0.62);
line-height: 1;
user-select: none;
}
.gm-monogram--outline {
background: var(--surface-raised);
color: var(--text-brand);
border: 1px solid var(--border-default);
}
/* ── 5. Botones ──────────────────────────────────────────────────────────── */
.gm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
min-height: var(--touch-min);
padding: 0 var(--space-lg);
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
line-height: 1;
color: var(--text-primary);
background: transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.gm-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.gm-btn[disabled], .gm-btn[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; transform: none; box-shadow: none; }
.gm-btn svg { width: 20px; height: 20px; flex: none; }
.gm-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.gm-btn--primary:hover:not([disabled]) { background: var(--btn-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.gm-btn--primary:active:not([disabled]) { background: var(--btn-primary-active); transform: translateY(0); box-shadow: none; }
.gm-btn--ghost { border-color: var(--btn-ghost-border); }
.gm-btn--ghost:hover:not([disabled]) { border-color: var(--btn-ghost-hover-border); background: var(--btn-ghost-hover-bg); }
.gm-btn--ghost:active:not([disabled]) { background: var(--btn-ghost-active-bg); transform: translateY(1px); }
.gm-btn--link { padding-inline: var(--space-xs); color: var(--text-brand); }
.gm-btn--link:hover:not([disabled]) { text-decoration: underline; text-underline-offset: 4px; }
.gm-btn--lg { min-height: 52px; padding-inline: var(--space-xl); font-size: 16px; }
.gm-btn--block { width: 100%; }
/* ── 6. Cards ────────────────────────────────────────────────────────────── */
.gm-card {
background: var(--surface-raised);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--space-lg);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.gm-card--interactive { cursor: pointer; }
.gm-card--interactive:hover { border-color: var(--border-default); box-shadow: var(--shadow-card); }
.gm-card--selected { border-color: var(--border-brand); background: var(--surface-card); }
.gm-card__title { font-family: var(--font-display); font-size: var(--text-h3-size); font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-xs); }
.gm-card__meta { color: var(--text-muted); font-size: var(--text-sm-size); margin: 0; }
.gm-card > .gm-eyebrow { margin-bottom: var(--space-sm); }
/* ── 7. Franja de datos ──────────────────────────────────────────────────── */
/* Cifras con contexto: etiqueta legible, valor a 32px, variacion y fuente. Nunca el
numero gigante con etiqueta diminuta. */
.gm-stat-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
gap: 1px;
background: var(--border-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
}
.gm-stat { background: var(--surface-raised); padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: 6px; }
.gm-stat__value {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
.gm-stat__delta { font-family: var(--font-mono); font-size: var(--text-label-size); color: var(--text-secondary); }
.gm-stat__delta.is-up { color: var(--color-success); }
.gm-stat__delta.is-down { color: var(--color-danger); }
.gm-stat__source { color: var(--text-muted); font-size: 12px; }
/* ── 8. Tabla de evidencia ───────────────────────────────────────────────── */
/* Ocupa todo el ancho disponible. Numeros a la derecha y en tabular. */
.gm-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gm-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gm-table caption { text-align: left; padding-bottom: var(--space-sm); font-weight: 600; }
.gm-table th {
text-align: left;
font-family: var(--font-mono);
font-size: var(--text-label-size);
font-weight: var(--text-label-weight);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--border-default);
white-space: nowrap;
}
.gm-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.gm-table tbody tr:hover td { background: var(--surface-panel); }
.gm-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-table tfoot td { font-weight: 600; border-top: 1px solid var(--border-default); border-bottom: 0; }
.gm-table--compact td, .gm-table--compact th { padding-block: var(--space-xs); }
/* ── 9. Badges y avisos ──────────────────────────────────────────────────── */
.gm-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--border-subtle);
background: var(--surface-card);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: var(--text-micro-size);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap;
}
.gm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gm-badge--ok { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.gm-badge--warn { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }
.gm-badge--danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }
.gm-badge--info { background: var(--color-info-soft); color: var(--color-info); border-color: transparent; }
.gm-badge--brand { background: var(--color-brand); color: var(--on-brand); border-color: transparent; }
.gm-badge--plain::before { display: none; }
/* Aviso: fondo tintado, sin franja lateral de color. */
.gm-callout {
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
background: var(--surface-panel);
border: 1px solid var(--border-subtle);
}
.gm-callout__title { font-weight: 600; margin: 0 0 4px; }
.gm-callout p { margin: 0; color: var(--text-secondary); }
.gm-callout--ok { background: var(--color-success-soft); border-color: transparent; }
.gm-callout--warn { background: var(--color-warning-soft); border-color: transparent; }
.gm-callout--danger { background: var(--color-danger-soft); border-color: transparent; }
.gm-callout--info { background: var(--color-info-soft); border-color: transparent; }
.gm-callout--ok .gm-callout__title { color: var(--color-success); }
.gm-callout--warn .gm-callout__title { color: var(--color-warning); }
.gm-callout--danger .gm-callout__title { color: var(--color-danger); }
.gm-callout--info .gm-callout__title { color: var(--color-info); }
/* ── 10. Formularios ─────────────────────────────────────────────────────── */
.gm-field { display: flex; flex-direction: column; gap: 6px; }
.gm-label { font-size: var(--text-sm-size); font-weight: 500; color: var(--text-primary); }
.gm-hint { font-size: 13px; color: var(--text-muted); margin: 0; }
.gm-error { font-size: 13px; color: var(--color-danger); margin: 0; }
.gm-input, .gm-select, .gm-textarea {
width: 100%;
min-height: var(--touch-min);
padding: 0 var(--space-sm);
font: inherit;
color: var(--text-primary);
background: var(--surface-base);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.gm-textarea { padding-block: var(--space-sm); min-height: 120px; resize: vertical; }
/* Select: sin la flecha ni el desplegable nativos (Ciro, 2026-09-02: "estás usando lo default
del browser"). La flecha es un SVG propio; el desplegable lo pinta el sistema, pero con
`color-scheme` sale en el modo correcto y con `option` estilado toma nuestras superficies.
Los dos hex de abajo son tokens (N-400 y N-700): un data URI no puede leer var(). */
.gm-select {
appearance: none;
-webkit-appearance: none;
padding-right: 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239AA8A0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-sm) center;
background-size: 20px;
cursor: pointer;
}
[data-theme="light"] .gm-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2348544C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.gm-select option { background: var(--surface-raised); color: var(--text-primary); }
.gm-input::placeholder, .gm-textarea::placeholder { color: var(--text-muted); }
.gm-input:hover, .gm-select:hover, .gm-textarea:hover { border-color: var(--border-strong); }
.gm-input:focus, .gm-select:focus, .gm-textarea:focus,
.gm-input:focus-visible, .gm-select:focus-visible, .gm-textarea:focus-visible {
outline: none;
border-color: var(--border-brand);
box-shadow: 0 0 0 3px var(--color-focus);
}
.gm-input[aria-invalid="true"], .gm-textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.gm-input[disabled], .gm-select[disabled], .gm-textarea[disabled] { opacity: 0.38; cursor: not-allowed; }
/* ── 11. Navegacion y pie ────────────────────────────────────────────────── */
.gm-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
min-height: 64px;
padding-block: var(--space-sm);
border-bottom: 1px solid var(--border-subtle);
}
.gm-nav { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.gm-nav a {
color: var(--text-secondary);
text-decoration: none;
font-size: 15px;
padding-block: 6px;
border-bottom: 2px solid transparent;
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.gm-nav a:hover { color: var(--text-primary); }
.gm-nav a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--color-brand); }
.gm-footer {
padding-block: var(--space-xl);
border-top: 1px solid var(--border-subtle);
color: var(--text-muted);
font-size: var(--text-sm-size);
}
/* ── 12. Figuras y utilidades ────────────────────────────────────────────── */
.gm-figure { margin: 0; }
.gm-figure img, .gm-figure svg { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.gm-figure__caption { margin-top: var(--space-xs); color: var(--text-muted); font-size: 13px; }
.gm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gm-hide-mobile { }
@media (max-width: 640px) { .gm-hide-mobile { display: none !important; } }
/* ── 13. Movimiento e impresion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.gm-page *, .gm-page *::before, .gm-page *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.gm-btn--primary:hover:not([disabled]) { transform: none; }
}
@media print {
@page { margin: 16mm; }
.gm-page { background: var(--surface-base); }
.gm-no-print, .gm-topbar, .gm-nav { display: none !important; }
.gm-card, .gm-stat-strip, .gm-callout { break-inside: avoid; }
.gm-btn { box-shadow: none; transform: none; }
}
/* ═══ groumind.css embebido: fin ═══ */