/* ═══
LaMaruja Design System v1.0
The single source of truth for all LaMaruja app styling
═══ */
/* public/mrj-palette.css (2026-08-29, consistencia-os): --mrj-cream y
--font-heading/--font-body ya NO se declaran a mano aquí abajo — vienen de
este import compartido con tv.css (Modo TV, página aparte que no carga
este fichero — ver su cabecera). Un @import debe ir antes que cualquier
otra regla (salvo @charset), por eso está aquí arriba y no junto al resto
de la paleta más abajo. */
@import url('/mrj-palette.css');
/* MEJORAS-50 #41 (2026-07-08): fuentes autohospedadas en /fonts (woff2 latin,
~44KB total, caché immutable de un año en server.js). Antes se cargaban DOS
veces de Google (un en index.html y un @import aquí — encadenado y
bloqueante) con dependencia de un CDN externo. Lato no existe en peso 800:
el rango 700 900 hace que las peticiones de 800 usen el fichero de 700
(igual que hacía el navegador sintéticamente, pero explícito). */
@font-face{font-family:'Paytone One';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/paytone-one-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700 900;font-display:swap;src:url('/fonts/lato-700.woff2') format('woff2')}
/* ── Tokens ─── */
:root {
/* Paleta oficial ÚNICA (DISENO.md §1). Estos tokens BASE son la fuente única
tanto para las páginas legacy .mrj-* (servidas por lib/render.js bajo /m/*)
como para el shell SPA .shell — antes el shell duplicaba estos valores en
un bloque aislado bajo .shell; ese bloque se eliminó y sus valores oficiales
se promovieron aquí (unificación de raíz, 2026-07-05). */
/* --mrj-cream viene de mrj-palette.css (@import al principio del fichero,
ver cabecera) — antes vivía en hex literal aquí mismo. */
/* D1 paso 4 (2026-07-09, guardian-diseno): brown/orange/sand/mocha/ink pasan
a ser ALIAS de la escala --accent-XX de abajo (fuente única = fórmula, no
hex a mano) — QA visual OK (ver nota debajo del bloque D1). --mrj-cream se
queda en hex literal a propósito: es el --bg de TODA la app (máxima
superficie, máxima sensibilidad) y ninguna parada de la escala lo reproduce
dentro del umbral ΔE<2 (accent-50/100 dan ΔE 2.56/3.20 — ver PROPUESTA-
PALETA-LCH.md). Migrarlo exigiría una parada semántica propia, no hecha aquí. */
--mrj-brown: var(--accent-800);
--mrj-orange: var(--accent-500);
--mrj-sand: var(--accent-300);
--mrj-mocha: var(--accent-700);
--mrj-ink: var(--accent-900);
/* ── D1 "Paleta LCH" (PROPUESTA-PALETA-LCH.md, 2026-07-09) ───
Paleta por FÓRMULA en oklch(). --mrj-brown/orange/sand/mocha/ink de arriba
son ALIAS de esta escala (paso 4, EJECUTADO) — el hex ya no vive a mano en
dos sitios, esta escala es la fuente única.
Fuente única de la familia: hue + croma del acento oficial
(--mrj-orange #F59800 = oklch(75.79% 0.1672 67.28)). Cambiar SOLO
--accent-h/--accent-c recalcula toda la escala, las tintas de categoría
de abajo Y los 5 tokens --mrj-* de arriba a la vez.
NOTA vs el borrador §2 de la propuesta: sus multiplicadores de croma
0.9/0.8/0.4 (paradas 700/800/900) NO reproducían mocha/brown/ink
(ΔE≈9, verificado numéricamente); aquí van los multiplicadores REALES
medidos sobre los hex oficiales (0.361/0.325/0.163). Verificación:
node scripts/verificar-paleta-lch.mjs (oklch→sRGB con la matriz OKLab
estándar + ΔE OKLab×100 contra cada hex). */
--accent-h: 67.28; /* hue OKLCH de --mrj-orange (#F59800) */
--accent-c: 0.1672; /* croma OKLCH de --mrj-orange */
/* Escala L de 9 paradas: L y multiplicador de croma FIJOS por parada;
entre familias solo varía el hue. ΔE medido contra el token --mrj-*
equivalente (deriva por usar el hue del acento en toda la escala): */
--accent-50: oklch(97% calc(var(--accent-c) * 0.10) var(--accent-h)); /* fondo tintado muy sutil (parada nueva) */
--accent-100: oklch(92% calc(var(--accent-c) * 0.25) var(--accent-h)); /* fondo tintado pill/badge (parada nueva) */
--accent-300: oklch(86.35% calc(var(--accent-c) * 0.352) var(--accent-h)); /* ≈ --mrj-sand (ΔE 0.65 — hue 73.65→67.28) */
--accent-500: oklch(75.79% calc(var(--accent-c) * 1) var(--accent-h)); /* = --mrj-orange / --accent (ΔE < 0.1) */
--accent-600: oklch(68% calc(var(--accent-c) * 1) var(--accent-h)); /* hover del acento (parada nueva) */
--accent-700: oklch(54.14% calc(var(--accent-c) * 0.361) var(--accent-h)); /* ≈ --mrj-mocha (ΔE 1.76 — hue 50.47→67.28) */
--accent-800: oklch(32.95% calc(var(--accent-c) * 0.325) var(--accent-h)); /* ≈ --mrj-brown (ΔE 1.93 — hue 46.83→67.28) */
--accent-900: oklch(14.56% calc(var(--accent-c) * 0.163) var(--accent-h)); /* ≈ --mrj-ink (ΔE 0.67 — hue 53.16→67.28) */
/* Tintas de categoría (sección 9, "Categorías cromáticas") por la MISMA
fórmula: cada categoría aporta SOLO su hue — el OKLCH exacto del token
--mrj-* que usaba hasta ahora — y la L y el croma salen de su parada de
la escala. Al coincidir L, C y H con el token de origen, el resultado es
visualmente idéntico (ΔE < 0.1, verificado con el script). Gobernanza:
una fórmula compartida en vez de 5 tintas mantenidas a mano. */
--cat-op-h: 67.28; /* hue de --mrj-orange — Operación */
--cat-marca-h: 73.65; /* hue de --mrj-sand — Marca y clientas */
--cat-b2b-h: 50.47; /* hue de --mrj-mocha — Negocio B2B */
--cat-control-h: 46.83; /* hue de --mrj-brown — Control y calidad */
--cat-finanzas-h: 53.16; /* hue de --mrj-ink — Finanzas y sistema */
--cat-op: oklch(75.79% calc(var(--accent-c) * 1) var(--cat-op-h)); /* parada 500 */
--cat-marca: oklch(86.35% calc(var(--accent-c) * 0.352) var(--cat-marca-h)); /* parada 300 */
--cat-b2b: oklch(54.14% calc(var(--accent-c) * 0.361) var(--cat-b2b-h)); /* parada 700 */
--cat-control: oklch(32.95% calc(var(--accent-c) * 0.325) var(--cat-control-h)); /* parada 800 */
--cat-finanzas: oklch(14.56% calc(var(--accent-c) * 0.163) var(--cat-finanzas-h));/* parada 900 */
/* NO migrados a la escala (decisión D1, documentada aquí a propósito):
--ok (#5E7A3A) y --bad (#C0392B) caen en la L de la parada 700 (54.2/54.3
vs 54.14) pero con cromas propios (0.096 / 0.174) irreproducibles con el
multiplicador común 0.361 (ΔE≈3.6 y ≈11 — cambio visual real);
--warn-text (#B37000, L 60.3%) no cae en NINGUNA parada de la escala.
Los tres se quedan con su valor actual hasta que la escala incorpore
paradas semánticas propias. */
--bg: var(--mrj-cream);
--surface: #FFFDF9;
--accent: var(--mrj-orange);
--brown: var(--mrj-brown);
--border: rgba(140,101,79,.25);
/* C18 (contraste AA claro, 2026-07-07): #7A5A44 solo llegaba a 4.51:1 en
el peor caso (muted sobre .cat-control/.cat-b2b/.cat-finanzas).
Oscurecido a #725339 (mismo hue), margen real 5.05:1. */
--muted: #725339;
--text: var(--mrj-ink);
--sidebar-bg: var(--mrj-brown);
--sidebar-text: var(--mrj-cream);
/* --ok-text/--bad-text en claro (D47, 2026-07-09): axe-core encontró AA
roto en claro (.pill-ok/.pill-bad, .trend-up/down, kanban — 3.56-4.46:1).
Misma hue, L bajada: olive→#4E6530 (4.64:1), teja→#AF3427 (4.55:1).
--ok/--bad sin tocar (uso no-textual, ya cumplen 3:1). Declarado ANTES
de [data-theme="dark"] para no perder el override por cascada. */
--ok-text: #4E6530; --bad-text: #AF3427;
/* --warn-text (C4, 2026-07-07): --accent es poco legible como texto
pequeño en claro. #B37000 = mismo hue oscurecido, ya usado como literal
repetido (.pill-warn, .chip.on...) — tokenizado aquí, mismo patrón que
--ok-text/--bad-text (default claro antes del bloque oscuro). */
--warn-text: #B37000;
/* --surface-2 (D47, 2026-07-09): movido aquí desde el ":root" v3 (tras
[data-theme="dark"]) — ganaba por cascada y silenciaba el .07 de modo
oscuro (Puppeteer: .28 real en vez de .07), rompiendo AA en .pill-mut
(4.03:1). Mismo valor .28, solo cambia dónde se declara. */
--surface-2:rgba(234,205,168,.28);
/* --shadow-1/2/3 (D47/D48): mismo movimiento por el motivo de arriba.
Doble capa contacto+ambiente: offset/blur chico+alpha alto (anclaje) y
offset/blur grande+alpha bajo (difusión), mismo tinte 76,44,28 — cero
color nuevo, peso total equilibrado con el original. */
--shadow-1:0 1px 1px rgba(76,44,28,.10), 0 2px 5px rgba(76,44,28,.06);
--shadow-2:0 2px 4px rgba(76,44,28,.10), 0 10px 26px rgba(76,44,28,.10);
--shadow-3:0 4px 8px rgba(76,44,28,.12), 0 26px 56px rgba(76,44,28,.14);
/* Espaciado (DISENO.md §3): --sp-1..8 (bloque v3 más abajo) son la única
fuente de verdad; --sp-xs..2xl (legacy .mrj-*) son alias de los mismos
valores, sin duplicar tokens. Resultado en px idéntico a antes
(4/8/16/24/32/48), cero cambio visual. */
--sp-xs: var(--sp-1); --sp-sm: var(--sp-2); --sp-md: var(--sp-4);
--sp-lg: var(--sp-5); --sp-xl: var(--sp-6); --sp-2xl: var(--sp-7);
/* Radios: valor real en producción (~60 sitios). DISENO.md §3 documentaba
8/12/16/24 como aspiracional, nunca implementado — reconciliado
2026-07-07 a favor del código real. */
--r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
/* D2 (2026-07-09): sombra canónica = --shadow-1/2/3 (declaradas en el
bloque v3 más abajo, var() resuelve por cascada final). --shadow-sm/md/lg
quedan como alias puros para los ~9 usos legacy .mrj-*, heredando ahora
el ajuste de modo oscuro que antes no tenían. */
--shadow-sm: var(--shadow-1);
--shadow-md: var(--shadow-2);
--shadow-lg: var(--shadow-3);
/* --font-heading/--font-body vienen de mrj-palette.css (@import al
principio del fichero) — antes se declaraban aquí a mano. */
/* Escala tipográfica (DISENO.md §3 + D4, 2026-07-09): 8 pasos en clamp()
fluido (móvil 375px → escritorio 1600px+), anclados a 1280px donde cada
paso da el mismo px que antes (12/13/14/16/18/22/28/40). Cero cambio
visual a 1280px. */
--fs-xs: clamp(0.6946rem, 0.6716rem + 0.098vw, 0.7696rem); /* 12px @1280 */
--fs-sm: clamp(0.7525rem, 0.7276rem + 0.1061vw, 0.8337rem); /* 13px @1280 */
--fs-base: clamp(0.8104rem, 0.7836rem + 0.1143vw, 0.8979rem); /* 14px @1280 */
--fs-md: clamp(0.9261rem, 0.8955rem + 0.1306vw, 1.0261rem); /* 16px @1280 */
--fs-lg: clamp(1.0419rem, 1.0074rem + 0.1469vw, 1.1544rem); /* 18px @1280 */
--fs-xl: clamp(1.2734rem, 1.2313rem + 0.1796vw, 1.4109rem); /* 22px @1280 */
--fs-2xl: clamp(1.6207rem, 1.5671rem + 0.2286vw, 1.7957rem); /* 28px @1280 */
--fs-3xl: clamp(2.3153rem, 2.2388rem + 0.3265vw, 2.5653rem); /* 40px @1280 — sin uso real exacto aún */
/* Transiciones oficiales (usan la curva --ease definida más abajo en el :root v3).
--t-base lo consume el shell; antes vivía en el bloque .shell eliminado.
D9 (mejoras.md, presupuesto de motion — ver DISENO.md §Motion):
--t-fast baja de 150ms a 90ms — causa-efecto (hover, press) debe
percibirse ≤100ms (regla Linear), y este token es justo el que usan
TODOS los hover/press del sistema (~45 sitios entre legacy .mrj-* y
shell). --t-base/--t-slow (transiciones espaciales: apertura de vista,
paneles, sidebar) se quedan en su rango 150-300ms — el propio DISENO.md
§Motion documenta 150-250ms como el rango correcto para esas, no para
causa-efecto. */
--t-fast: 90ms var(--ease);
--t-normal: 200ms ease;
--t-base: var(--t-shell-base);
--t-slow: 300ms var(--ease);
}
/* ── Dark mode ───
Valores oficiales del modo oscuro (antes duplicados en el bloque
[data-theme="dark"] .shell, ya eliminado). Unificados aquí para legacy + shell. */
[data-theme="dark"] {
--bg: #170B04;
--surface: #241207;
/* D3: --surface-0 (=--bg) y --surface-1 (=--surface) no se redeclaran aquí
a propósito — son alias declarados una sola vez en el :root v3 y ya
resuelven a los valores oscuros de --bg/--surface de este mismo bloque
por cascada. --surface-2 sí tiene su propio valor real en oscuro (no es
alias), se mantiene sin cambio. */
--surface-2:rgba(234,205,168,.07);
--brown: var(--mrj-cream);
--border: rgba(234,205,168,.16);
--muted: #C9A98F;
--text: var(--mrj-cream);
--sidebar-bg: #0E0501;
--sidebar-text: var(--mrj-cream);
/* Doble capa contacto+ambiente (D48, 2026-07-10): mismo movimiento que su
par en :root (ver nota ahí) — negro puro 0,0,0 en ambas capas, sin color
nuevo, mismo criterio de reparto contacto/ambiente. */
--shadow-1:0 1px 1px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.25);
--shadow-2:0 2px 4px rgba(0,0,0,.40), 0 10px 26px rgba(0,0,0,.35);
--shadow-3:0 4px 8px rgba(0,0,0,.45), 0 26px 56px rgba(0,0,0,.40);
/* Pasada de contraste AA dark mode (MEJORAS-BENCHMARK.md Lista 3 #16):
--ok/--bad (oliva/teja) sobre los fondos tintados de .pill-ok/.pill-bad,
.trend-up/.trend-down y el contador de kanban no llegaban a 4.5:1 sobre
--surface/--surface-2 oscuros (verificado con fórmula WCAG: 3.26/3.00/
3.29/3.03/2.81/2.61 según el caso). Versión más clara de la misma familia
oliva/teja, mezclada con --mrj-cream — cumple 4.5:1+ en el peor caso
(contador de kanban sobre --surface-2) con margen. */
--ok-text: #95A271;
--bad-text: #D88170;
/* --warn-text en oscuro: mismo valor que ya usaban las 5 reglas
"[data-theme=dark] .shell .X{color:var(--mrj-orange)}" que este token
sustituye (naranja de marca, con contraste suficiente sobre --surface
oscuro). Se centraliza aquí en vez de repetirlo por selector. */
--warn-text: var(--mrj-orange);
}
/* ── Reset & base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; } /* base rem: NO tokenizar (--fs-* son relativos a esto) */
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
line-height: 1.5;
min-height: 100vh;
}
a { color: inherit; }
/* ── Foco de teclado (D5, mejoras.md, 2026-07-09) ───
Anillo de foco ÚNICO para TODA la app — legacy .mrj-* y shell por igual,
regla GLOBAL (no scoped a .shell, a diferencia de la anterior
".shell :focus-visible"). Sustituye 6 reglas parciales que convivían
(scope propio en .shell, duplicados idénticos en .ficha-variante/.dropzone
que ya están cubiertos por "button"/"[tabindex]", un tc-filter input con
alpha/offset distintos sin motivo, y 3 "outline:none" sin anillo de
respaldo real que se retiraron en esta misma pasada — ver cada sitio).
:where() mantiene especificidad CERO a propósito: cualquier regla más
específica que aporte algo EXTRA (halo de .mrj-input, borde de .dropzone)
sigue pudiendo layerse encima sin pelear por especificidad. */
:where(a,button,input,select,textarea,[tabindex],.section-card,summary):focus-visible{
outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
}
/* ── Layout ─── */
.mrj-shell { display: flex; min-height: 100vh; }
.mrj-sidebar {
width: 240px; background: var(--sidebar-bg); color: var(--sidebar-text);
display: flex; flex-direction: column; flex-shrink: 0;
padding: var(--sp-md) 0; overflow-y: auto;
transition: width var(--t-normal);
position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
}
.mrj-sidebar.collapsed { width: 56px; }
.mrj-content {
flex: 1; margin-left: 240px; padding: var(--sp-xl);
transition: margin-left var(--t-normal);
min-height: 100vh;
}
.mrj-sidebar.collapsed ~ .mrj-content { margin-left: 56px; }
.mrj-topbar {
position: sticky; top: 0; z-index: 50;
background: var(--bg); border-bottom: 1px solid var(--border);
padding: var(--sp-md) var(--sp-xl);
display: flex; align-items: center; justify-content: space-between;
backdrop-filter: blur(8px);
}
/* ── Sidebar components ─── */
.mrj-nav-logo {
font-family: var(--font-heading); font-size:var(--fs-lg); color: var(--mrj-cream);
padding: var(--sp-md) var(--sp-lg); margin-bottom: var(--sp-sm);
display: flex; align-items: center; gap: var(--sp-sm);
}
.mrj-nav-logo span { color: var(--mrj-orange); }
.mrj-nav-section {
padding: var(--sp-sm) var(--sp-lg) var(--sp-xs);
font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: rgba(252,236,215,.45); font-weight: 700;
}
.mrj-sidebar.collapsed .mrj-nav-section { opacity: 0; pointer-events: none; }
.mrj-nav-item {
display: flex; align-items: center; gap: var(--sp-sm);
padding: 10px var(--sp-lg); cursor: pointer; border: none;
background: none; color: var(--sidebar-text); font-size:var(--fs-sm);
font-family: var(--font-body); text-align: left; width: 100%;
transition: background var(--t-fast), color var(--t-fast);
border-radius: 0;
}
.mrj-nav-item:hover { background: rgba(255,255,255,.08); }
.mrj-nav-item.active { background: rgba(245,152,0,.2); color: var(--mrj-orange); font-weight: 700; }
.mrj-nav-icon { font-size:var(--fs-md); width: 20px; text-align: center; flex-shrink: 0; }
.mrj-nav-label { flex: 1; white-space: nowrap; overflow: hidden; }
.mrj-sidebar.collapsed .mrj-nav-label { display: none; }
.mrj-nav-badge {
/* MEJORAS-50 #44 (sitio NO listado en la ficha, encontrado en el barrido:
usa --mrj-orange directo en vez de --accent, pero es el MISMO #F59800 y
el mismo 2.24:1). #fff -> var(--mrj-brown) = 5.54:1. */
background: var(--mrj-orange); color: var(--mrj-brown); font-size: 10px; font-weight: 700;
min-width: 18px; height: 18px; border-radius: 9px; display: flex;
align-items: center; justify-content: center; padding: 0 4px;
}
.mrj-sidebar.collapsed .mrj-nav-badge { display: none; }
.mrj-sidebar-toggle {
display: flex; align-items: center; justify-content: center;
padding: var(--sp-md); border-top: 1px solid rgba(255,255,255,.08);
margin-top: auto;
}
.mrj-sidebar-toggle button {
background: none; border: 1px solid rgba(255,255,255,.2);
border-radius: 50%; width: 30px; height: 30px; cursor: pointer;
color: var(--sidebar-text); font-size:var(--fs-xs); display: flex;
align-items: center; justify-content: center; transition: all var(--t-fast);
}
.mrj-sidebar-toggle button:hover { background: rgba(255,255,255,.1); }
/* ── Cards ─── */
.mrj-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: var(--sp-lg);
box-shadow: var(--shadow-sm); transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.mrj-card:hover { box-shadow: var(--shadow-md); }
.mrj-card-clickable { cursor: pointer; }
.mrj-card-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* ── KPI cards ─── */
.mrj-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: var(--sp-md); }
.mrj-kpi {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: var(--sp-lg) var(--sp-md);
text-align: center;
}
.mrj-kpi-value { font-family: var(--font-heading); font-size:var(--fs-2xl); color: var(--accent); line-height: 1; }
.mrj-kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--sp-xs); }
.mrj-kpi-trend { font-size: 11px; margin-top: 4px; }
.mrj-kpi-trend.up { color: var(--ok-text); }
.mrj-kpi-trend.down { color: var(--bad-text); }
/* ── Tables ─── */
.mrj-table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); }
.mrj-table { width: 100%; border-collapse: collapse; font-size:var(--fs-sm); }
.mrj-table th {
background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px;
text-align: left; position: sticky; top: 0; z-index: 1;
border-bottom: 1px solid var(--border);
}
.mrj-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.mrj-table tr:last-child td { border-bottom: none; }
.mrj-table tr:hover td { background: rgba(245,152,0,.05); }
/* ── Buttons ─── */
.mrj-btn {
display: inline-flex; align-items: center; gap: var(--sp-xs);
padding: 8px 16px; border-radius: var(--r-md); border: none;
font-family: var(--font-body); font-size:var(--fs-sm); font-weight: 600;
cursor: pointer; transition: all var(--t-fast); white-space: nowrap;
text-decoration: none;
}
/* MEJORAS-50 #35/#36 (2026-09-02, Bloque D): texto #fff sobre --accent
(#F59800) daba 2.24:1 — por debajo de AA (4.5:1) incluso para texto
grande, y --accent no tiene override en [data-theme="dark"] así que
fallaba igual en ambos temas. var(--mrj-brown) es alias de --accent-800
(no de --brown, que SÍ cambia en oscuro a --mrj-cream) — mismo valor en
claro y oscuro, igual que el fondo del botón, así que el arreglo vale
para los dos temas sin condicional. Verificado numéricamente: 5.54:1
normal, 6.37:1 en hover (el filter:brightness aclara el fondo, así que
el contraste MEJORA con el hover en vez de empeorar). No se toca
--accent: lo usan otras 54 reglas de este fichero como color de texto/
borde/icono sobre --bg/--surface, donde sigue siendo AA. */
.mrj-btn-primary { background: var(--accent); color: var(--mrj-brown); }
.mrj-btn-primary:hover { filter: brightness(1.1); }
.mrj-btn-secondary { background: var(--surface); color: var(--brown); border: 1px solid var(--border); }
.mrj-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.mrj-btn-ghost { background: none; color: var(--muted); }
.mrj-btn-ghost:hover { color: var(--brown); background: var(--bg); }
.mrj-btn-danger { background: var(--bad); color: #fff; }
.mrj-btn-danger:hover { filter: brightness(1.1); }
.mrj-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.mrj-btn-sm { padding: 5px 10px; font-size:var(--fs-xs); }
.mrj-btn-lg { padding: 12px 24px; font-size: 15px; }
.mrj-btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; justify-content: center; }
/* ── Form elements ─── */
.mrj-input, .mrj-select, .mrj-textarea {
width: 100%; padding: 9px 12px; border: 1px solid var(--border);
border-radius: var(--r-md); font-family: var(--font-body); font-size:var(--fs-base);
background: var(--surface); color: var(--text);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mrj-input:focus, .mrj-select:focus, .mrj-textarea:focus {
/* D5: "outline:none" retirado — el anillo global (regla en "Reset & base")
ya cubre "input"/"select"/"textarea"; el halo de abajo es lo que esta
regla aporta de EXTRA (no se toca) y ahora convive con el anillo en vez
de anularlo. */
border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,152,0,.15);
}
.mrj-input::placeholder { color: var(--muted); }
/* font-size:16px en móvil (auditoría móvil 2026-08-05): mismo motivo que
.shell .input más abajo — por debajo de 16px iOS hace zoom automático al
enfocar el campo. .mrj-input es la clase que sigue usando Mi Espacio (el
móvil real de las empleadas), así que este arreglo es más urgente aquí
que en el panel admin. Solo dentro de @media(max-width:768px). */
@media (max-width: 768px) {
.mrj-input, .mrj-select, .mrj-textarea { font-size: 16px; }
}
.mrj-label { display: block; font-size:var(--fs-xs); font-weight: 700; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.mrj-form-group { display: flex; flex-direction: column; gap: var(--sp-xs); }
.mrj-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
/* ── Chips/filters ─── */
.mrj-chips { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.mrj-chip {
padding: 4px 12px; border-radius: 20px; font-size:var(--fs-xs); font-weight: 600;
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
cursor: pointer; transition: all var(--t-fast);
}
/* MEJORAS-50 #44 — mismo criterio que #35/#36: #fff sobre --accent da
2.24:1 (AA roto); var(--mrj-brown) da 5.54:1. --mrj-brown es alias de
--accent-800, que no cambia entre tema claro y oscuro → un solo valor
sirve para los dos temas. No se toca --accent ni ningún fondo. */
.mrj-chip.active, .mrj-chip:hover { background: var(--accent); color: var(--mrj-brown); border-color: var(--accent); }
/* ── Badges ─── */
.mrj-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
/* C4 (purga hex fuera de paleta, 2026-07-07): los 4 badges de abajo usaban
hexes Tailwind (verde/rojo/naranja/AZUL — el azul no existe en la paleta
oficial de marca bajo ningún concepto). Sustituidos por tintes rgba() de
los tokens oficiales (--ok/--bad/--accent/--mrj-mocha), mismo patrón ya
usado en .pill-*/.cal-evt/.cat-* de este fichero. Texto en var(--brown)
en vez de --ok-text/--bad-text: verificado con fórmula WCAG que esos dos
tokens, pensados para uso en superficies sólidas o como acento, no llegan
a 4.5:1 sobre un badge pastel (--ok-text da 3.5-4.2:1 según fondo real);
--brown sobre estos mismos tintes da 9-11:1 en todos los casos. */
.mrj-badge-green { background: rgba(94,122,58,.16); color: var(--brown); }
.mrj-badge-red { background: rgba(192,57,43,.14); color: var(--brown); }
.mrj-badge-orange { background: rgba(245,152,0,.18); color: var(--brown); }
.mrj-badge-blue { background: rgba(140,101,79,.20); color: var(--brown); }
.mrj-badge-gray { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.mrj-badge-brown { background: var(--mrj-brown); color: var(--mrj-cream); }
/* ── Toast notifications ─── */
#mrj-toasts { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.mrj-toast {
background: var(--brown); color: var(--mrj-cream); padding: 12px 18px;
border-radius: var(--r-lg); font-size:var(--fs-sm); max-width: 320px;
box-shadow: var(--shadow-lg); animation: mrj-toast-in 200ms ease;
display: flex; align-items: center; gap: 10px; pointer-events: auto;
}
.mrj-toast.success { background: var(--ok); }
.mrj-toast.error { background: var(--bad); }
.mrj-toast.warning { background: var(--accent); color: var(--mrj-brown); }
@keyframes mrj-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* ── Skeletons ─── */
/* FASE 1 (2026-07-07): eliminado el linear-gradient que llevaba desde v1 —
viola la regla de marca "sin degradados, nunca" (DISENO.md §1/§7). Sin
consumidores reales (verificado con grep: solo se referenciaba a sí mismo
en este fichero), así que se sustituye por el MISMO pulso de opacidad ya
usado por el skeleton del shell nuevo (.shell .skeleton / shellSkelPulse,
ver más abajo) en vez de dejar una animación rota o un segundo sistema
paralelo. */
.mrj-skel {
background: rgba(139,101,79,.16); animation: mrj-shimmer 1.4s ease-in-out infinite;
border-radius: var(--r-sm);
}
[data-theme="dark"] .mrj-skel { background: rgba(234,205,168,.14); }
@keyframes mrj-shimmer { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mrj-skel { animation: none; opacity: .75; } }
.mrj-skel-text { height: 14px; margin: 4px 0; border-radius: 4px; }
.mrj-skel-card { height: 80px; border-radius: var(--r-lg); }
.mrj-skel-circle { border-radius: 50%; }
/* ── Skeleton loaders del shell (Mejoras.md Lista 3) ───
Sustituyen el texto plano "Cargando…"/"Consultando…" en las vistas de
Inicio/Dashboard más visibles. A diferencia de .mrj-skel (legacy, no usado
hoy en el shell) que anima con linear-gradient, esta versión usa un pulso
de OPACIDAD puro sobre un bloque sólido en tono mocha/sand a baja opacidad
— cero gradientes (regla de marca inquebrantable, DISENO.md §1/§7), y
coincide literalmente con el vocabulario ya fijado en DISENO.md §4:
"Skeleton | Bloques sand pulsantes mientras carga." */
.shell .skeleton{
display:block;background:rgba(139,106,79,.16);border-radius:var(--r-sm);
animation:shellSkelPulse 1.4s ease-in-out infinite;
position:relative;overflow:hidden;
}
[data-theme="dark"] .shell .skeleton{background:rgba(234,205,168,.14)}
@keyframes shellSkelPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* D14 (mejoras.md, 2026-07-09): shimmer direccional ADITIVO sobre el pulso de
opacidad de arriba — barrido de luz izquierda→derecha. Pseudo-elemento de
color SÓLIDO vía color-mix() (sand/transparente, sin degradado — la regla
de marca "sin gradientes" se cumple literalmente: ningún linear-gradient/
radial-gradient en esta declaración), difuminado con filter:blur para que
se lea como una franja de luz suave en vez de un bloque de color duro. La
única propiedad animada es transform:translateX (D9 motion budget: solo
transform/opacity), en vez de animar background-position de un gradiente
como haría la técnica "clásica" de shimmer. */
.shell .skeleton::after{
content:'';position:absolute;top:0;bottom:0;left:0;width:40%;
background:color-mix(in srgb, var(--mrj-sand) 55%, transparent);
filter:blur(8px);pointer-events:none;
animation:shellSkelShimmer 1.4s ease-in-out infinite;
}
[data-theme="dark"] .shell .skeleton::after{background:color-mix(in srgb, var(--mrj-cream) 30%, transparent)}
@keyframes shellSkelShimmer{
0%{transform:translateX(-150%)}
100%{transform:translateX(350%)}
}
@media (prefers-reduced-motion:reduce){
.shell .skeleton{animation:none;opacity:.75}
.shell .skeleton::after{display:none}
}
.shell .skeleton-line{height:12px;margin:6px 0}
.shell .skeleton-line.sm{height:9px}
.shell .skeleton-line.lg{height:20px}
.shell .skeleton-line.w-30{width:30%}.shell .skeleton-line.w-40{width:40%}
.shell .skeleton-line.w-50{width:50%}.shell .skeleton-line.w-60{width:60%}
.shell .skeleton-line.w-70{width:70%}.shell .skeleton-line.w-80{width:80%}
.shell .skeleton-line.w-100{width:100%}
.shell .skeleton-card{height:84px;border-radius:var(--r-lg)}
/* Skeleton de una tarjeta .kpi completa: mismo tamaño/marco que un .kpi real
(sin cursor pointer ni hover) para que el layout no salte al llegar el dato. */
.shell .kpi.skeleton-kpi{cursor:default}
.shell .kpi.skeleton-kpi:hover{transform:none;box-shadow:none;border-color:var(--border)}
/* ── Empty states ─── */
.mrj-empty { text-align: center; padding: var(--sp-2xl); color: var(--muted); }
.mrj-empty-icon { font-size: 48px; margin-bottom: var(--sp-md); opacity: .5; }
.mrj-empty-title { font-family: var(--font-heading); font-size:var(--fs-lg); color: var(--brown); margin-bottom: var(--sp-sm); }
.mrj-empty-desc { font-size:var(--fs-sm); line-height: 1.6; }
.mrj-empty-cta { margin-top: var(--sp-md); display: inline-flex; }
/* FASE 3 (2026-07-07, migrador-os): slot de accion real dentro del empty-state. Uso:
texto
. Aditivo, no toca el unico uso previo (Facturas/Anual), que no usaba mrj-empty-cta. */
/* ── Estado de error (MEJORAS-50 #41) ───
Región que NO ha podido pintarse: motivo REAL del backend + una acción que
repite la MISMA carga. Sin prefijo .shell a propósito → vale igual en el
shell SPA, /mi-espacio, /b2b/admin y /b2b/portal. Mismos valores exactos
que .mrj-alert-error (cero color nuevo, cero degradado). Componente y regla
de uso: public/lmos-error-state.js + DISENO.md §5bis. El toast de
cargarConReintento() (app.js) NO se sustituye por esto: toast = una acción
puntual falla; esto = una región se queda sin poder pintarse. */
.mrj-error-state { padding: var(--sp-lg); border-radius: var(--r-md); background: rgba(192,57,43,.12); border: 1px solid rgba(192,57,43,.35); color: var(--brown); font-size: var(--fs-sm); line-height: 1.5; }
.mrj-error-state-msg { color: var(--brown); }
.mrj-error-state-cta { margin-top: var(--sp-md); display: inline-flex; }
/* ── Alerts ─── */
.mrj-alert { padding: var(--sp-md); border-radius: var(--r-md); font-size:var(--fs-sm); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
/* C4: mismo criterio que los badges de arriba — tintes rgba() de los
tokens oficiales + texto var(--brown) (9-11:1, ver comentario de badges). */
.mrj-alert-warning { background: rgba(245,152,0,.12); border: 1px solid rgba(245,152,0,.35); color: var(--brown); }
.mrj-alert-error { background: rgba(192,57,43,.12); border: 1px solid rgba(192,57,43,.35); color: var(--brown); }
.mrj-alert-success { background: rgba(94,122,58,.14); border: 1px solid rgba(94,122,58,.35); color: var(--brown); }
.mrj-alert-info { background: var(--bg); border: 1px solid var(--border); color: var(--brown); }
/* ── Divider ─── */
.mrj-divider { border: none; border-top: 1px solid var(--border); margin: var(--sp-lg) 0; }
/* ── Modal ─── */
.mrj-modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000;
display: flex; align-items: center; justify-content: center;
padding: var(--sp-lg);
}
.mrj-modal {
background: var(--surface); border-radius: var(--r-xl); padding: var(--sp-xl);
width: 100%; max-width: 520px; box-shadow: var(--shadow-lg);
animation: mrj-modal-in 200ms ease;
}
@keyframes mrj-modal-in { from { opacity:0; transform: scale(.95); } to { opacity:1; transform: scale(1); } }
.mrj-modal-title { font-family: var(--font-heading); font-size: clamp(17px, .58vw + 14.7px, 23px); color: var(--brown); margin-bottom: var(--sp-lg); text-wrap: balance; }
/* ── Diálogos unificados (