/* ========================================================================== MO Suite v2 — base compartida Todo lo que vale para CUALQUIER pantalla del v2: la fuente, los tokens de color, el fondo, la marca y los detalles de accesibilidad. Las hojas de cada pantalla (index_v2.css, configuracion.css) asumen que esto ya esta cargado y solo agregan lo suyo. Va linkeado ANTES que la hoja de la pantalla. LOS VALORES SALEN DE LA GUIA VISUAL DE LA COMPANIA (`utils/GUIA_VISUAL_MO.md` y su `referencia-visual.html`): la paleta, la tipografia, los radios y las sombras son los de ahi, para que la Suite se vea de la misma familia que el resto de las apps internas. La FORMA sigue siendo la nuestra y eso es a proposito: la guia describe una aplicacion de listados con menu lateral, y la Suite es una landing donde todo esta a la vista. Lo que se adopta son los colores, los tipos y las formas; la estructura de columnas se queda. Los nombres de los tokens son los que ya usaban nuestras hojas: cambiar el valor aca repinta las diez pantallas sin tocar una sola regla. ========================================================================== */ /* Inter, como todas las apps internas. Helvetica Now se queda para documentos y presentaciones, que es para lo que es. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* ----- Marca. Los unicos cuatro colores que no cambian nunca. ----------- */ --mo-violet: #7512BA; /* accion principal, encabezados */ --mo-lavander: #9358F4; /* foco, activo, badges secundarios */ --mo-black-purple: #410672; /* hover del primario, fin del degradado */ --mo-orange: #FB3D01; /* acento. Se usa poco y para una sola cosa */ /* ----- Superficies ----------------------------------------------------- El fondo de las apps de la compania es NEUTRO y el violeta vive en la navegacion: al reves de como lo teniamos. El oscuro es azulado, no negro ni violeta. */ --ground-deep: #0f1419; /* fondo de la pagina */ --ground-raised: #242b35; /* lo que se apoya por encima de una tarjeta */ --panel: #1a1f26; /* tarjetas, tablas, paneles */ --panel-strong: #2d3540; /* head de tabla, hover de fila */ --panel-border: #2d3540; --panel-border-hi: #3d4654; /* ----- Texto ----------------------------------------------------------- */ --ink: #e8eaed; /* principal y cifras */ --ink-soft: #b8c0cc; /* apoyo */ --ink-mute: #8b95a5; /* labels, captions, placeholders */ /* Tinte lila para iconos y chips. */ --chip: rgba(147, 88, 244, 0.18); /* ----- Estado. No son de marca: dicen que paso. ------------------------ */ --ok: #34d399; --warn: #FB3D01; /* pendiente. El naranja de marca, el unico */ --bad: #fca5a5; --info: #93c5fd; /* ----- Texto sobre un fondo teñido ------------------------------------ Las pastillas, chips y botones "suaves" llevan un fondo translúcido del color y el texto del mismo color. En oscuro el texto es el pastel; en claro tiene que ser el tono OSCURO del mismo color, porque el pastel sobre un fondo casi blanco no se lee (contraste 1:1). Antes estos valores estaban escritos a mano en cada hoja y en claro no cambiaban. */ --lila-ink: #E3D2FF; --ok-ink: #9EF2D0; --bad-ink: #FFC2CC; --amber-ink: #FDE08A; --naranja-ink: #FFC9B8; /* Naranja y lila como TEXTO chico. El naranja de marca sobre blanco da 3.6:1, que alcanza para una barra o un borde pero no para leer. */ --warn-ink: #FF8A5C; /* en oscuro se aclaran, como los de estado */ --acento-ink: #B28CFF; /* ----- Formas ---------------------------------------------------------- 8px es el radio general; 12px para las tarjetas grandes y los cuadraditos de icono; las pastillas van completamente redondeadas. */ --r-panel: 12px; --r-card: 8px; --r-pill: 999px; /* Sombras: muy sutiles, y mas profundas en oscuro porque el contraste contra el fondo es menor. */ --sombra-baja: 0 2px 12px rgba(0, 0, 0, 0.4); --sombra-alta: 0 4px 16px rgba(0, 0, 0, 0.45); /* El degradado violeta es la firma visual de la familia: aparece en la barra de navegacion y en el encabezado de lo principal de una pantalla. */ --degradado: radial-gradient(ellipse 80% 55% at 100% 0%, rgba(117, 18, 186, 0.22) 0%, rgba(65, 30, 95, 0.1) 38%, transparent 62%), linear-gradient(to bottom left, #342448 0%, #2a1c3c 32%, #221530 62%, #1b1126 100%); --degradado-base: #1b1126; --sobre-violeta: #ffffff; --gutter: clamp(16px, 2.4vw, 44px); } /* ===== MODO CLARO ========================================================= La guia entrega los dos modos y el oscuro es el que se ve por defecto. Acto seguido, todo lo que en las hojas de pantalla salga de un token cambia solo; lo que este escrito como blanco translucido sobre el degradado violeta —la barra, el menu de Configuracion, el destacado— se queda igual, y esta bien: ahi el fondo sigue siendo violeta en los dos modos. ========================================================================= */ :root[data-theme="light"] { --ground-deep: #F8F9FA; --ground-raised: #ffffff; --panel: #ffffff; --panel-strong: #f1f3f5; --panel-border: #e9ecef; --panel-border-hi: #dee2e6; --ink: #212529; --ink-soft: #495057; /* La guía dice #6c757d: sobre el fondo de página da 4.45:1, apenas abajo del mínimo para texto chico (4.5). Un punto más oscuro lo pasa. */ --ink-mute: #636b73; --chip: rgba(117, 18, 186, 0.1); /* Los de la guía, un tono más oscuros: son TEXTO sobre su propio fondo teñido (#059669 sobre verde claro da 3.4:1; #047857, 5:1). */ --ok: #047857; --warn: #FB3D01; --bad: #c81e1e; --info: #2563eb; --lila-ink: #5c0e94; --ok-ink: #047857; --bad-ink: #b91c1c; --amber-ink: #92400e; --naranja-ink: #c2410c; --warn-ink: #c2410c; --acento-ink: #7512BA; --sombra-baja: 0 2px 10px rgba(0, 0, 0, 0.1); --sombra-alta: 0 4px 12px rgba(0, 0, 0, 0.15); /* En claro el degradado de la navegacion es violeta solido, no apagado. */ --degradado: linear-gradient(to right, #7512BA 0%, #5c0e94 45%, #410672 100%); --degradado-base: #7512BA; } /* Que los controles del sistema (scrollbars, inputs) sigan el tema. */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: var(--ground-deep); color: var(--ink); font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } :focus-visible { outline: 2px solid var(--mo-lavander); outline-offset: 2px; border-radius: 6px; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; font-size: 20px; line-height: 1; } /* ===== FONDO ============================================================== Antes aca habia un cielo violeta con dos colinas. El fondo de las apps de la compania es neutro y plano, y el violeta se guarda para la navegacion: con las dos cosas a la vez, el violeta deja de significar algo. La clase sigue existiendo porque la traen seis templates, y sigue siendo el fondo de la pagina: ahora, el color de la pagina. ========================================================================= */ .sky { position: fixed; inset: 0; z-index: -1; background: var(--ground-deep); } /* ===== MARCA ============================================================== La marca REAL de Market One, no una reconstrucción. Antes acá había cuatro barritas hechas con y CSS, para no depender de un PNG. Quedaban parecidas de lejos y mal de cerca: las del logo de verdad son gruesas, se superponen y tienen el remate en zigzag. Un logo inventado no es un logo. `mo_marca.png` sale de recortar la marca de `mo_suite.png`, que es el archivo que usaba la suite original. Es blanco sobre transparente, así que sólo sirve sobre fondo oscuro — que es todo el v2. Los de los templates ya no hacen nada y se pueden borrar; se los deja ocultos para que una plantilla vieja que todavía los traiga no muestre cuatro barras sueltas al lado del logo. ========================================================================= */ .brand { display: flex; align-items: center; gap: 10px; flex: none; } .brand-mark { display: block; width: 26px; height: 25px; flex: none; background: url('/static/img/mo_marca.png') center / contain no-repeat; } .brand-mark i { display: none; } .brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); } .brand-name span { font-weight: 300; } /* ===== GUTTER ============================================================= */ .bleed { padding-inline: var(--gutter); } /* ===== SCROLLBAR ========================================================== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--panel-border-hi); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ===== CUERPO DE PANTALLA ================================================= `alto-fijo` es para las pantallas que tienen que entrar enteras y repartir el alto sobrante a su contenido —un tablero embebido, sobre todo—: la nav arriba, el pie abajo y el medio estirándose. El `minmax(0, 1fr)` del medio es lo que le permite ACHICARSE; con `1fr` solo, un iframe adentro empuja la fila y el pie se va abajo del pliegue. Las pantallas que scrollean normalmente no llevan la clase. ========================================================================= */ /* Toda pantalla armada con layout_v2: nav, contenido y pie. El pie se va abajo de la ventana aunque el contenido sea corto —si no, en una pantalla de dos líneas queda colgado en el medio— y la página scrollea si crece. */ body.hoja { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; } body.hoja.alto-fijo { height: 100dvh; overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto; } /* El contenido entre la nav y el pie. Cada hoja de pantalla lo ajusta a lo suyo; acá está sólo el aire de arriba y de abajo. */ .page { padding-block: clamp(18px, 2.6vh, 34px); min-width: 0; } body.hoja.alto-fijo .page { min-height: 0; display: flex; flex-direction: column; } /* ===== CHROME DE PANTALLA ================================================= La barra de arriba y el pie. Vivían en index_v2.css, o sea que sólo los tenía el home: cada pantalla nueva se dibujaba su propia nav (`.cd-nav` en calidad de datos, `.cfg-nav` en configuración) y ninguna se parecía del todo a las otras. Acá son de todos. El home tenía además un botón por bloque en la barra; se sacó porque los bloques ya están a la vista. Si algo así vuelve, no puede llamarse `.nav-link` acá: configuracion.css lo usa para sus pestañas y se pisarían. ========================================================================= */ /* La barra lleva el degradado violeta de la familia. En la guia lo lleva el sidebar, y la barra superior lo adopta en modo oscuro; como la Suite no tiene sidebar, es la barra la que carga con la marca. */ /* OJO con el selector: va `header.nav` y no `.nav` a secas. `nav` es tambien una clase de Bootstrap, y Configuracion la usa para su lista de secciones (`