/* ============================================================================= Plataforma Integral DuoCapital — Tokens del sistema de diseño Dirección: Bufete · proporción Filete · Newsreader · densidad de trabajo ----------------------------------------------------------------------------- ESTE ES EL ÚNICO ARCHIVO CON VALORES DE COLOR, TIPOGRAFÍA Y ESPACIADO. Ningún componente, plantilla ni hoja de estilo puede declarar un color literal, un tamaño de fuente en px ni una familia tipográfica. Todo se consume desde aquí. Existe una prueba que falla si aparece un hex fuera de este archivo. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap'); :root { /* --------------------------------------------------------------------------- 1 · COLOR Tres familias y nada más: tinta, papel y la rampa del granate. No se agregan colores. Un estado nuevo se resuelve con peso, regla o posición, nunca inventando un tono. --------------------------------------------------------------------------- */ /* Tinta — texto y estructura */ --c-ink: #131519; /* texto principal, reglas de cierre */ --c-ink-2: #4C525B; /* texto secundario · 7.4:1 sobre papel */ --c-ink-3: #676D76; /* metadatos y pies · 4.8:1 sobre papel (mínimo AA) */ /* Papel — superficies */ --c-paper: #FBFAF7; /* fondo del documento */ --c-paper-2: #F4F1EA; /* campos hundidos, filas alternas */ /* Reglas */ --c-rule: #E0DCD2; /* filete fino: separa secciones */ --c-rule-2: #C6C0B2; /* filete medio: bordes de campo */ --c-rule-3: #A79F8E; /* filete fuerte: botones secundarios */ /* Granate — rampa completa */ --c-g-900: #3F1417; --c-g-700: #6E2429; --c-g: #7A2A2E; /* base · 10.3:1 sobre papel */ --c-g-500: #9A4348; --c-g-200: #DFC8C7; --c-g-100: #EFE0DE; --c-g-50: #F8F0EE; /* Sobre granate */ --c-on-g: #FBF6F5; /* --------------------------------------------------------------------------- 2 · ROLES SEMÁNTICOS El granate tiene exactamente TRES trabajos. Si un elemento nuevo no cae en uno de estos tres, va en tinta. --------------------------------------------------------------------------- */ --role-referencia: var(--c-g); /* marcador de evidencia: la afirmación se conecta con su fuente */ --role-decision: var(--c-g); /* aquí una persona debe resolver algo */ --role-umbral: var(--c-g); /* un valor cruzó el límite fijado por la metodología */ /* Identidad (uso estructural, no semántico) */ --role-membrete: var(--c-g); /* regla gruesa de la cabecera */ --role-membrete-2: var(--c-g-200); /* regla fina de la cabecera */ /* --------------------------------------------------------------------------- 3 · TIPOGRAFÍA --------------------------------------------------------------------------- */ --f-display: 'Newsreader', Georgia, 'Times New Roman', serif; --f-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Newsreader se usa SOLO en: membrete, títulos de documento y de sección mayor, y el enunciado de una pregunta en el portal. Nunca en interfaz operativa, botones, tablas ni etiquetas. */ --w-display: 400; --w-regular: 400; --w-medium: 500; --w-bold: 600; --track-display: -0.012em; --track-label: 0.17em; /* versalitas de etiqueta */ --track-button: 0.12em; --track-nav: 0.12em; /* --------------------------------------------------------------------------- 4 · DENSIDAD Dos escalas. La aplicación interna usa TRABAJO. El portal del participante y los documentos generados usan LECTURA. --------------------------------------------------------------------------- */ /* trabajo — por defecto */ --fs-title: 23px; --lh-title: 1.26; --fs-title-2: 18px; --lh-title-2: 1.30; --fs-lead: 15px; --lh-lead: 1.62; --fs-base: 14px; --lh-base: 1.56; --fs-small: 12px; --lh-small: 1.60; --fs-meta: 10.5px; --lh-meta: 1.45; --fs-label: 9px; --fs-button: 10.5px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 22px; /* padding de página */ --sp-7: 26px; --sp-8: 34px; --sp-9: 44px; --gap-col: 18px; /* separación entre columnas del documento */ --gap-row: 11px; /* separación entre filas de escala */ /* --------------------------------------------------------------------------- 5 · FORMA --------------------------------------------------------------------------- */ --radius: 0; /* sin esquinas redondeadas, en ningún componente */ --radius-round: 50%; /* única excepción: marcas circulares de selección */ --rule-hair: 1px solid var(--c-rule); --rule-medium: 1px solid var(--c-rule-2); --rule-strong: 1px solid var(--c-rule-3); --rule-close: 2px solid var(--c-ink); /* cierra bloque de acciones y tabla de evidencia */ --shadow: none; /* no se usan sombras */ /* --------------------------------------------------------------------------- 6 · ANCHOS DE LÍNEA La legibilidad manda sobre el ancho disponible. --------------------------------------------------------------------------- */ --measure-title: 34ch; --measure-lead: 62ch; --measure-body: 70ch; /* --------------------------------------------------------------------------- 7 · GRILLA DEL DOCUMENTO --------------------------------------------------------------------------- */ --col-margen: 128px; /* columna de anotación */ --col-evidencia: 244px; /* tabla de evidencia */ /* --------------------------------------------------------------------------- 8 · MOVIMIENTO Mínimo. Solo transiciones de estado, nunca entradas ni desplazamientos. --------------------------------------------------------------------------- */ --t-fast: 140ms ease; --t-slow: 240ms ease; /* --------------------------------------------------------------------------- 9 · FOCO --------------------------------------------------------------------------- */ --focus-ring: 2px solid var(--c-g); --focus-offset: 2px; } /* ----------------------------------------------------------------------------- DENSIDAD DE LECTURA Se aplica poniendo data-density="lectura" en un contenedor. Obligatoria en: portal del participante, documentos generados, vistas de informe y cualquier pantalla pensada para leer en vez de operar. ----------------------------------------------------------------------------- */ [data-density="lectura"] { --fs-title: 30px; --lh-title: 1.25; --fs-title-2: 21px; --lh-title-2: 1.30; --fs-lead: 16.5px; --lh-lead: 1.68; --fs-base: 15.5px; --lh-base: 1.68; --fs-small: 13px; --lh-small: 1.62; --fs-meta: 11px; --lh-meta: 1.50; --sp-6: 34px; --gap-col: 26px; --gap-row: 15px; } /* ----------------------------------------------------------------------------- PREFERENCIA DE MOVIMIENTO REDUCIDO ----------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-slow: 0ms; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ----------------------------------------------------------------------------- IMPRESIÓN Y GENERACIÓN DE PDF (WeasyPrint) Los documentos generados heredan estos mismos tokens, de modo que el informe impreso y la pantalla son la misma casa. ----------------------------------------------------------------------------- */ @media print { :root { --c-paper: #FFFFFF; } nav, .no-print { display: none !important; } }