/* ═══════════════════════════════════════════════════════════ éxodo — valores de marca · v3.7 · 08/10/2026 Fuente: manual de marca de éxodo (interno). Este archivo se copia tal cual. No se agregan valores acá: si falta uno, se pide y entra primero al manual. ═══════════════════════════════════════════════════════════ */ :root { /* ── Núcleo: una sola escala de neutros, todos cálidos ── */ --exodo-tinta-profunda: #070708; /* fondo alterno oscuro */ --exodo-tinta: #0a0a0b; /* fondo oscuro · texto sobre claro */ --exodo-panel: #101013; /* paneles sobre tinta */ --exodo-tinta-suave: #131316; /* tarjetas sobre tinta */ --exodo-gris-oscuro: #56544f; /* rótulos sobre claro (6,7:1) */ --exodo-gris-medio: #6e6b65; /* texto secundario sobre claro (4,7:1) */ --exodo-gris: #8a8782; /* texto secundario y rótulos sobre oscuro (5,5:1) */ --exodo-gris-claro: #b3afa6; /* deshabilitado, decorativo. Nunca texto sobre claro */ --exodo-hueso-suave: #ebe8e1; /* fondo alterno claro */ --exodo-hueso: #f3f1ec; /* fondo claro · texto sobre oscuro */ --exodo-papel: #faf9f7; /* fondo de trabajo en producto */ --exodo-blanco: #ffffff; /* tarjetas y tablas de datos */ --exodo-linea-oscuro: rgba(243, 241, 236, 0.10); --exodo-linea-claro: rgba(10, 10, 11, 0.12); /* Derivados, para donde no hay transparencia (mail e impresión): */ --exodo-linea-mail: #d7d5d1; /* tinta al 12% sobre hueso, en un mail */ --exodo-bpo-mail: #7f7e7c; /* "bpo" del logo al 50% sobre hueso, en un mail */ --exodo-e-tarjeta: #161616; /* la é del frente de la tarjeta: hueso al 5% sobre tinta */ /* ── Acento institucional: el único fuera de la web ── */ --exodo-azul: #268db5; /* rellenos chicos, líneas, puntos, progreso, foco */ --exodo-azul-luz: #6fc1e0; /* cursiva de cierre y enlaces sobre oscuro */ --exodo-azul-texto: #1d6f91; /* cursiva de cierre y enlaces sobre claro */ /* ── Secciones de la web: SOLO en exodobpo.com y su blog ── */ --exodo-web-nosotros: #e31610; --exodo-web-servicios: #268db5; --exodo-web-tecnologia: #ffb900; --exodo-web-clientes: #40ac47; /* ── Estados: SOLO donde hay un estado real ── base = puntos, íconos, gráficos y lo lleno (lo que te toca, con texto en tinta) · fondo/texto = etiquetas. Verde y rojo nunca van llenos: son resultados y no esperan a nadie. */ --exodo-verde: #40ac47; --exodo-verde-fondo: #effbf0; --exodo-verde-texto: #1e6c22; --exodo-verde-fondo-osc: #0f2912; --exodo-verde-texto-osc: #6fce73; /* Apto; fuente que respondió */ --exodo-rojo: #e31610; --exodo-rojo-fondo: #fef1f1; --exodo-rojo-texto: #9a1813; --exodo-rojo-fondo-osc: #291515; --exodo-rojo-texto-osc: #fb7070; /* No apto; fuente que falló */ --exodo-amarillo: #ffb900; --exodo-amarillo-fondo: #fff9e5; --exodo-amarillo-texto: #7a4e00; --exodo-amarillo-fondo-osc: #291f00; --exodo-amarillo-texto-osc: #fbc523; /* pide atención: plazo, algo para revisar, sin verificar */ --exodo-naranja: #f27526; --exodo-naranja-fondo: #f27526; --exodo-naranja-texto: #0a0a0b; --exodo-naranja-fondo-osc: #f27526; --exodo-naranja-texto-osc: #0a0a0b; --exodo-naranja-fila: #fff4eb; /* con inconvenientes: SIEMPRE lleno, en claro y en oscuro; nunca texto naranja. -fila = fondo de la fila que te toca */ --exodo-curso: #268db5; --exodo-curso-fondo: #eff7fa; --exodo-curso-texto: #1d6f91; --exodo-curso-fondo-osc: #0f202f; --exodo-curso-texto-osc: #6fc1e0; /* en curso, informativo */ --exodo-neutro: #8a8782; --exodo-neutro-fondo: #ebe8e1; --exodo-neutro-texto: #56544f; --exodo-neutro-fondo-osc: #1b1b1f; --exodo-neutro-texto-osc: #b3afa6; /* pendiente, incompleto, vencido, sin dato */ /* ── Origen: el violeta de éxodo check. NO es un estado ── Solo dentro de éxodo cloud: el punto del rótulo "éxodo check" y el filete de 3px de sus solapas. Nunca lleno, nunca en texto ni en un botón. Impreso, en tinta. */ --exodo-origen-check: #7c5cc4; --exodo-origen-check-osc: #a48df0; /* ── Tipografía ── */ --exodo-fuente: 'Outfit', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --exodo-fuente-mono: 'JetBrains Mono', Consolas, 'SF Mono', ui-monospace, monospace; /* La cursiva es Exodo Cursiva, registrada como el estilo italic de Outfit (ver más abajo). */ --exodo-peso-fino: 200; /* cifras protagonistas, desde 32px, y cursiva, desde 24px */ --exodo-peso-texto: 300; --exodo-peso-interfaz: 400; --exodo-peso-enfasis: 600; --exodo-peso-titulo: 700; --exodo-peso-titular: 750; /* 700 donde no hay fuente variable */ --exodo-peso-logo: 800; /* el logo y el resultado de un análisis. El 900 no se usa */ --exodo-tracking-logo: -0.04em; --exodo-tracking-titular: -0.045em; --exodo-tracking-rotulo: 0.2em; /* JetBrains Mono 400 en mayúsculas: de 0.16em a 0.22em */ --exodo-rotulo-lamina: 18px; /* lámina y fondo de videollamada de 1920 × 1080 */ --exodo-rotulo-compartir: 16px; /* imagen para compartir de 1200 × 630 */ --exodo-rotulo-placa: 24px; /* placa de redes de 1080px de ancho */ --exodo-rotulo-a4: 7.5pt; /* documento impreso */ /* ── Forma ── */ --exodo-radio-control: 8px; --exodo-radio-tarjeta: 12px; --exodo-radio-ventana: 16px; --exodo-radio-etiqueta: 5px; --exodo-radio-pildora: 999px; --exodo-espacio-1: 8px; --exodo-espacio-2: 24px; --exodo-espacio-3: 48px; --exodo-espacio-4: 96px; --exodo-curva: cubic-bezier(0.16, 1, 0.3, 1); /* ── Producto: medidas de pantalla (capítulo "Estructura de pantalla") ── */ --exodo-portal-barra: 76px; /* barra del portal; 64px al desplazar */ --exodo-portal-barra-compacta: 64px; --exodo-mesa-riel: 56px; /* riel de la mesa */ --exodo-legajo-ancho: 760px; /* legajo: panel lateral sobre el inicio */ --exodo-asistente-ancho: 400px; /* asistente del caso */ --exodo-fila: 50px; /* fila de tabla en el portal */ --exodo-campo-caja: 40px; /* campo de caja, en la mesa y en configuración */ --exodo-rotulo-minimo: 11px; /* ningún rótulo de pantalla por debajo */ --exodo-texto-producto: 14px; /* texto de interfaz: de 13 a 14px */ /* ── Producto: lo que salta a la vista (capítulo "Estructura de pantalla") ── te toca = el estado que espera a quien mira: lleno, con el color base · atención = amarillo en su celda · información = suave */ --exodo-banda-cifra: 3px; /* cifra que informa: banda arriba, del color de su estado */ --exodo-banda-te-toca: 4px; /* cifra que te toca: banda más gruesa, fondo claro y número con color */ --exodo-barra-fila: 4px; /* fila que te toca: barra a la izquierda y fondo claro del color */ /* ── Producto: estados (capítulo "Estados, errores y confirmaciones") ── El sistema habla en el color contrario al fondo: tinta sobre claro, hueso sobre oscuro. */ --exodo-sistema-fondo: #0a0a0b; /* cartel, franja de error, banda del sistema. En oscuro: #f3f1ec */ --exodo-sistema-texto: #f3f1ec; /* en oscuro: #0a0a0b */ --exodo-sistema-enlace: #6fc1e0; /* en oscuro: #1d6f91 */ --exodo-velo: rgba(10, 10, 11, 0.5); --exodo-cartel-ancho: 560px; /* máximo; 24px del borde de abajo, radio 12px */ --exodo-ventana-ancho: 480px; /* 560px con un campo; radio 16px */ --exodo-error-campo: #e31610; /* borde de 1px; 2px en un campo de línea */ --exodo-esqueleto: rgba(10, 10, 11, 0.12); /* en oscuro: rgba(243, 241, 236, 0.10) */ --exodo-latido: 1.6s; /* esqueleto y logo que late: opacidad de .5 a 1 */ --exodo-cartel-dura: 4s; /* 8s si trae una acción; el de error, hasta que se cierra */ } /* Ficha de persona: la sigla dice quién es; el color, no. uso: T C CY */ .exodo-ficha { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.15em; height: 2.15em; padding: 0 .4em; border-radius: .5em; font-family: var(--exodo-fuente-mono, 'JetBrains Mono', monospace); font-size: .8em; font-weight: 500; line-height: 1; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; white-space: nowrap; } .exodo-ficha--titular { background: var(--exodo-tinta, #0a0a0b); color: var(--exodo-hueso, #f3f1ec); box-shadow: none; } .exodo-ficha--dependiente { box-shadow: none; border: 1px dashed currentColor; opacity: .75; } .exodo-ficha--juridica { border-radius: 0; } .exodo-ficha--suma::after { content: '+'; position: absolute; top: -.5em; right: -.5em; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--exodo-tinta, #0a0a0b); color: var(--exodo-hueso, #f3f1ec); font-size: .82em; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; } /* La cursiva de marca. Con esto, font-style: italic sobre Outfit usa el archivo propio en lugar de la inclinación automática del navegador. */ @font-face { font-family: 'Outfit'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fuentes/ExodoCursiva-Variable.woff2') format('woff2'); } /* El logo, cuando se arma con texto (web y producto) */ .exodo-logo { font-family: var(--exodo-fuente); font-weight: 800; letter-spacing: -0.04em; text-transform: lowercase; white-space: nowrap; } .exodo-logo > span { font-weight: 300; opacity: 0.5; } /* uso: */