/* ============================================================================ GLIVOK — DESIGN SYSTEM (web/shared/design.css) · MARCA v2.1 Fuente única de identidad para tablero, consola y web. PORTA los tokens oficiales: 07-Branding/Tokens/glivok-tokens.css v2.1 (2026-08-07) — copia de procedencia versionada en docs/brand/glivok-tokens-v2.1.css (DES-454/ADR-498). NO inventar colores/fuentes/espaciados aquí: si falta algo se propone como brand v2.2 y se actualizan LOS TRES archivos de marca (css/json/tailwind). CÓMO FUNCIONA (mecanismo v1 intacto): - :root declara los tokens CANÓNICOS --glivok-* de v2.1 + un bloque de ALIAS v1.0 (compatibilidad con consumidores existentes; lo nuevo usa nombres v2.1). - html[data-theme="light"|"dark"] mapea las variables LEGACY de cada app (--ok, --gold, --acc…) a los canónicos. La especificidad de html[data-theme] (0,1,1) GANA sobre el :root inline de cada app (0,1,0). - .glivok-theme-light / .glivok-theme-dark exponen la capa SEMÁNTICA v2.1 completa por CLASE (opt-in): la consumen las superficies nuevas (piloto Vue DES-455, pantallas Tablero v2 de A1+) sin tocar a las apps legacy. - Tablero = LIGHT (claro-primero, default universal v2.0). Consola = DARK (opt-in del staff). El re-tema COMPLETO de cada app es de los lotes A1-A4 (DES-454); aquí solo aterrizan tokens + fixes de cumplimiento AA medidos. - Fuentes AUTO-HOSPEDADAS (@font-face abajo): Inter viaja con el repo (web/shared/fonts/, SIL OFL — AVISOS-TERCEROS §Inter). Ya no hay Google Fonts. ============================================================================ */ /* ---------- FUENTES DE MARCA (auto-hospedadas, SIL OFL) ---------- Rangos de peso DELIBERADOS: 07-Branding v2.1 no vendoriza Inter Medium(500) ni un 800; 500-600 resuelve a SemiBold y 800-900 a Display Black — matching EXPLÍCITO en vez del algoritmo implícito del navegador (que difiere por motor). Deuda fichada (brand v2.2): vendorizar Medium real y JetBrains Mono (hoy el mono usa la cadena de sistema del token: Cascadia Code / SF Mono / Consolas). */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;src:url('/shared/fonts/Inter-Regular.ttf') format('truetype');font-display:swap;} @font-face{font-family:'Inter';font-style:normal;font-weight:500 600;src:url('/shared/fonts/Inter-SemiBold.ttf') format('truetype');font-display:swap;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;src:url('/shared/fonts/Inter-Bold.ttf') format('truetype');font-display:swap;} @font-face{font-family:'Inter';font-style:normal;font-weight:800 900;src:url('/shared/fonts/InterDisplay-Black.ttf') format('truetype');font-display:swap;} :root { /* ========================================================================== 1 · PRIMITIVAS v2.1 — la pintura en los botes. La UI nueva consume la capa semántica; las apps legacy llegan vía los mapeos html[data-theme]. ========================================================================== */ /* Neutros (de tinta a papel) */ --glivok-obsidian: #111317; /* TINTA principal y acento oscuro — ya no es el lienzo */ --glivok-obsidian-90: #1A1D22; /* superficies elevadas en dark */ --glivok-obsidian-80: #232730; /* divisores en dark */ --glivok-graphite: #3A4048; /* texto cuerpo sobre claro — 10.46:1 sobre paper */ --glivok-steel: #7A828A; /* DECORATIVO: líneas, iconos grandes. NO texto pequeño (3.90:1) */ --glivok-steel-text: #666D74; /* steel para TEXTO: 4.72:1 canvas · 5.24:1 paper */ --glivok-silver: #9CA3AF; /* captions en dark / deshabilitado en claro */ --glivok-mist: #E5E7EB; /* body en dark / divisor en claro */ --glivok-white: #F8F9FA; /* tipografía sobre oscuro / papel de marca */ --glivok-paper: #FFFFFF; /* superficie principal en claro */ /* Lienzo claro (v2.0) */ --glivok-canvas: #F1F3F6; /* fondo de aplicación */ --glivok-surface-2: #F7F9FB; --glivok-surface-3: #EDF0F4; --glivok-tile: #EEF3F8; --glivok-line: #E6EAEF; --glivok-line-strong: #D3D9E0; /* Lienzo oscuro (v2.1 — primitivas de primera clase) */ --glivok-void: #0E1013; --glivok-surface-2-dark:#15181D; --glivok-tile-dark: #232935; --glivok-line-dark: #242932; --glivok-line-strong-dark:#333A46; --glivok-body-dark: #C6CBD3; --glivok-muted-dark: #8B939D; /* Acento — Oxford es la marca, Active es la acción */ --glivok-oxford: #1F3A52; --glivok-active: #2E5A82; /* CTA, enlaces, selección. Blanco encima: 7.24:1 */ --glivok-active-deep: #25496A; /* hover del CTA en claro */ --glivok-active-dark: #3B6E9E; /* CTA en tema oscuro */ --glivok-accent-soft: #E8F0F8; --glivok-accent-on-dark:#6FA0D6; /* enlaces/acento como TEXTO sobre oscuro: 6.80:1 */ /* ========================================================================== 2 · SEÑALES — tres ranuras por señal: texto (AA medido) / acento / tinte. RATIOS de check_contrast.py (07-Branding) — nunca se editan a mano. ========================================================================== */ --glivok-ok-text: #387B51; /* 5.10:1 paper · 4.52:1 sobre su tinte */ --glivok-ok-accent: #3F8A5B; --glivok-ok-tint: #E9F4ED; --glivok-ok-on-dark: #5FAE7C; /* 6.93:1 sobre obsidian */ --glivok-warn-text: #886B26; /* 5.03:1 paper · 4.54:1 sobre su tinte */ --glivok-warn-accent: #C2A04A; /* ámbar de marca: SOLO icono/barra (como texto: 2.49:1) */ --glivok-warn-tint: #FAF3E0; --glivok-warn-on-dark: #D6B45E; /* 9.34:1 sobre obsidian */ --glivok-err-text: #B0392F; /* 6.05:1 paper · 5.30:1 sobre su tinte */ --glivok-err-accent: #C0453A; --glivok-err-tint: #FBEDEB; --glivok-err-on-dark: #E86B65; /* 4.56:1 sobre su tinte · 5.41:1 sobre superficie */ /* Foco (a11y) — visible en ambos temas */ --glivok-focus: #2E5A82; --glivok-focus-on-dark: #6FA0D6; /* ========================================================================== 3 · DATAVIZ — categórica de 6, orden FIJO (ADR-249). Señales JAMÁS de serie. v2.1: gv-2/gv-4 oscurecidos (sobre canvas medían 2.91/2.98; ahora 3.21/3.15). ========================================================================== */ --glivok-gv-1: #2563EB; --glivok-gv-2: #AF7F29; --glivok-gv-3: #0D9488; --glivok-gv-4: #D6685B; --glivok-gv-5: #7C3AED; --glivok-gv-6: #0891B2; --glivok-gv-1-dark: #5B8DEF; --glivok-gv-2-dark: #D4A950; --glivok-gv-3-dark: #2BB3A3; --glivok-gv-4-dark: #E88B7F; --glivok-gv-5-dark: #9A6EF0; --glivok-gv-6-dark: #2FA8C9; --glivok-gv-grid: #EAEDF1; --glivok-gv-grid-dark: #242932; --glivok-gv-seq: #2E5A82; /* ========================================================================== 4 · TIPOGRAFÍA — Inter ÚNICA familia (v2.0; Helvetica Neue RETIRADA). ========================================================================== */ --glivok-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --glivok-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --glivok-font-mono: "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas, monospace; --glivok-weight-display: 800; --glivok-weight-heading: 700; --glivok-weight-medium: 500; --glivok-weight-regular: 400; --glivok-fs-display: 4rem; --glivok-fs-h1: 2.5rem; --glivok-fs-h2: 1.75rem; --glivok-fs-h3: 1.375rem; --glivok-fs-h4: 1.125rem; --glivok-fs-h5: 1rem; --glivok-fs-body: 0.875rem; --glivok-fs-body-lg: 1rem; --glivok-fs-caption: 0.78125rem; --glivok-fs-label: 0.75rem; --glivok-fs-eyebrow: 0.6875rem; --glivok-fs-mono: 0.8125rem; --glivok-tracking-display: 0.12em; --glivok-tracking-loose: 0.06em; --glivok-tracking-tight: -0.01em; --glivok-lh-display: 1.05; --glivok-lh-heading: 1.15; --glivok-lh-body: 1.55; --glivok-lh-mono: 1.45; /* ========================================================================== 5 · FORMA (v2.0: lo ortogonal queda para DATOS) · 6 · ELEVACIÓN ========================================================================== */ --glivok-radius-0: 0; --glivok-radius-xs: 6px; --glivok-radius-sm: 8px; --glivok-radius-md: 12px; --glivok-radius-lg: 16px; --glivok-radius-xl: 20px; --glivok-radius-pill: 999px; --glivok-elev-0: none; --glivok-elev-1: 0 1px 2px rgba(17,19,23,.05); --glivok-elev-2: 0 1px 3px rgba(17,19,23,.06), 0 1px 2px rgba(17,19,23,.04); --glivok-elev-3: 0 4px 14px rgba(17,19,23,.07), 0 1px 3px rgba(17,19,23,.05); --glivok-elev-4: 0 12px 32px rgba(17,19,23,.12); --glivok-elev-1-dark: 0 1px 2px rgba(0,0,0,.40); --glivok-elev-2-dark: 0 1px 3px rgba(0,0,0,.45); --glivok-elev-3-dark: 0 6px 20px rgba(0,0,0,.50); --glivok-elev-4-dark: 0 16px 40px rgba(0,0,0,.60); /* ========================================================================== 7 · ESPACIADO Y LAYOUT · 8 · MOTION + ICONOGRAFÍA ========================================================================== */ --glivok-space-1: 4px; --glivok-space-2: 8px; --glivok-space-3: 16px; --glivok-space-4: 24px; --glivok-space-5: 32px; --glivok-space-6: 48px; --glivok-space-7: 64px; --glivok-space-8: 96px; --glivok-space-9: 128px; --glivok-max-width: 1280px; --glivok-max-width-app: 1560px; --glivok-gutter: 24px; --glivok-duration-instant: 80ms; --glivok-duration-fast: 160ms; --glivok-duration-base: 240ms; --glivok-easing-standard: cubic-bezier(0.2, 0, 0, 1); --glivok-icon-stroke: 1.6px; --glivok-icon-sm: 16px; --glivok-icon-md: 20px; --glivok-icon-lg: 24px; /* ========================================================================== 9 · CAPAS Y BREAKPOINTS · 10 · ESTADOS (v2.1) Breakpoints: CSS no permite var() en @media — son CONTRATO documental; en CSS se escriben literales (640 / 900 / 1240 / 1560). ========================================================================== */ --glivok-z-base: 0; --glivok-z-dropdown: 10; --glivok-z-sticky: 20; --glivok-z-scrim: 40; --glivok-z-drawer: 45; --glivok-z-modal: 60; --glivok-z-toast: 80; --glivok-z-tooltip: 90; --glivok-bp-sm: 640px; --glivok-bp-md: 900px; --glivok-bp-lg: 1240px; --glivok-bp-xl: 1560px; --glivok-focus-ring-width: 2px; --glivok-focus-ring-offset: 2px; --glivok-scrim: rgba(17, 19, 23, .55); --glivok-scrim-dark: rgba(0, 0, 0, .65); --glivok-disabled-opacity: .45; /* ========================================================================== ALIAS v1.0 (compatibilidad) — consumidores existentes (validate-web, tablero/consola, componentes previos). Lo NUEVO usa los nombres v2.1. Nota dura: --glivok-signal-warn ahora apunta a warn-TEXT porque el ámbar #C2A04A como texto reprobaba AA (2.49:1); quien necesite el ámbar de icono/barra usa --glivok-warn-accent. ========================================================================== */ --glivok-base-obsidian: var(--glivok-obsidian); --glivok-contrast-white: var(--glivok-white); --glivok-accent-oxford: var(--glivok-oxford); --glivok-accent-active: var(--glivok-active); --glivok-support-steel: var(--glivok-steel); --glivok-white-90: var(--glivok-mist); --glivok-white-60: var(--glivok-silver); --glivok-signal-ok: var(--glivok-ok-text); --glivok-signal-warn: var(--glivok-warn-text); --glivok-signal-error: var(--glivok-err-text); --glivok-signal-ok-on-dark: var(--glivok-ok-on-dark); --glivok-signal-error-on-dark: var(--glivok-err-on-dark); --glivok-focus-ring: var(--glivok-focus); /* el tema dark lo re-mapea abajo */ --glivok-weight-body-regular: var(--glivok-weight-regular); --glivok-weight-body-medium: var(--glivok-weight-medium); --glivok-weight-body-bold: var(--glivok-weight-heading); --glivok-radius-1: 2px; /* v1 "excepcional" — lo consume el --rad de consola; re-tema en A4 */ } /* ============================================================================ TEMA LIGHT — TABLERO DEL CLIENTE (mapeo legacy quirúrgico) Solo fixes de cumplimiento AA v2.1; el lienzo canvas y el re-estilizado completo (Tablero v2) llegan con los lotes A1-A3 de DES-454. ============================================================================ */ html[data-theme="light"] { color-scheme: light; --ok: var(--glivok-ok-text); /* era #4A7C59 (marketing v1) → 5.10:1 medido */ --gold: var(--glivok-warn-text); /* era #C2A04A → como TEXTO reprobaba (2.49:1) */ --red: var(--glivok-err-text); /* era #A6342E → ranura de texto medida */ --active-d: var(--glivok-active-deep); --focus-ring: var(--glivok-focus); /* era #6FA0D6 sobre claro (≈2.9:1, reprobaba) */ /* obsidian/white/oxford/active/line/bg del tablero ya coinciden o se corrigen inline (teal retirado, gv-2/4 v2.1, body→graphite) en tablero/index.html. */ } /* ============================================================================ TEMA DARK — CONSOLA DEL STAFF (re-tema COMPLETO v2.1 · Lote A4/DES-454): --bg→void · --panel2→surface-2-dark · --line→line-dark · --mut→muted-dark · --acc→active-dark · --warn→warn-on-dark (la ranura MEDIDA 9.34:1) · --rad→radius-sm para CONTENEDORES (Brand Book §5; consola excepciona table a radius-0 = DATOS). --panel/--txt/--ok/--err/--acc-on-dark/--focus-ring ya coincidían. ============================================================================ */ html[data-theme="dark"] { color-scheme: dark; --bg: var(--glivok-void); --panel: var(--glivok-obsidian-90); --panel2: var(--glivok-surface-2-dark); --line: var(--glivok-line-dark); --txt: var(--glivok-white); --mut: var(--glivok-muted-dark); --acc: var(--glivok-active-dark); --acc-on-dark: var(--glivok-accent-on-dark); --ok: var(--glivok-ok-on-dark); --warn: var(--glivok-warn-on-dark); --err: var(--glivok-err-on-dark); --rad: var(--glivok-radius-sm); --focus-ring: var(--glivok-focus-on-dark); --glivok-focus-ring: var(--glivok-focus-on-dark); } /* ============================================================================ CAPA SEMÁNTICA v2.1 POR CLASE (opt-in) — para superficies NUEVAS: piloto Vue (DES-455) y pantallas Tablero v2 (A1+). No toca a las apps legacy. ============================================================================ */ .glivok-theme-light { color-scheme: light; --bg: var(--glivok-canvas); --surface: var(--glivok-paper); --surface-2: var(--glivok-surface-2); --surface-3: var(--glivok-surface-3); --tile: var(--glivok-tile); --line: var(--glivok-line); --line-strong: var(--glivok-line-strong); --ink: var(--glivok-obsidian); --body: var(--glivok-graphite); --muted: var(--glivok-steel-text); --accent: var(--glivok-active); --accent-ink: #FFFFFF; --accent-hover: var(--glivok-active-deep); --accent-text: var(--glivok-oxford); --accent-soft: var(--glivok-accent-soft); --ok: var(--glivok-ok-text); --ok-accent: var(--glivok-ok-accent); --ok-bg: var(--glivok-ok-tint); --warn: var(--glivok-warn-text); --warn-accent: var(--glivok-warn-accent); --warn-bg: var(--glivok-warn-tint); --err: var(--glivok-err-text); --err-accent: var(--glivok-err-accent); --err-bg: var(--glivok-err-tint); --focus: var(--glivok-focus); --state-hover: var(--glivok-surface-2); --state-selected: var(--glivok-accent-soft); --state-pressed: var(--glivok-active-deep); --disabled-fg: var(--glivok-silver); --disabled-bg: var(--glivok-surface-3); --disabled-border: var(--glivok-line); --placeholder: var(--glivok-silver); --scrim: var(--glivok-scrim); --sh-1: var(--glivok-elev-1); --sh-2: var(--glivok-elev-2); --sh-3: var(--glivok-elev-3); --sh-4: var(--glivok-elev-4); --gv-1: var(--glivok-gv-1); --gv-2: var(--glivok-gv-2); --gv-3: var(--glivok-gv-3); --gv-4: var(--glivok-gv-4); --gv-5: var(--glivok-gv-5); --gv-6: var(--glivok-gv-6); --gv-grid: var(--glivok-gv-grid); } .glivok-theme-dark { color-scheme: dark; --bg: var(--glivok-void); --surface: var(--glivok-obsidian-90); --surface-2: var(--glivok-surface-2-dark); --surface-3: var(--glivok-obsidian-80); --tile: var(--glivok-tile-dark); --line: var(--glivok-line-dark); --line-strong: var(--glivok-line-strong-dark); --ink: var(--glivok-white); --body: var(--glivok-body-dark); --muted: var(--glivok-muted-dark); --accent: var(--glivok-active-dark); --accent-ink: #FFFFFF; --accent-hover: var(--glivok-active); --accent-text: var(--glivok-accent-on-dark); --accent-soft: rgba(111,160,214,.14); --ok: var(--glivok-ok-on-dark); --ok-accent: var(--glivok-ok-on-dark); --ok-bg: rgba(95,174,124,.14); --warn: var(--glivok-warn-on-dark); --warn-accent: var(--glivok-warn-on-dark); --warn-bg: rgba(214,180,94,.14); --err: var(--glivok-err-on-dark); --err-accent: var(--glivok-err-on-dark); --err-bg: rgba(217,100,94,.14); --focus: var(--glivok-focus-on-dark); --state-hover: var(--glivok-surface-2-dark); --state-selected: rgba(111,160,214,.14); --state-pressed: var(--glivok-oxford); --disabled-fg: var(--glivok-muted-dark); --disabled-bg: var(--glivok-obsidian-80); --disabled-border: var(--glivok-line-dark); --placeholder: var(--glivok-muted-dark); --scrim: var(--glivok-scrim-dark); --sh-1: var(--glivok-elev-1-dark); --sh-2: var(--glivok-elev-2-dark); --sh-3: var(--glivok-elev-3-dark); --sh-4: var(--glivok-elev-4-dark); --gv-1: var(--glivok-gv-1-dark); --gv-2: var(--glivok-gv-2-dark); --gv-3: var(--glivok-gv-3-dark); --gv-4: var(--glivok-gv-4-dark); --gv-5: var(--glivok-gv-5-dark); --gv-6: var(--glivok-gv-6-dark); --gv-grid: var(--glivok-gv-grid-dark); } /* ============================================================================ BASE DE ACCESIBILIDAD (aplica a quien cargue design.css) ============================================================================ */ /* Foco siempre visible (nunca outline:none sin reponer). Anillo por tema. */ :focus-visible { outline: var(--glivok-focus-ring-width) solid var(--glivok-focus-ring); outline-offset: var(--glivok-focus-ring-offset); } /* Números tabulares para datos/contadores (legibilidad de cifras alineadas). */ .num, .mono, [class*="kpi"] .v, .kpi b { font-variant-numeric: tabular-nums; } /* Respeto a usuarios con movimiento reducido. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- DRILL-DOWN (data-drill) ---------- Un agregado/KPI con data-drill="#sel" lleva a su detalle. */ [data-drill] { cursor: pointer; } .gv-drill-flash { animation: gv-drill-flash 1.6s var(--glivok-easing-standard); } @keyframes gv-drill-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 18% { box-shadow: 0 0 0 3px var(--glivok-active); } } /* ---------- COMPONENTES BASE v2.1 (opt-in, §10 de los tokens) ---------- */ .glivok-base { background: var(--bg); color: var(--body); font-family: var(--glivok-font-body); font-size: var(--glivok-fs-body); line-height: var(--glivok-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Cifras: SIEMPRE mono + tabular (alineación de columnas de dinero). */ .glivok-num { font-family: var(--glivok-font-mono); font-variant-numeric: tabular-nums; } /* CTA de marca — único componente con el acento como fondo. */ .glivok-cta { background: var(--accent, var(--glivok-active)); color: var(--accent-ink, #FFFFFF); font-weight: var(--glivok-weight-heading); padding: var(--glivok-space-2) var(--glivok-space-4); border: 0; border-radius: var(--glivok-radius-sm); cursor: pointer; transition: background var(--glivok-duration-fast) var(--glivok-easing-standard); } .glivok-cta:hover { background: var(--accent-hover, var(--glivok-active-deep)); } /* ---------- LISTA DE CHIPS (GlivokUI.crearListaChips · DES-724) ---------- Campo de lista con buscador: se elige de UNO en UNO y lo elegido se acumula como chips con su botón de quitar. Sustituye a las parrillas de casillas. Los colores salen de los alias legacy de cada app (--line-s/--acc/--ink/--bg…) con el token v2.1 como respaldo: sirve igual en el tablero (claro) que en la consola (oscuro) sin declarar un solo hex nuevo. */ .gv-lista { display: block; } .gv-lista-chips { list-style: none; margin: 0 0 6px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .gv-lista-chips[data-vacia="si"] { margin: 0; } .gv-lista-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: var(--glivok-radius-pill); background: var(--accent-soft, var(--glivok-accent-soft)); color: var(--ink, var(--glivok-obsidian)); border: 1px solid var(--line-s, var(--glivok-line-strong)); font-size: var(--glivok-fs-caption); line-height: 1.4; } .gv-lista-chip-x { border: 0; background: transparent; cursor: pointer; padding: 0 2px; font-size: 15px; line-height: 1; color: var(--muted, var(--glivok-steel-text)); border-radius: var(--glivok-radius-xs); } .gv-lista-chip-x:hover { color: var(--err, var(--glivok-err-text)); } .gv-lista-campo { position: relative; } .gv-lista-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line-s, var(--glivok-line-strong)); border-radius: var(--glivok-radius-sm); background: var(--bg, var(--glivok-paper)); color: var(--ink, var(--glivok-obsidian)); font-family: inherit; font-size: var(--glivok-fs-body); } .gv-lista-input::placeholder { color: var(--placeholder, var(--glivok-silver)); } .gv-lista-opts { list-style: none; margin: 4px 0 0 0; padding: 4px; position: absolute; left: 0; right: 0; z-index: var(--glivok-z-dropdown); max-height: 260px; overflow-y: auto; background: var(--bg, var(--glivok-paper)); border: 1px solid var(--line-s, var(--glivok-line-strong)); border-radius: var(--glivok-radius-sm); box-shadow: var(--glivok-elev-3); } .gv-lista-opts[hidden] { display: none; } .gv-lista-op { padding: 7px 9px; border-radius: var(--glivok-radius-xs); cursor: pointer; color: var(--ink, var(--glivok-obsidian)); font-size: var(--glivok-fs-body); } .gv-lista-op:hover, .gv-lista-op.res { background: var(--state-selected, var(--glivok-accent-soft)); } .gv-lista-op-t { display: block; } .gv-lista-op-d { display: block; font-size: var(--glivok-fs-caption); color: var(--body, var(--glivok-graphite)); line-height: 1.45; } .gv-lista-nada, .gv-lista-nota { margin: 0; padding: 7px 9px; font-size: var(--glivok-fs-caption); color: var(--muted, var(--glivok-steel-text)); line-height: 1.45; } .gv-lista-nota:empty { display: none; } /* ============================================================================ PROHIBICIONES v2.1 (además de las de logo del Brand Book): × #14998A (teal) en cualquier superficie — error histórico, retirado. × Fondo oscuro como default de una pieza nueva (decks, docs, portal). × Señales como color decorativo o como serie de dataviz. × Emoji como iconografía. Librería base: Lucide 24×24, trazo 1.6. × Mayúsculas+tracking bajo 20px (excepto eyebrow de 11px, que es su casa). × Colores/hex fuera de este archivo: si falta uno, se propone brand v2.2. ============================================================================ */