/* Identidad ITEVOX — portal público, login y web forms. * * Este archivo lleva el portal del ERP al mismo lenguaje visual de itevox.tech: * base cálida, acento ámbar, Archivo para títulos e Instrument Sans para el * cuerpo. La referencia es `itevox-web/src/styles/globals.css`; los valores del * tema oscuro son los mismos hexadecimales, no aproximaciones. * * **Desde el 2026-08-05 hay DOS temas**, claro y oscuro, y los decide el sistema * operativo con `prefers-color-scheme`. El detalle de por qué no hay otra opción * está en el bloque de tokens. * * ── Cómo está construido ──────────────────────────────────────────────────── * * Frappe deriva CASI TODO el color del portal de una sola rampa de grises * (`--gray-50` … `--gray-900`, en `frappe/public/scss/espresso/_colors.scss`): * `--border-color` es `--gray-200`, `--control-bg` es `--gray-100`, * `--text-muted` es `--gray-700`, y así. Entonces el tema oscuro se hace * **invirtiendo y entibiando esa rampa**, no persiguiendo componente por * componente: 50 pasa a ser el fondo más profundo y 900 el texto. Con eso * caen solos tarjetas, controles, bordes, scrollbars, dropdowns y hovers. * * El tema claro no invierte nada: esa lectura de la rampa es la de fábrica. * * Lo que NO cae solo son los valores que Bootstrap **compiló** a hexadecimal * cuando se construyó el bundle del sitio (`$body-color`, `$input-bg`, * `$primary`, `$headings-color`…): esos ya no son variables en tiempo de * ejecución, así que hay que reescribirlos con reglas explícitas. Ese es todo * el bloque de la mitad para abajo, y esa es la razón de que exista. * * El selector es `html:root` y no `:root` a secas, y eso NO es cosmético. * Medido contra el sitio real el 2026-07-31: la página de login mete * `login.bundle.css` en un bloque POSTERIOR a `head.html` —que es donde Frappe * recorre `web_include_css`—, y ese bundle vuelve a declarar `:root { * --bg-color: white; … }`. Con la misma especificidad (0,1,0) gana el último en * el orden, o sea Frappe, y todo este bloque quedaba pisado: el login salía * blanco con nuestro CSS cargado y aplicándose a nada. * * `html:root` es (0,1,1) y le gana a cualquier `:root` o `[data-theme="…"]` de * Frappe sin importar el orden del y sin recurrir a `!important`. (Los * pocos `!important` del archivo están abajo, en la sección de login, y cada * uno dice contra qué regla concreta pelea y por qué la especificidad no basta.) * * Y tampoco se filtra por `data-theme`: el del portal no trae ese * atributo (``), es cosa del escritorio. Filtrar por * él aquí equivalía a no matchear nunca — y es también la razón de que el * conmutador claro/oscuro sea el del sistema y no uno por usuario: aquí no hay * dónde guardar esa preferencia. */ /* ═══════════════════════════════════════════════════════════════════════════ El portal tiene DOS temas, y el conmutador es el sistema operativo. No hay alternativa: el portal **no tiene `data-theme`** —es ``, ese atributo es del escritorio— ni un ajuste por usuario donde guardar la preferencia. `prefers-color-scheme` es lo único que llega hasta aquí. ── Cómo está montado, y por qué así ──────────────────────────────────────── **Claro es el default y oscuro va en la media query.** Se hizo en ese orden a propósito: el bloque oscuro es el que ya estaba medido y verificado en el sitio —los 70 tokens de la familia ink/surface/outline, el par cableado del botón de login, la rejilla de contactos— y entra aquí **sin tocar un solo valor**. Lo nuevo es sólo la rama clara, que es donde puede haber errores. **La rampa se invierte SÓLO en oscuro.** Ésa era la clave que hacía corto el tema: el portal no tenía modo oscuro, así que Frappe lee la rampa como "50 = fondo, 900 = texto" e invertirla voltea el portal entero. En claro esa lectura es la correcta de fábrica, así que la rampa va natural y no hay nada que voltear. **En claro casi no hay que declarar nada más.** Los 70 tokens ink/surface/outline y los `--alert-text-*` existen en el bloque oscuro porque había que reponer a mano el tema oscuro que el portal no trae. Para claro los valores de Frappe ya son los correctos, así que aquí sólo se entibian los neutros y se pone el acento. ═══════════════════════════════════════════════════════════════════════════ */ html:root { /* Marca ITEVOX en claro. Papel cálido, no blanco puro: el blanco puro con acento ámbar se lee frío y barato, y además deja el borde invisible. Medido el 2026-08-05 contra los tres fondos (bg / tarjeta / blanco): text 16.37–18.10, text-muted 6.82–7.54, text-help 5.18–5.73. */ --itevox-bg: #f7f3ec; --itevox-bg-elev: #fffdf9; --itevox-bg-elev-2: #ffffff; --itevox-border: #e2d9cb; --itevox-text: #1a1512; --itevox-text-muted: #5c5348; --itevox-text-dim: #8b8175; --itevox-text-help: #6e6558; /* Los colores de marca **no sirven para texto sobre claro**, y está medido: el ámbar da 1.83–2.03:1, el cherry 3.54 y el verde 1.70. Se quedan como relleno, borde e indicador —que es su función— y para TEXTO se usan las variantes oscurecidas de abajo. En oscuro no hace falta: ahí el ámbar da 9.75:1 y pinta texto sin problema. */ --itevox-amber: #f5a623; --itevox-cherry: #e5484d; --itevox-teal: #1db6a8; --itevox-violet: #8b5cf6; --itevox-success: #3dd68c; /* Las de texto: 5.36–5.93 el ámbar, 5.91–6.53 el cherry, 4.86–5.38 el verde. */ --itevox-amber-texto: #8a5a00; --itevox-cherry-texto: #b3252a; --itevox-success-texto: #0f7a4a; --accent: var(--itevox-amber); /* Lo que va ENCIMA del acento. El ámbar es claro en los dos temas, así que siempre lleva texto oscuro — pero cuál es "oscuro" cambia: en oscuro es el fondo de la página, en claro es el color de texto. Sin este token, el botón de login heredaba `--itevox-bg` y en claro quedaba casi blanco sobre ámbar (1.83:1). */ --itevox-sobre-acento: var(--itevox-text); /* Rampa natural y entibiada: 50 = claro, 900 = oscuro. Es la orientación que Frappe supone de fábrica para el portal. */ --gray-50: #f7f3ec; --gray-100: #ece5d9; --gray-200: #e2d9cb; --gray-300: #cabca6; --gray-400: #a1927c; --gray-500: #7d7264; --gray-600: #6e6558; --gray-700: #5c5348; --gray-800: #3a332c; --gray-900: #1a1512; } @media (prefers-color-scheme: dark) { html:root { /* Marca ITEVOX — espejo de los tokens de itevox-web. El mapeo producto→color es regla de marca y no se cambia aquí: ITEVOX = ámbar · PROVISIONIX = cherry · NEOIDEX = teal · STAFFLY = violeta. El ERP es superficie corporativa, así que su acento es el ámbar. */ --itevox-bg: #0c0a08; --itevox-bg-elev: #15110d; --itevox-bg-elev-2: #1f1a14; --itevox-border: #2a2118; --itevox-text: #f4ede4; --itevox-text-muted: #a89b8a; --itevox-text-dim: #6b5f50; /* El texto secundario NO usa `--itevox-text-dim`, y eso está medido: sobre nuestros tres fondos da 2.78–3.18:1, o sea que no pasa AA en ninguno. Se vio en vivo el 2026-08-01 en el web form de alta — las ayudas bajo RFC y Uso del CFDI quedaban casi ilegibles (3.02:1). `--itevox-text-dim` se queda declarado porque es el token de marca que viene del sitio, pero para TEXTO se usa éste: 4.79:1 sobre la tarjeta, sigue siendo recesivo y sí se lee. */ --itevox-text-help: #8b7f6d; --itevox-amber: #f5a623; --itevox-cherry: #e5484d; --itevox-teal: #1db6a8; --itevox-violet: #8b5cf6; --itevox-success: #3dd68c; --accent: var(--itevox-amber); /* Ver la nota del bloque claro. */ --itevox-sobre-acento: var(--itevox-bg); --itevox-amber-texto: var(--itevox-amber); --itevox-cherry-texto: var(--itevox-cherry); --itevox-success-texto: var(--itevox-success); /* Rampa de grises invertida y entibiada. 50 = fondo, 900 = texto. Los extremos son tokens de marca; los intermedios interpolan entre ellos para que sombras, bordes y hovers escalen parejo. */ --gray-50: #15110d; --gray-100: #1f1a14; --gray-200: #2a2118; --gray-300: #362c20; --gray-400: #4d4032; --gray-500: #6b5f50; --gray-600: #8b7f6d; --gray-700: #a89b8a; --gray-800: #d3c8ba; --gray-900: #f4ede4; /* ── Familia ink / surface / outline ──────────────────────────────────── Frappe v16 arrastra DOS sistemas de color a la vez: la rampa `--gray-*` de arriba (la vieja) y ésta, más nueva y semántica. Invertir solo la primera dejaba componentes enteros en claro — el botón de "Iniciar sesión con Google" salía gris claro sobre el fondo oscuro porque toma `--surface-gray-2` y `--ink-gray-4`. Estos 70 valores NO son inventados: salen del bloque `[data-theme="dark"]` de `frappe/public/scss/espresso/_colors.scss`, o sea del tema oscuro que Frappe ya mantiene. De ahí se entibiaron los 28 neutros a nuestra paleta; los 42 cromáticos (rojo, verde, ámbar, azul de estado) se quedan con el valor de Frappe: ya están calibrados para fondo oscuro y no son marca nuestra. Al actualizar Frappe conviene volver a mirar ese bloque: si agregan tokens, aquí faltarán y ese componente saldrá claro. Es el costo de no depender de que el portal traiga `data-theme="dark"`, que no lo trae. */ --outline-white: #15110d; --outline-gray-1: #1f1a14; --outline-gray-2: #2a2118; --outline-gray-3: #362c20; --outline-gray-4: #8b7f6d; --outline-red-1: #521515; --outline-red-2: #681916; --outline-red-3: #901818; --outline-green-1: #0a3f27; --outline-green-2: #035831; --outline-amber-1: #4b2606; --outline-amber-2: #603007; --outline-blue-1: #052b53; --outline-orange-1: #683108; --outline-gray-modals: #2a2118; --surface-white: #0c0a08; --surface-gray-1: #1f1a14; --surface-gray-2: #241e17; --surface-gray-3: #2a2118; --surface-gray-4: #362c20; --surface-gray-5: #b8ab99; --surface-gray-6: #d3c8ba; --surface-gray-7: #f4ede4; --surface-red-1: #361515; --surface-red-2: #361515e6; --surface-red-3: #521515e6; --surface-red-4: #681916; --surface-red-5: #e43838; --surface-red-6: #c12020; --surface-red-7: #901818; --surface-green-1: #0b2e1c; --surface-green-2: #0a3f27; --surface-green-3: #1ba964; --surface-amber-1: #371e06; --surface-amber-2: #4b2606; --surface-amber-3: #e37d00; --surface-blue-1: #0e2037; --surface-blue-2: #052b53; --surface-blue-3: #3294e3; --surface-orange-1: #401f07cc; --surface-violet-1: #221c42; --surface-cyan-1: #0b252d; --surface-pink-1: #471432cc; --surface-menu-bar: #0c0a08; --surface-cards: #15110d; --surface-modal: #1f1a14; --surface-selected: #362c20; --ink-white: #0c0a08; --ink-gray-1: #1f1a14; --ink-gray-2: #362c20; --ink-gray-3: #6b5f50; --ink-gray-4: #6b5f50; --ink-gray-5: #8b7f6d; --ink-gray-6: #a89b8a; --ink-gray-7: #b8ab99; --ink-gray-8: #d3c8ba; --ink-gray-9: #f4ede4; --ink-red-2: #681916; --ink-red-3: #e43838; --ink-red-4: #fc7474; --ink-green-2: #1ba964; --ink-green-3: #58c08e; --ink-amber-2: #e37d00; --ink-amber-3: #e79913; --ink-blue-2: #3294e3; --ink-blue-3: #5aaef2; --ink-cyan-1: #3cb8dc; --ink-pink-1: #e359ab; --ink-violet-1: #9d7cea; /* Único cromático que sí pisamos: es el color de los enlaces, y en ITEVOX los enlaces son ámbar. El nombre dice "blue" porque es de Frappe. */ --ink-blue-link: var(--accent); /* Superficies que Frappe fija en `white` literal (no salen de la rampa). */ --bg-color: var(--itevox-bg); --fg-color: var(--itevox-bg-elev); --modal-bg: var(--itevox-bg-elev); --popover-bg: var(--itevox-bg-elev); --navbar-bg: var(--itevox-bg); --code-block-bg: var(--itevox-bg-elev-2); --code-block-text: var(--itevox-text-muted); /* `--text-dark` significa "texto sobre fondo oscuro", y Frappe lo deriva de --fg-color asumiendo que es blanco. Invertido el tema, hay que fijarlo. */ --text-dark: var(--itevox-text); /* El primario de Frappe es gris-900 (negro). Aquí es el ámbar de marca. */ --primary: var(--accent); --primary-color: var(--accent); --btn-primary: var(--accent); --border-primary: var(--accent); --checkbox-color: var(--accent); --checkbox-focus-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent); /* Fondos de alerta: la escala azul/verde/roja de Frappe es clarísima y sobre el fondo cálido se ve como parches. Se retintan las cuatro que sí aparecen en el portal (validación de formularios, acuse de envío). */ --alert-bg-danger: color-mix(in oklab, var(--itevox-cherry) 16%, var(--itevox-bg-elev)); --alert-bg-warning: color-mix(in oklab, var(--itevox-amber) 16%, var(--itevox-bg-elev)); --alert-bg-info: color-mix(in oklab, var(--itevox-teal) 14%, var(--itevox-bg-elev)); --alert-bg-success: color-mix(in oklab, var(--itevox-success) 14%, var(--itevox-bg-elev)); --alert-text-danger: #f8a1a4; --alert-text-warning: #f7c46c; --alert-text-info: #6fd8ce; --alert-text-success: #85e5b4; --font-stack: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --itevox-font-display: "Archivo", ui-sans-serif, system-ui, sans-serif; --itevox-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* La curva de estados del sitio (`--ease-snappy` en globals.css). */ --itevox-ease: cubic-bezier(0.2, 0, 0, 1); } } /* ═══════════════════════════════════════════════════════════════════════════ Base ═══════════════════════════════════════════════════════════════════════════ */ body { background-color: var(--bg-color); color: var(--itevox-text-muted); font-family: var(--font-stack); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Archivo en su corte Expanded para los títulos grandes, igual que en el sitio. De H3 para abajo se queda en el ancho normal: a tamaño chico el Expanded pierde legibilidad y se lee como un error de tracking. */ h1, h2, .web-form-title h1, .page-header h1 { font-family: var(--itevox-font-display); font-weight: 800; font-stretch: 125%; line-height: 1.05; letter-spacing: -0.02em; color: var(--itevox-text); } h3, h4, h5, h6, .section-head, .head-title { font-family: var(--itevox-font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--itevox-text); } p, li, td, label, .control-label { color: var(--itevox-text-muted); } a { color: var(--accent); text-decoration: none; transition: color 0.15s var(--itevox-ease); } a:hover, a:focus { color: color-mix(in oklab, var(--accent) 78%, white); text-decoration: none; } /* Foco visible en todos lados, en el color de acento. Es requisito de accesibilidad y además es el detalle que más delata un tema a medio hacer. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } ::selection { background-color: color-mix(in oklab, var(--accent) 35%, transparent); color: var(--itevox-text); } hr { border-color: var(--itevox-border); } /* Cifras tabulares donde hay números que se comparan en columna (importes, RFC, códigos postales): evita que la columna baile entre renglones. */ .tnum, td.text-right, .indicator-pill { font-variant-numeric: tabular-nums; } /* Eyebrow mono en versalitas — el recurso tipográfico de la casa. * * Es OPT-IN por clase y no se cuelga de ningún selector de Frappe a propósito. * La versión anterior apuntaba a `.web-form-head .text-muted` creyendo que ahí * vivía un rótulo corto, y lo que hay es el párrafo de descripción del web * form: una oración completa quedaba en mayúsculas con tracking de 0.14em, * ilegible. Un eyebrow son dos o tres palabras; si no lo controlamos nosotros, * no lo tipografiamos así. */ .text-eyebrow { font-family: var(--itevox-font-mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--itevox-text-help); } /* ═══════════════════════════════════════════════════════════════════════════ Navbar y footer ═══════════════════════════════════════════════════════════════════════════ */ .navbar, .navbar-light, .navbar-expand-lg { background-color: var(--navbar-bg) !important; border-bottom: 1px solid var(--itevox-border); } .navbar .nav-link, .navbar .navbar-brand { color: var(--itevox-text) !important; } .navbar .nav-link:hover { color: var(--accent) !important; } /* El item activo ya trae `border-bottom: 1px solid var(--primary)` de Frappe, así que hereda el ámbar solo. Aquí solo se engrosa para que se note. */ .navbar .nav-item.active { border-bottom-width: 2px; } .navbar-brand img { height: 26px; width: auto; } .web-footer, footer { background-color: var(--itevox-bg); border-top: 1px solid var(--itevox-border); color: var(--itevox-text-help); } /* ═══════════════════════════════════════════════════════════════════════════ Superficies ═══════════════════════════════════════════════════════════════════════════ */ .card, .web-form-header, .web-form-container, .portal-section, .box, .modal-content, .dropdown-menu { background-color: var(--itevox-bg-elev); border-color: var(--itevox-border); color: var(--itevox-text-muted); } .dropdown-item { color: var(--itevox-text-muted); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--itevox-bg-elev-2); color: var(--itevox-text); } /* Rejilla "blueprint" tenue de fondo — la textura de infraestructura del sitio. Va solo en el shell de la página para que no interfiera con la lectura de los formularios. */ .page-content-wrapper { background-image: linear-gradient(to right, color-mix(in oklab, var(--itevox-text) 3%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--itevox-text) 3%, transparent) 1px, transparent 1px); background-size: 64px 64px; } /* Filete de acento que degrada: el "hairline" que cose las secciones en el sitio. Aquí corona el encabezado del web form. */ .web-form-header { position: relative; overflow: hidden; } .web-form-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, var(--accent), transparent 75%); } /* ═══════════════════════════════════════════════════════════════════════════ Controles `$input-bg`, `$input-border-color` y `$input-focus-bg` quedaron compilados a hexadecimal claro en el bundle de Bootstrap, así que van explícitos. ═══════════════════════════════════════════════════════════════════════════ */ .form-control, .frappe-control input, .frappe-control textarea, .frappe-control select, select.form-control, textarea.form-control, .like-disabled-input { background-color: var(--itevox-bg-elev-2); border: 1px solid var(--itevox-border); border-radius: 0.75rem; color: var(--itevox-text); transition: border-color 0.15s var(--itevox-ease), background-color 0.15s var(--itevox-ease); } .form-control:focus, .frappe-control input:focus, .frappe-control textarea:focus, .frappe-control select:focus { background-color: var(--itevox-bg-elev-2); border-color: color-mix(in oklab, var(--accent) 55%, var(--itevox-border)); box-shadow: none; color: var(--itevox-text); } .form-control::placeholder { color: var(--itevox-text-help); } .form-control:disabled, .form-control[readonly] { background-color: var(--itevox-bg-elev); color: var(--itevox-text-help); } /* La flecha del