/* Onfarmanet SAS · FarmaGuard — Design System: BASE (reset, elementos, shell, íconos). * Dirección v4 «Estación clínica de sello». Depende de tokens.css. Cargar antes de components.css. * SHELL: la consola con sesión de rol usa RAIL lateral (232px, decisión del dueño 2026-08-13); * las páginas sin nav de rol (login, cuentas, errores, legales) usan la BANDA oscura. El hijo * elige el shell sobreescribiendo {% block shell_open %} con _partials/shell_rail.html * (y shell_close con sus DOS cierres); el default de base.html es la banda. */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv05" 1, "cv09" 1, "ss03" 1; min-height: 100vh; } img, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } a { color: var(--brand-strong); text-decoration: none; transition: color var(--ease); } a:hover { color: var(--brand); } ::selection { background: var(--brand-soft); color: var(--brand-deep); } /* ── Foco visible (accesibilidad): anillo 2px offset 2, universal ── */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--r-xs); } :focus:not(:focus-visible) { outline: none; } .topbar :focus-visible { outline-color: #fff; } /* ── Tipografía: Inter en 4 pesos REALES (400/500/600/700). Nunca 550/650 sintetizados. ── */ h1, h2, h3, h4 { color: var(--ink); letter-spacing: var(--tracking-tight); font-weight: 700; } h1 { font-size: var(--fs-xl); line-height: var(--lh-tight); } h2 { font-size: var(--fs-lg); line-height: 1.4118; } h3 { font-size: var(--fs-sm); line-height: 1.2308; font-weight: 600; letter-spacing: -0.01em; } p { max-width: var(--measure); } strong, b { font-weight: 600; color: var(--ink); } /* 0.9em RELATIVO a propósito: corrección óptica del mono (se ve ~8% más grande a igual cuerpo) en cualquier contexto — no es un tamaño de la escala. */ code, kbd { font-family: var(--font-mono); font-size: 0.9em; } hr { border: none; border-top: 1px solid var(--border); margin: var(--s-5) 0; } :where(h1, h2, h3, .num, .tabular) { font-variant-numeric: tabular-nums; } /* ── Íconos (sprite SVG inline, monolínea, hereda currentColor — CSP-safe) ── */ .sprite { display: none; } .icon { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .icon--sm { width: 14px; height: 14px; } .icon--lg { width: 24px; height: 24px; stroke-width: 1.5; } /* ── Skip link ── */ .skip-link { position: absolute; left: var(--s-4); top: -56px; z-index: 100; background: var(--surface-raised); color: var(--brand-strong); font-weight: 600; padding: var(--s-2) var(--s-4); border-radius: var(--r-md); box-shadow: var(--shadow-lg); border: 1px solid var(--border); transition: top var(--ease); } .skip-link:focus { top: var(--s-3); } /* ══ APP SHELL · RAIL (consola con nav de rol) ══ Grid de 2 columnas. El gradiente del fondo pinta la columna del rail a TODA la altura de la página (el rail es sticky de 100vh: sin el gradiente la columna se corta en páginas largas). */ .app { min-height: 100vh; } .app--rail { display: grid; grid-template-columns: var(--rail-w) 1fr; background: linear-gradient(90deg, var(--surface-raised) 0, var(--surface-raised) calc(var(--rail-w) - 1px), var(--border) calc(var(--rail-w) - 1px), var(--border) var(--rail-w), var(--surface) var(--rail-w)); } .rail { background: var(--surface-raised); border-right: 1px solid var(--border); padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; } .rail__brand { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-2); } .brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); flex-shrink: 0; min-width: 0; } .brand:hover { color: var(--ink); } .brand__logo { width: 24px; height: 24px; border-radius: var(--r-xs); display: block; flex: none; } .brand__name { font-weight: 600; font-size: var(--fs-lg); line-height: 1.4118; letter-spacing: -0.01em; } /* Tarjeta de contexto: farmacia + modo del piloto (o ámbito, para el superadmin sin tenant). */ .tenant { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); background: var(--surface); } .tenant__label { font-size: var(--fs-2xs); line-height: 1.4545; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-subtle); } .tenant__name { font-size: var(--fs-sm); line-height: 1.2308; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; } /* .mode = sombra (warning: el motor registra sin mostrar alertas — estado de seguridad, no neutro); .mode--visible = alertas visibles (success). */ .mode { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--fs-xs); line-height: 1.3333; font-weight: 500; color: var(--warning-text); } .mode__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); flex: none; } .mode--visible { color: var(--success-text); } .mode--visible .mode__dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); } /* Navegación: el wrapper #menu es el destino del drawer móvil (:target, CSS-only bajo CSP 'self') y contiene nav principal + subnav de Métricas como HERMANOS (contrato de tests: aria-current único por