/*
* Design system de OMNA para los portales de ÚLTIMA MILLA.
* ────────────────────────────────────────────────────────
* Contrato compartido por TODOS los portales que construimos para un cliente
* (hoy: abasto, precios, mercado). Se inyecta al final del de cada
* portal, después de sus propios estilos, para ganar por cascada sin tener
* que reescribir el CSS original de cada sistema.
*
* POR QUÉ EXISTE
* Cada portal nació en un repo distinto, para un cliente distinto, con su
* propia paleta. Puestos uno al lado del otro en la sección Sistemas parecen
* software de tres proveedores — que es exactamente lo contrario de lo que
* la sección vende: «estos son los sistemas que OMNA te construyó». La
* unidad visual no es estética, es el argumento comercial.
*
* LOS VALORES SON LOS DE LA APP, NO UNOS PARECIDOS.
* Copiados de src/app/globals.css del propio omna-brain: si el producto
* cambia su morado, estos portales tienen que cambiarlo con él, y para eso
* hay que poder rastrear de dónde salió cada número.
*
* CÓMO SE USA
* (al final del )
* y el logo, como o inline.
*/
:root {
/* ── paleta de omna-brain (globals.css, tema claro) ── */
--omna-bg: #ffffff;
--omna-fg: #160221;
--omna-card: #ffffff;
--omna-primary: #51127f;
--omna-primary-fg: #ffffff;
--omna-muted: #f7f5f9;
--omna-muted-fg: #6f6480;
--omna-accent: #f8f1fd;
--omna-accent-fg: #350a52;
--omna-border: #e0dbe6;
--omna-ring: #ad6fd9;
--omna-destructive: #c63434;
--omna-purple: #954acc;
--omna-green: oklch(0.65 0.2 145);
--omna-blue: oklch(0.6 0.18 240);
--omna-radius: 0.5rem;
--omna-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--omna-mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
}
/* El portal hereda tipografía y fondo. `body` con especificidad baja a
propósito: si el sistema original define lo suyo con más peso, gana él —
esto estandariza, no impone. */
body {
font-family: var(--omna-font);
color: var(--omna-fg);
background: var(--omna-bg);
}
code, pre, .mono, [class*="mono"] {
font-family: var(--omna-mono);
}
/* ── Barra de identidad ───────────────────────────────────────────────
Se antepone a cualquier cabecera propia del portal. Es lo que hace que
los tres sistemas se lean como una familia y no como tres productos. */
.omna-topbar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
background: var(--omna-primary);
color: var(--omna-primary-fg);
font-family: var(--omna-font);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
}
.omna-topbar img,
.omna-topbar svg {
height: 26px;
width: auto;
display: block;
}
.omna-topbar .omna-sep {
opacity: 0.45;
font-weight: 300;
}
.omna-topbar .omna-sistema {
opacity: 0.92;
}
/* Sello discreto a la derecha: quién construyó esto. */
.omna-topbar .omna-por {
margin-left: auto;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.62;
}
/* ── Normalización suave de superficies ───────────────────────────────
Solo toca lo que casi todos los portales tienen: tarjetas, botones
primarios y tablas. No se reescribe el layout de cada sistema. */
.omna-card,
.card {
background: var(--omna-card);
border: 1px solid var(--omna-border);
border-radius: var(--omna-radius);
}
button.omna-primary,
.btn-primary {
background: var(--omna-primary);
color: var(--omna-primary-fg);
border: none;
border-radius: var(--omna-radius);
padding: 8px 14px;
font-family: var(--omna-font);
font-weight: 500;
cursor: pointer;
}
button.omna-primary:hover,
.btn-primary:hover {
background: var(--omna-purple);
}
:focus-visible {
outline: 2px solid var(--omna-ring);
outline-offset: 2px;
}
o inline.
*/
:root {
/* ── paleta de omna-brain (globals.css, tema claro) ── */
--omna-bg: #ffffff;
--omna-fg: #160221;
--omna-card: #ffffff;
--omna-primary: #51127f;
--omna-primary-fg: #ffffff;
--omna-muted: #f7f5f9;
--omna-muted-fg: #6f6480;
--omna-accent: #f8f1fd;
--omna-accent-fg: #350a52;
--omna-border: #e0dbe6;
--omna-ring: #ad6fd9;
--omna-destructive: #c63434;
--omna-purple: #954acc;
--omna-green: oklch(0.65 0.2 145);
--omna-blue: oklch(0.6 0.18 240);
--omna-radius: 0.5rem;
--omna-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--omna-mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
}
/* El portal hereda tipografía y fondo. `body` con especificidad baja a
propósito: si el sistema original define lo suyo con más peso, gana él —
esto estandariza, no impone. */
body {
font-family: var(--omna-font);
color: var(--omna-fg);
background: var(--omna-bg);
}
code, pre, .mono, [class*="mono"] {
font-family: var(--omna-mono);
}
/* ── Barra de identidad ───────────────────────────────────────────────
Se antepone a cualquier cabecera propia del portal. Es lo que hace que
los tres sistemas se lean como una familia y no como tres productos. */
.omna-topbar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
background: var(--omna-primary);
color: var(--omna-primary-fg);
font-family: var(--omna-font);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
}
.omna-topbar img,
.omna-topbar svg {
height: 26px;
width: auto;
display: block;
}
.omna-topbar .omna-sep {
opacity: 0.45;
font-weight: 300;
}
.omna-topbar .omna-sistema {
opacity: 0.92;
}
/* Sello discreto a la derecha: quién construyó esto. */
.omna-topbar .omna-por {
margin-left: auto;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.62;
}
/* ── Normalización suave de superficies ───────────────────────────────
Solo toca lo que casi todos los portales tienen: tarjetas, botones
primarios y tablas. No se reescribe el layout de cada sistema. */
.omna-card,
.card {
background: var(--omna-card);
border: 1px solid var(--omna-border);
border-radius: var(--omna-radius);
}
button.omna-primary,
.btn-primary {
background: var(--omna-primary);
color: var(--omna-primary-fg);
border: none;
border-radius: var(--omna-radius);
padding: 8px 14px;
font-family: var(--omna-font);
font-weight: 500;
cursor: pointer;
}
button.omna-primary:hover,
.btn-primary:hover {
background: var(--omna-purple);
}
:focus-visible {
outline: 2px solid var(--omna-ring);
outline-offset: 2px;
}