/* ========================================================================= facturaonline — Design tokens · estilo «Verde bosque» La guía completa (qué es cada color, dónde va y qué no hacer) está en ESTILO_REDISENO.md. Resumen: verde bosque como marca y acción, verde muy claro en baldosas, fondos alternos y pie, neutros limpios y SIEMPRE fondo claro: no hay superficies oscuras ni modo oscuro. ========================================================================= */ /* --- Tipografía (ESTILO_REDISENO.md §4) --- Hanken Grotesk para titulares y texto, fina y sobria, con los titulares a 500; IBM Plex Mono para números y códigos (23/09/2026). Servidas desde nuestro servidor (licencia OFL), subconjunto latino, que incluye ñ, tildes, º, ª y €. Para cambiarla se tocan estos @font-face y los tres --font-* de abajo; nada más la nombra. */ @font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; } :root { /* --- Marca --- */ --brand: #0f7a5a; /* verde bosque: botones, enlaces, número de factura, logo (blanco encima ≈ 5,3:1) */ --brand-600: #0c664b; /* hover del botón principal */ --brand-700: #09513b; /* pulsado / texto de marca más denso */ --brand-copy: #d3efe3; /* verde claro: baldosas de icono, marcas de lista, pastillas de marca */ --brand-copy-soft: #edf8f3; /* verde muy claro: el pie */ /* --- Neutros. Bordes neutros; el verde claro queda para superficies y baldosas, no para las líneas. --- */ --ink: #18211d; /* titulares */ --body: #3f4944; /* texto normal */ --muted: #5d6762; /* secundario (≈ 6:1 sobre blanco) */ --line: #e4e4e8; /* bordes y separadores */ --line-strong: #c9c9d0; /* bordes suaves de controles (≈ 1,6:1: NO vale como único borde de un campo) */ --field-line: #868d89; /* borde de un campo de formulario: ≈ 3,4:1 sobre blanco, el mínimo de WCAG 1.4.11 */ --surface: #f3f8f5; /* verde casi blanco: secciones alternas, cabeceras de tabla, avisos */ --bg: #ffffff; --paper: #ffffff; /* el original */ --white: #ffffff; /* --- Ilustración de la multitud (Contacto): el trazo de los personajes y su relleno. El script recolorea el dibujo con estos dos, así que no hay color metido en el PNG. Gris verdoso para que quede de fondo, no de protagonista. --- */ --crowd-line: #c3d2ca; --crowd-fill: #ffffff; /* --- Estados (siempre acompañados de texto, nunca solo color) --- */ --ok: #1f7a4d; --ok-tint: #e6f4ec; --wait: #5d6762; /* en cola: gris */ --wait-tint: #efeff2; --warn: #8a5a00; --warn-tint: #fdf3e0; --danger: #b3261e; --danger-tint: #fdecea; --danger-line: #f3c5c1; /* --- Acentos de la aplicación (portal y /admin; la web no los usa). Pocos y vivos, no apagados: junto al verde, un tono pálido lo apaga todo. El azul es el color de los DATOS (gráficas); el ámbar, la señal de «se retrasa» (un punto, una barra de consumo). No son estados de texto ni acciones (eso es ok/warn/danger y --brand). Cuándo va color y cuándo no: docs/DISENO_WEBAPP.md § 14, «Cuándo va color». --- */ --acc-azul: #2f6fed; --acc-azul-tint: #eaf1ff; --acc-azul-texto: #1f56c9; /* azul para texto pequeño (≈ 5,6:1 sobre blanco) */ --acc-ambar: #e89412; --acc-ambar-tint: #fff4df; /* --- Tipografía --- */ --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Escala tipográfica (fluida) */ --fs-hero: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem); --fs-h2: clamp(1.65rem, 1.25rem + 1.6vw, 2.4rem); --fs-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem); --fs-lead: clamp(1.075rem, 1rem + 0.35vw, 1.25rem); --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; /* Escala FIJA de la aplicación (portal y /admin; la web no la usa). En una herramienta los titulares no crecen con la ventana. Ver docs/DISENO_WEBAPP.md § 7.3 del portal. */ --fs-app-h1: 1.75rem; /* título de página */ --fs-app-h2: 1.25rem; /* título de sección */ --fs-app-h3: 1.0625rem; /* título de tarjeta */ --fs-app-kpi: 1.75rem; /* cifra de un KPI: nunca mayor que el h1 */ /* Grosores: solo cuatro en toda la web (GUIA_REDACCION.md §5 bis). */ --fw-regular: 400; /* texto corrido */ --fw-medium: 500; /* etiquetas, menús, campos, código */ --fw-bold: 600; /* títulos de tarjeta, etiqueta al inicio de un punto, botones */ --fw-heavy: 500; /* titulares h1 y h2: finos, la jerarquía la da el tamaño */ /* --- Espaciado (múltiplos de 4) --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 6.5rem; /* --- Radios (ESTILO_REDISENO.md §6) --- */ --radius-sheet: 18px; /* tarjetas, hojas, tablas: suaves y redondeadas */ --radius-card: 18px; --radius-sm: 8px; /* campos (los botones van redondos del todo, --radius-pill) */ --radius: 10px; /* baldosas de icono */ --radius-lg: 14px; /* bandas grandes */ --radius-pill: 999px; /* --- Sombras: siempre suaves y difusas. El efecto de «doble capa» (la copia desplazada sin desenfoque) se retiró el 22/09/2026: las tarjetas quedaban recargadas. La copia rosa solo sobrevive en el logo. --- */ --shadow-card: 0 1px 2px rgba(20, 33, 27, 0.04), 0 10px 30px -14px rgba(20, 33, 27, 0.14); --shadow-hover: 0 2px 4px rgba(20, 33, 27, 0.05), 0 18px 40px -16px rgba(20, 33, 27, 0.22); --shadow-sheet: 0 2px 6px rgba(20, 33, 27, 0.05), 0 24px 56px -24px rgba(20, 33, 27, 0.25); --shadow-pop: 0 18px 40px -12px rgba(20, 33, 27, 0.22); /* Brillo verde bajo el botón de una oferta (pop-up de bienvenida): señala dónde pulsar. */ --shadow-cta: 0 10px 26px -8px rgba(15, 122, 90, 0.55); /* Velo detrás de los diálogos (pop-up de bienvenida, panel de cookies): tinta translúcida, no negro. */ --veil: rgba(20, 33, 27, 0.32); /* --- Iconos (Tabler, trazo 1,9) --- */ --icon-stroke: 1.9; /* --- Layout --- */ /* Margen lateral: 20 px en móvil, 40 px en escritorio. El contenido es ancho (1440 px) para que la información no vaya apretada en el centro. */ --gutter: clamp(1.25rem, 4vw, 2.5rem); --container: 1440px; --container-narrow: 960px; --measure: 68ch; /* Carcasa de la aplicación (portal y /admin; la web no la usa). */ --app-topbar: 64px; --app-sidebar: 256px; --app-sidebar-plegado: 72px; --app-fondo: #ffffff; /* fondo detrás de las tarjetas: blanco (23/09/2026; el verde saturaba) */ --app-borde-tarjeta: #dfe2e0; /* sobre blanco, la tarjeta se separa con un borde algo más marcado… */ --app-sombra-tarjeta: 0 1px 2px rgba(20, 33, 27, 0.05), 0 6px 18px -10px rgba(20, 33, 27, 0.16); /* …y una sombra corta */ --app-sombra-tarjeta-hover: 0 2px 4px rgba(20, 33, 27, 0.06), 0 14px 30px -14px rgba(20, 33, 27, 0.24); /* --- Movimiento --- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 120ms var(--ease-out); --t: 220ms var(--ease-out); --t-icon: 500ms var(--ease-out); /* Muelle con un rebote corto (≈ 4 %), como los «spring» de Framer. Para entradas, no para respuestas a un clic. linear() no lo entiende algún navegador viejo: app.css solo lo usa dentro de un @supports. */ --ease-spring: linear(0, 0.052, 0.174, 0.327, 0.486, 0.632, 0.757, 0.857, 0.932, 0.984, 1.018, 1.037, 1.045, 1.046, 1.042, 1.035, 1.028, 1.021, 1.014, 1.009, 1.005, 1.002, 1, 0.999, 1); --t-entrada: 800ms; /* --- Capas --- */ --z-header: 50; --z-menu: 60; --z-flotante: 70; /* botón de contacto fijo: por debajo del banner de cookies */ --z-cookie: 80; --z-skip: 100; --z-cajon: 90; /* menú lateral del panel en móvil, por encima de todo salvo el salto */ color-scheme: light; }