/* ============================================================ PENSURA · DESIGN TOKENS v1.0 Dos capas: 1. PRIMITIVOS — valores crudos. Nunca se usan en componentes. 2. SEMÁNTICOS — lo único que consumen los componentes. Si en un componente escribís --pensura-azul-900, está mal. Escribí --color-texto-primario. ============================================================ */ :root { /* ========================================================== 1 · PRIMITIVOS ========================================================== */ /* --- Marca (paleta original) --- */ --pensura-azul-900: #033F63; /* Yale Blue · estructura, el arco */ --pensura-teal-700: #28666E; /* Stormy Teal · interacción */ --pensura-verde-500: #7C9885; /* Muted Teal · nunca texto chico */ --pensura-salvia-400: #B5B682; /* Dry Sage · la columna del isotipo */ --pensura-durazno-300: #FEDC97; /* Soft Peach · atención */ /* --- Ampliación (verificada WCAG) --- */ --pensura-terracota-600: #A6423E; /* mora · 6.05 sobre blanco */ --pensura-verde-600: #3F7A55; /* éxito · 5.09 sobre blanco */ /* --- Variantes para tema oscuro --- */ --pensura-teal-300: #7FC3CE; --pensura-terracota-300: #E08B84; --pensura-verde-300: #7FC79A; --pensura-salvia-300: #C6C793; /* --- Sombras de interacción (hover de la acción principal) --- */ --pensura-azul-950: #052F4A; /* hover de azul-900 */ --pensura-teal-200: #9AD4DD; /* hover de teal-300, solo oscuro */ /* --- Rellenos de estado · FUERA de la paleta de marca --- Tintes que existen solo como relleno de chip. No son colores de marca: no se usan en ilustración, ni en fondos de sección, ni en el logo. Viven acá y no sueltos en la capa semántica para que se vea de un vistazo cuánto color hay fuera de la paleta y por qué está. El contraste de cada chip se mide contra SU relleno, no contra el fondo de la página: ver las anotaciones en las secciones 7 y 8. */ --tinte-emitida-claro: #E1EDEF; --tinte-pagada-claro: #EDF6F0; --tinte-borrador-oscuro: #243E52; --tinte-emitida-oscuro: #17384A; --tinte-porvencer-oscuro: #4A3A18; --tinte-vencida-oscuro: #4A211F; --tinte-pagada-oscuro: #1B3A2A; /* --- Neutros claros --- */ --neutro-0: #FFFFFF; --neutro-50: #F5F4EC; /* crema · fondo de sección */ --neutro-200: #DCDCD2; /* divisorias */ --neutro-400: #8A8A7C; /* bordes de control · 3.50 sobre blanco */ --neutro-700: #4A5560; /* texto secundario · 7.61 sobre blanco */ /* --- Neutros oscuros (azulados, derivados del hue de marca) --- */ --oscuro-900: #0B1A24; /* fondo de app */ --oscuro-800: #12283A; /* superficie */ --oscuro-700: #1B3A50; /* superficie elevada */ --oscuro-600: #2B4A61; /* divisorias */ --oscuro-500: #5F8AA6; /* bordes de control · 3.21 sobre superficie-hover (peor caso) */ --oscuro-300: #9BAEBC; /* texto secundario · 7.73 sobre fondo */ --oscuro-100: #E8EDF0; /* texto primario · 14.99 sobre fondo */ /* ========================================================== 2 · TIPOGRAFÍA ========================================================== */ --font-marca: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-dato: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Cero barrado. La feature `zero` ya viene dentro del .woff2 de JetBrains Mono —verificado con fonttools sobre el archivo del repo—, así que activarla no cambia de fuente ni agrega una descarga: es una línea. La mono existe para lo que se lee carácter por carácter y se dicta por teléfono (0001-00043, un CUIT, un CAE): ahí distinguir el cero de la O mayúscula es exactamente su trabajo. Figtree no tiene `zero`, así que declararlo de más es inocuo. */ --font-dato-features: "zero" 1; /* Escala · base 16 */ --texto-2xs: 0.6875rem; /* 11px · superíndices, notas al pie */ --texto-xs: 0.75rem; /* 12px · kickers mono, captions */ --texto-sm: 0.8125rem; /* 13px · labels, celdas densas */ --texto-md: 0.875rem; /* 14px · CUERPO POR DEFECTO EN APP */ --texto-lg: 1rem; /* 16px · CUERPO POR DEFECTO EN WEB */ --texto-xl: 1.25rem; /* 20px · h4, importes destacados */ --texto-2xl: 1.5rem; /* 24px · h3 */ --texto-3xl: 2rem; /* 32px · h2 */ --texto-4xl: 2.75rem; /* 44px · h1 app */ --texto-5xl: 3.5rem; /* 56px · display web */ --texto-6xl: 4.5rem; /* 72px · hero */ /* Pesos. ⚠️ REGLA DURA: el peso 300 solo se permite a partir de --texto-4xl (44px). De 32px para abajo el mínimo es 400. Sin esto alguien va a poner Light en un label de 13px sobre crema y va a ser ilegible. */ --peso-light: 300; --peso-regular: 400; --peso-medium: 500; --peso-semibold: 600; /* el logotipo vive acá */ --interlinea-ajustada: 1.15; /* display */ --interlinea-titulo: 1.25; --interlinea-cuerpo: 1.55; --interlinea-dato: 1.2; /* tablas */ --tracking-kicker: 0.08em; /* `01 — LA MARCA` en mono */ --tracking-display: -0.02em; /* ========================================================== 3 · ESPACIADO · base 4 (encaja con la grilla 48 del isotipo) ========================================================== */ --esp-1: 0.25rem; /* 4px */ --esp-2: 0.5rem; /* 8px */ --esp-3: 0.75rem; /* 12px */ --esp-4: 1rem; /* 16px */ --esp-6: 1.5rem; /* 24px */ --esp-8: 2rem; /* 32px */ --esp-10: 2.5rem; /* 40px · gap de columnas del manual impreso */ --esp-12: 3rem; /* 48px */ --esp-16: 4rem; /* 64px */ --esp-24: 6rem; /* 96px */ /* ========================================================== 4 · RADIO · híbrido La píldora se reserva para chips y badges, donde el arco rima. Todo lo demás va a 8px: en tablas densas el redondeo total se vuelve blando. ========================================================== */ --radio-sm: 4px; /* tags internos, celdas */ --radio-md: 8px; /* botones, inputs, cards ← DEFAULT */ --radio-lg: 12px; /* modales, cards grandes */ --radio-full: 9999px;/* SOLO chips de estado, badges y avatares */ /* ========================================================== 5 · DENSIDAD · el toggle del tablero de cobranza ========================================================== */ --fila-compacta: 36px; --fila-default: 44px; /* ← DEFAULT */ --fila-comoda: 56px; --control-sm: 32px; --control-md: 40px; --control-lg: 48px; /* ========================================================== 6 · SOMBRAS · tintadas con el azul de marca, no negro puro ========================================================== */ --sombra-sm: 0 1px 2px rgba(3, 63, 99, 0.06); --sombra-md: 0 2px 8px rgba(3, 63, 99, 0.08); --sombra-lg: 0 8px 24px rgba(3, 63, 99, 0.12); --transicion: 150ms cubic-bezier(0.4, 0, 0.2, 1); /* ========================================================== 10 · TRAZOS, MEDIDAS DE PÁGINA Y GRILLA Los consume la hoja de impresión (bin/manual.css). Sin estos valores no se puede dibujar un borde ni fijar una medida física sin escribir un literal. ========================================================== */ /* --- Trazos --- Antes el manual usaba 1px, 1.5px, 2px y 3px sueltos: cuatro literales repetidos en once reglas. Con tres escalones alcanza. */ --borde-fino: 1px; /* marcos de panel, divisorias de tabla */ --borde-medio: 1.5px; /* cabecera de tabla */ --borde-grueso: 3px; /* filete de acento, barra de blockquote */ /* --- Medidas de página --- */ /* Medida de la hoja. Es la única fuente: el build la lee de acá para pedirle a Chromium ese tamaño exacto de papel y para recortar el MediaBox del PDF. La portada a sangre la usa como alto. */ --pagina-ancho-hoja: 210mm; --pagina-alto-hoja: 297mm; /* Alto del área útil: la hoja menos los dos márgenes. Derivado, no escrito a mano, para que siga al margen si el margen cambia. */ --pagina-alto-util: calc(var(--pagina-alto-hoja) - var(--pagina-margen) * 2); --filete-ancho: 14mm; /* largo del filete de acento sobre .spec */ --panel-img-max: 52mm; /* ancho máximo de un asset dentro de .panel */ --tile-alto-min: 26mm; /* piso de altura de .tile */ --banner-marca-ancho: 16mm; /* isotipo dentro del banner */ --portada-isotipo-ancho: 10mm; /* isotipo suelto en la cabecera de portada */ --portada-marca-ancho: 78mm; /* lockup horizontal en la portada */ /* Carta de color: alto de los paños. El de la paleta es el que fija la altura de la fila, así que manda la proporción de la tabla entera. */ /* Espécimen y escala del capítulo de tipografía. Son la escala de PANTALLA reducida para entrar en la hoja: el capítulo documenta los tamaños de la app, no los del documento. */ --especimen-muestra: 14mm; --especimen-set: 5mm; --escala-col-label: 32%; --escala-display: 12mm; --escala-titulo: 7mm; --escala-subtitulo: 5.5mm; /* Alto del área de logo en la grilla de versiones: iguala el alto de los tres paneles para que sus pies alineen sin recurrir a flex. */ --grilla-logo-alto: 22mm; /* Tarjetas de usos incorrectos: alto del paño y del logo adentro. */ --uso-panel-alto: 34mm; --uso-marca-alto: 16mm; --paleta-col-pano: 23%; /* ancho de la columna del paño, como la referencia */ /* Alto FIJO de la fila, no mínimo: en la referencia los cinco colores miden igual y acá las descripciones de dos líneas estiraban su fila. */ --paleta-fila-alto: 28mm; /* entran dos líneas de descripción */ /* Fichas de «Versiones del logo»: 2 columnas, tarjeta alta, el logo respirando. Antes eran 3 columnas y el logo entraba diminuto. */ --ficha-pano-alto: 46mm; --ficha-logo-ancho: 62%; /* Paños de «Logo sobre fondo» y de los sí/no. El lockup ocupa la mitad del ancho del paño, como en la referencia: con 46% entraba diminuto y el paño se leía como un rectángulo de color con una marca de agua encima. */ --combi-alto: 42mm; --combi-logo-ancho: 76%; --sino-alto: 26mm; --sino-logo-ancho: 44%; --neutros-pano-alto: 14mm; --proporcion-alto: 14mm; /* --- Grilla --- La referencia usa columnas parejas (1fr 1fr). La única asimetría real es la de la página de paleta: muestra angosta + descripción. */ --col-angosta: 1fr; --col-fila-ratio: 3; /* proporción de .fila */ --medida-lectura: 68%; /* ancho máximo de la prosa suelta */ /* ========================================================== 11 · ESCALA DE IMPRESIÓN Sale de 02-visual/referencia/design/. Está SEPARADA de la escala de pantalla a propósito: son dos medios distintos, y obligarlos a compartir grilla es lo que hacía que el manual no se pareciera a su referencia. ========================================================== */ --impreso-mono: 0.625rem; /* 10px · kicker, pie, metadatos */ --impreso-mono-lg: 0.6875rem; /* 11px · línea de specs */ --impreso-nota: 0.78125rem; /* 12.5px · descripción de tarjeta */ --impreso-menor: 0.8125rem; /* 13px · cuerpo de banner, label de tarjeta */ --impreso-cuerpo: 0.875rem; /* 14px · ← CUERPO */ --impreso-bajada: 0.9375rem; /* 15px · intro y título de banner */ --impreso-h3: 1.1875rem; /* 19px */ --impreso-titulo: 2.125rem; /* 34px · título de capítulo, peso 400 */ --impreso-portada: 2.875rem; /* 46px · portada */ /* ⚠️ La regla 5 vale igual: el 300 solo desde 44px. El único tamaño de esta escala que llega es --impreso-portada. La referencia usa 300 a 40px y a 20px; ahí gana la regla, no la referencia. */ --impreso-interlinea: 1.7; /* cuerpo y bajada */ --impreso-interlinea-nota: 1.6; /* descripción de tarjeta */ --impreso-interlinea-titulo: 1.1; /* portada */ --impreso-tracking-kicker: 0.14em; /* la referencia; --tracking-kicker es 0.08em */ --impreso-tracking-titulo: -0.024em; /* -0.8px sobre 34px */ --impreso-tracking-portada: -0.026em; /* -1.2px sobre 46px */ --impreso-medida: 38em; /* medida de lectura de la bajada */ /* Margen de página: parejo en los cuatro lados. 16.93mm = 64px a 96dpi, que es lo que usa la referencia. */ --pagina-margen: 16.93mm; /* ========================================================== 12 · ESCALA DE DECK · 16:9 Tercera escala, y por el mismo motivo que la de impresión está separada de la de pantalla: un deck se proyecta y se mira de lejos. Compartir la grilla del manual da láminas ilegibles a tres metros. La lámina es 13.333in × 7.5in — el 16:9 de PowerPoint — para que el PDF entre en una plantilla estándar sin reescalar. ========================================================== */ --deck-ancho: 338.667mm; --deck-alto: 190.5mm; --deck-margen: 24mm; --deck-mono: 3.5mm; --deck-cuerpo: 5mm; --deck-h3: 6mm; --deck-titulo: 12mm; --deck-portada: 16mm; --deck-cifra: 28mm; --deck-isotipo: 12mm; --deck-marca: 72mm; } /* ============================================================ 7 · SEMÁNTICOS · TEMA CLARO ============================================================ */ :root, [data-theme="claro"] { color-scheme: light; /* Superficies */ --color-fondo: var(--neutro-0); --color-fondo-alt: var(--neutro-50); --color-superficie: var(--neutro-0); --color-superficie-hover: var(--neutro-50); /* Texto */ --color-texto-primario: var(--pensura-azul-900); /* 11.08 s/fondo ✅ */ --color-texto-suave: var(--neutro-700); /* 7.61 s/fondo ✅ */ --color-texto-invertido: var(--neutro-0); /* Bordes */ --color-borde-sutil: var(--neutro-200); /* divisorias */ --color-borde-control: var(--neutro-400); /* 3.17 s/superficie-hover ✅ WCAG 1.4.11 (3.50 s/superficie · manda el peor caso) */ /* Acción */ --color-accion: var(--pensura-azul-900); --color-accion-texto: var(--neutro-0); --color-accion-hover: var(--pensura-azul-950); --color-link: var(--pensura-teal-700); /* 6.53 s/fondo ✅ */ --color-foco: var(--pensura-teal-700); /* Acento de marca — la columna del isotipo */ --color-acento: var(--pensura-salvia-400); /* --- ESTADOS DE FACTURA (eje 1: ciclo de vida) --- Cada ratio es del texto contra el RELLENO DEL CHIP, que es lo que el ojo ve. Medirlo contra el fondo de la página da un número más alto y falso. */ --estado-borrador-fondo: var(--neutro-200); --estado-borrador-texto: var(--neutro-700); /* 5.51 s/relleno ✅ */ --estado-emitida-fondo: var(--tinte-emitida-claro); --estado-emitida-texto: var(--pensura-teal-700); /* 5.46 s/relleno ✅ */ --estado-porvencer-fondo: var(--pensura-durazno-300); --estado-porvencer-texto: var(--pensura-azul-900); /* 8.39 s/relleno ✅ */ --estado-vencida-fondo: var(--pensura-terracota-600); --estado-vencida-texto: var(--neutro-0); /* 6.05 s/relleno ✅ */ --estado-pagada-fondo: var(--tinte-pagada-claro); --estado-pagada-texto: var(--pensura-verde-600); /* 4.61 s/relleno ✅ */ /* --- SALDO (eje 2: proporción pagada) --- No es un estado. Es la barra que va DENTRO del chip. El chip conserva el color de su ciclo de vida. */ --saldo-pagado: var(--pensura-verde-600); --saldo-pendiente: var(--neutro-200); /* Feedback */ --color-error: var(--pensura-terracota-600); --color-exito: var(--pensura-verde-600); --color-atencion:var(--pensura-durazno-300); /* En el v0.9 la prosa NO es azul-900: es teal. El azul queda para títulos y estructura, y esa diferencia es la mitad de la jerarquía. --color-texto-suave es gris neutro y --color-link es para enlaces: usar link para el cuerpo funciona por valor pero miente. */ --color-texto-lectura: var(--pensura-teal-700); /* 6.53 ✅ */ } /* ============================================================ 8 · SEMÁNTICOS · TEMA OSCURO El fondo NO es 033F63. Un azul saturado a pantalla completa cansa en sesiones largas y además quemaría el azul de marca, que necesitamos disponible como color semántico. ============================================================ */ [data-theme="oscuro"] { color-scheme: dark; --color-fondo: var(--oscuro-900); --color-fondo-alt: var(--oscuro-800); --color-superficie: var(--oscuro-800); --color-superficie-hover: var(--oscuro-700); /* Los ratios de texto van contra --color-superficie (#12283A), que es donde vive el contenido. Contra --color-fondo dan más alto; el que manda es este. */ --color-texto-primario: var(--oscuro-100); /* 12.80 s/superficie ✅ */ --color-texto-suave: var(--oscuro-300); /* 6.60 s/superficie ✅ */ --color-texto-invertido: var(--oscuro-900); --color-borde-sutil: var(--oscuro-600); --color-borde-control: var(--oscuro-500); /* 3.21 s/superficie-hover ✅ WCAG 1.4.11 (4.08 s/superficie · manda el peor caso) */ --color-accion: var(--pensura-teal-300); --color-accion-texto: var(--oscuro-900); --color-accion-hover: var(--pensura-teal-200); --color-link: var(--pensura-teal-300); /* 7.62 s/superficie ✅ */ --color-foco: var(--pensura-teal-300); --color-acento: var(--pensura-salvia-300); /* 8.63 s/superficie ✅ */ /* Igual que en claro: cada ratio es contra el relleno del chip. */ --estado-borrador-fondo: var(--tinte-borrador-oscuro); --estado-borrador-texto: var(--oscuro-300); /* 4.86 s/relleno ✅ */ --estado-emitida-fondo: var(--tinte-emitida-oscuro); --estado-emitida-texto: var(--pensura-teal-300); /* 6.23 s/relleno ✅ */ --estado-porvencer-fondo: var(--tinte-porvencer-oscuro); --estado-porvencer-texto: var(--pensura-durazno-300);/* 8.33 s/relleno ✅ */ --estado-vencida-fondo: var(--tinte-vencida-oscuro); --estado-vencida-texto: var(--pensura-terracota-300); /* 5.36 s/relleno ✅ */ --estado-pagada-fondo: var(--tinte-pagada-oscuro); --estado-pagada-texto: var(--pensura-verde-300); /* 6.25 s/relleno ✅ */ --saldo-pagado: var(--pensura-verde-300); --saldo-pendiente: var(--oscuro-600); --color-error: var(--pensura-terracota-300); --color-exito: var(--pensura-verde-300); --color-atencion:var(--pensura-durazno-300); --color-texto-lectura: var(--pensura-teal-300); /* 7.62 ✅ */ --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --sombra-md: 0 2px 8px rgba(0, 0, 0, 0.38); --sombra-lg: 0 8px 24px rgba(0, 0, 0, 0.48); } /* El mismo tema oscuro cuando lo pide el sistema operativo y nadie eligió claro a mano. Sin esto, seguir la preferencia del sistema exige JavaScript. ⚠️ BLOQUE GENERADO por 03-tokens/build.py a partir de §8. No editarlo: se reescribe entero en cada corrida. El valor se cambia arriba, en §8, que sigue siendo el único lugar donde vive el dato (regla 1). */ /* >>> generado · prefers-color-scheme */ @media (prefers-color-scheme: dark) { :root:not([data-theme="claro"]) { color-scheme: dark; --color-fondo: var(--oscuro-900); --color-fondo-alt: var(--oscuro-800); --color-superficie: var(--oscuro-800); --color-superficie-hover: var(--oscuro-700); --color-texto-primario: var(--oscuro-100); --color-texto-suave: var(--oscuro-300); --color-texto-invertido: var(--oscuro-900); --color-borde-sutil: var(--oscuro-600); --color-borde-control: var(--oscuro-500); --color-accion: var(--pensura-teal-300); --color-accion-texto: var(--oscuro-900); --color-accion-hover: var(--pensura-teal-200); --color-link: var(--pensura-teal-300); --color-foco: var(--pensura-teal-300); --color-acento: var(--pensura-salvia-300); --estado-borrador-fondo: var(--tinte-borrador-oscuro); --estado-borrador-texto: var(--oscuro-300); --estado-emitida-fondo: var(--tinte-emitida-oscuro); --estado-emitida-texto: var(--pensura-teal-300); --estado-porvencer-fondo: var(--tinte-porvencer-oscuro); --estado-porvencer-texto: var(--pensura-durazno-300); --estado-vencida-fondo: var(--tinte-vencida-oscuro); --estado-vencida-texto: var(--pensura-terracota-300); --estado-pagada-fondo: var(--tinte-pagada-oscuro); --estado-pagada-texto: var(--pensura-verde-300); --saldo-pagado: var(--pensura-verde-300); --saldo-pendiente: var(--oscuro-600); --color-error: var(--pensura-terracota-300); --color-exito: var(--pensura-verde-300); --color-atencion: var(--pensura-durazno-300); --color-texto-lectura: var(--pensura-teal-300); --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --sombra-md: 0 2px 8px rgba(0, 0, 0, 0.38); --sombra-lg: 0 8px 24px rgba(0, 0, 0, 0.48); } } /* <<< generado */ /* ============================================================ 9 · CLASES BASE ============================================================ */ /* Importes, saldos, totales. Figtree con cifras tabulares. ⚠️ Requiere self-hostear el variable font: Google Fonts puede servir Figtree sin algunas features OpenType. */ .dato-monto { font-family: var(--font-marca); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; /* Figtree no tiene lnum: sus cifras ya son lining */ font-weight: var(--peso-medium); line-height: var(--interlinea-dato); text-align: right; font-variant-ligatures: none; } /* Identificadores: 0001-00043, CUIT, IDs, códigos. */ .dato-id { font-family: var(--font-dato); font-size: var(--texto-sm); font-weight: var(--peso-regular); letter-spacing: 0; } /* Kickers y etiquetas técnicas: `01 — LA MARCA`, `grilla 48×48` */ .kicker { font-family: var(--font-dato); font-size: var(--texto-xs); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-texto-suave); } /* Chip de estado. La píldora se usa acá, y prácticamente solo acá. */ .chip-estado { display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-1) var(--esp-3); border-radius: var(--radio-full); font-size: var(--texto-sm); font-weight: var(--peso-medium); white-space: nowrap; } *:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; border-radius: var(--radio-sm); }