/* 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 oscura, acento ámbar, Archivo para títulos e Instrument Sans para * el cuerpo. La referencia es `itevox-web/src/styles/globals.css`; los valores * de abajo son los mismos hexadecimales, no aproximaciones. * * ── 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. * * 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. * * Los selectores van como `:root[data-theme="…"]` en vez de `:root` a secas * porque Frappe declara sus variables en `:root, [data-theme="light"]`. Con la * forma compuesta ganamos por especificidad y no dependemos del orden en que * el acomode las hojas de estilo. */ /* ═══════════════════════════════════════════════════════════════════════════ Tokens ═══════════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"], :root[data-theme="dark"] { /* 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; --itevox-amber: #f5a623; --itevox-cherry: #e5484d; --itevox-teal: #1db6a8; --itevox-violet: #8b5cf6; --itevox-success: #3dd68c; --accent: var(--itevox-amber); /* 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; /* 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-dim); } /* ═══════════════════════════════════════════════════════════════════════════ 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-dim); } /* ═══════════════════════════════════════════════════════════════════════════ 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-dim); } .form-control:disabled, .form-control[readonly] { background-color: var(--itevox-bg-elev); color: var(--itevox-text-dim); } /* La flecha del