/* ⚠️ COPIA GENERADA · no editar. Fuente: plataforma-marca/03-tokens/pensura-tokens.css Se regenera con: python3 design-system/build.py Editar este archivo en vez de la fuente hace fallar el build. */ /* ============================================================ 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: #040D14; /* fondo de app · azul-noche */ --oscuro-800: #0C1C28; /* superficie */ --oscuro-700: #16303F; /* superficie elevada */ --oscuro-600: #26485E; /* divisorias */ --oscuro-500: #5F8AA6; /* bordes de control · 3.71 sobre superficie-hover (peor caso) */ --oscuro-300: #9BAEBC; /* texto secundario · 8.55 sobre fondo */ --oscuro-100: #E8EDF0; /* texto primario · 16.59 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); /* La página/ground va un escalón MÁS oscura que las tarjetas, para que la superficie flote encima (la misma profundidad que en claro, donde el ground crema es más oscuro que las tarjetas blancas). Sin esto, en oscuro ground y superficie caían las dos en oscuro-800 y la app se veía como un bloque plano. */ --color-fondo-alt: var(--oscuro-900); --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); /* 14.68 s/superficie ✅ */ --color-texto-suave: var(--oscuro-300); /* 7.57 s/superficie ✅ */ --color-texto-invertido: var(--oscuro-900); --color-borde-sutil: var(--oscuro-600); --color-borde-control: var(--oscuro-500); /* 3.71 s/superficie-hover ✅ WCAG 1.4.11 (4.68 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); /* 8.74 s/superficie ✅ */ --color-foco: var(--pensura-teal-300); --color-acento: var(--pensura-salvia-300); /* 9.89 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); /* 8.74 ✅ */ --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) { [data-theme="oscuro"], :root:not([data-theme="claro"]) { color-scheme: dark; --color-fondo: var(--oscuro-900); --color-fondo-alt: var(--oscuro-900); --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); }