/* ============================================================================ tokens.css — Cimientos del sistema de diseño (PR 1 del plan de hardening UI). Se carga en TODAS las vistas. Aquí NO se reemplazan los colores existentes (eso es el PR 4); este archivo solo: 1) publica los design tokens para uso progresivo, 2) garantiza un FOCO de teclado visible accesible en toda la app (WCAG 2.4.7), 3) respeta prefers-reduced-motion. Ver docs/plan-trabajo-ui.md y docs/Auditoria_UI_UX.docx. ============================================================================ */ /* Fuente de marca (Jost). Se importa aquí para garantizarla en TODAS las vistas que cargan tokens.css; las que ya enlazan Jost en su no la descargan dos veces (el navegador deduplica por URL). */ @import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&display=swap"); :root { /* Marca Blunding — azul corporativo + plata (ver referencia de marca). */ --brand: #0057A8; /* azul Blunding (principal) */ --brand-700: #003F8A; /* azul oscuro (hover/acento fuerte) */ --brand-50: #E6F0FA; /* azul muy claro (fondos suaves) */ --plata: #A8A9AD; /* plata del isotipo */ --bg: #F2F4F7; /* fondo de aplicación de marca */ /* Estados semánticos (alineados a marca) */ --ok: #16A34A; /* verde */ --warn: #D97706; /* ámbar */ --err: #DC2626; /* rojo */ --info: #0057A8; /* azul de marca */ /* Texto (paleta de marca; contraste AA sobre blanco) */ --ink: #334155; /* texto principal */ --muted: #64748B; /* texto secundario */ --line: #e2e8f0; /* slate-200 */ /* Forma y espaciado */ --radius: 14px; --radius-sm: 10px; --control-h: 40px; /* Tipografía de marca: Jost (sustituto libre de Century Gothic) en toda la UI. */ --font-text: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-base: var(--font-text); /* alias del estándar (SKILL): familia única de la UI */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* solo datos/códigos */ /* Escala tipográfica — usar SIEMPRE estos tokens, nunca px sueltos */ --fs-xs: 0.75rem; /* etiquetas, captions */ --fs-sm: 0.875rem; /* texto secundario, tablas densas */ --fs-md: 1rem; /* cuerpo base */ --fs-lg: 1.25rem; /* subtítulos */ --fs-xl: 1.5rem; /* título de vista */ --fs-2xl: 2rem; /* título de reporte/portada */ /* Pesos */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Interlineado */ --lh-tight: 1.2; --lh-base: 1.5; /* Foco de teclado */ --focus-ring: 3px solid var(--brand); --focus-offset: 2px; } /* ---------------------------------------------------------------------------- Tipografía única de marca (Jost). Forzamos la familia en el cuerpo para que las vistas que aún declaran `body{font-family:"Inter"}` localmente queden en Jost sin tener que editarlas una por una. Los datos/códigos mantienen su fuente monoespaciada vía .dato-mono / .font-mono (no se ven afectados). ---------------------------------------------------------------------------- */ body { font-family: var(--font-base) !important; } /* ---------------------------------------------------------------------------- Foco de teclado visible y consistente en TODA la app. :focus-visible no afecta el clic con mouse (solo teclado/lector), por lo que no introduce "anillos" molestos en uso normal. Cubre tanto elementos nativos como las clases propias del proyecto (FABs, badges de ayuda, tabs, tiles…). ---------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible, .btn:focus-visible, .smp-fab:focus-visible, #ayuda-fab:focus-visible, .microhelp-badge:focus-visible, .tab-btn:focus-visible, .tile:focus-visible, .size-chip:focus-visible, .mode-btn:focus-visible, .sf-filter-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); } /* No anular nunca el foco con outline:0 sin reemplazo. Si alguna vista usó outline:none en inputs, este respaldo asegura un anillo por teclado. */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } /* Utilidad estándar para etiquetas solo-lectores (labels accesibles). */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Respeto a usuarios que reducen movimiento (animaciones/carruseles/toasts). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ────────────────────────────────────────────────────────────────────────── PR 10 — Responsividad móvil (teléfonos). Regla dura del plan: NINGUNA vista hace scroll horizontal del body en teléfonos. El contenido ancho (tablas de reportes/listas) sigue scrolleando DENTRO de su propio contenedor (overflow-x:auto); esto solo evita que un desborde accidental arrastre la página entera. Las vistas de fase ya lo fijan vía funciones_comunes.js; este guard cubre además reportes/listas/admin, que no usan ese framework. Se usa `clip` (no rompe position:sticky) con fallback a `hidden` en navegadores viejos. Se aplica en <=640px (teléfonos y tablets chicas). ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { html, body { overflow-x: hidden; overflow-x: clip; } } /* ────────────────────────────────────────────────────────────────────────── Modo TV (?tv=1): la vista se embebe en la pantalla de TV como tablero. Oculta navegación y controles globales y deja el contenido a pantalla completa. El hook que añade .tv-mode a está en funciones_comunes.js. ────────────────────────────────────────────────────────────────────────── */ html.tv-mode .pf-page-topbar, html.tv-mode #pfMenuRoot, html.tv-mode #pfMenuMount, html.tv-mode #global-footer, html.tv-mode #ayuda-fab, html.tv-mode [data-html2canvas-ignore], html.tv-mode [data-standard-header], html.tv-mode #main-navbar { display: none !important; } html.tv-mode, html.tv-mode body { margin: 0 !important; padding: 0 !important; background: #ffffff !important; overflow-x: hidden; } html.tv-mode main { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 12px 16px !important; } /* ---------------------------------------------------------------------------- Clases base de tipografía (sistema único). Usar en lugar de tamaños sueltos: un título de vista es .titulo-vista, un título de reporte es .titulo-reporte, el texto de tabla densa .texto-tabla, y los códigos/datos numéricos .dato-mono. Adopción progresiva; no cambia nada hasta que una vista use estas clases. ---------------------------------------------------------------------------- */ .titulo-vista { font-family: var(--font-base); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--ink); } .titulo-reporte { font-family: var(--font-base); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--ink); } .subtitulo { font-family: var(--font-base); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--muted); } .texto-tabla { font-size: var(--fs-sm); } .dato-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------------------- Relieve 3D de marca en TODOS los botones de la app. Da sensación de botón físico: brillo superior interno (luz), cara inferior sólida (grosor) y sombra proyectada; al presionar (:active) el relieve se reduce y baja levemente → efecto de hundido. Usamos solo box-shadow en reposo/hover (no transform) para no romper animaciones existentes (p. ej. el giro de "Refrescar"). Se excluyen los botones del Inicio (ya traen su propio 3D) y algunos controles de solo icono donde el relieve estorba. Escape: [data-no-3d]. ---------------------------------------------------------------------------- */ :is( button:not(.mos-cat-card):not(.mos-fav-btn):not(.up-sound-btn):not(.up-fs-corner):not(.smp-btn-close):not(.microhelp-badge):not(.mm-cat):not(.mm-opt):not([data-no-3d]), a.btn, .process-report-link, .smp-fab, .smp-btn-primary, .smp-btn-ghost, .smp-btn-action, .up-btn, .up-btn-secondary, .up-btn-ghost, .pg-btn-primary, .pg-btn-secondary, input[type="button"], input[type="submit"], input[type="reset"] ) { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 rgba(0,0,0,.13), 0 5px 9px rgba(0,0,0,.12) !important; } :is( button:not(.mos-cat-card):not(.mos-fav-btn):not(.up-sound-btn):not(.up-fs-corner):not(.smp-btn-close):not(.microhelp-badge):not(.mm-cat):not(.mm-opt):not([data-no-3d]), a.btn, .process-report-link, .smp-fab, .smp-btn-primary, .smp-btn-ghost, .smp-btn-action, .up-btn, .up-btn-secondary, .up-btn-ghost, .pg-btn-primary, .pg-btn-secondary, input[type="button"], input[type="submit"], input[type="reset"] ):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 0 rgba(0,0,0,.13), 0 8px 14px rgba(0,0,0,.16) !important; } :is( button:not(.mos-cat-card):not(.mos-fav-btn):not(.up-sound-btn):not(.up-fs-corner):not(.smp-btn-close):not(.microhelp-badge):not(.mm-cat):not(.mm-opt):not([data-no-3d]), a.btn, .process-report-link, .smp-fab, .smp-btn-primary, .smp-btn-ghost, .smp-btn-action, .up-btn, .up-btn-secondary, .up-btn-ghost, .pg-btn-primary, .pg-btn-secondary, input[type="button"], input[type="submit"], input[type="reset"] ):active { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.13), 0 2px 4px rgba(0,0,0,.12) !important; transform: translateY(2px); } /* El pill de búsqueda de OT (escanear + N° OT + Cargar) lleva el relieve como conjunto, porque su overflow:hidden recorta las sombras de los botones internos. */ .pf-search-pill { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 rgba(0,0,0,.13), 0 5px 9px rgba(0,0,0,.12); }