/* ============================================================ NEXUZ — Tema "Sobrio" (Dirección A del rediseño, 2026-09-07) ============================================================ NO reemplaza a theme.css. Es un tema OPT-IN: todo lo de acá está scopeado bajo html[data-theme="sobrio"], así que este archivo es inerte hasta que Configuración → Apariencia active el tema. Con data-theme ausente o "clasico", el portal se ve exactamente igual que siempre. Incluir DESPUÉS de theme.css y ANTES de portal.css: ── Qué resuelve, y por qué ───────────────────────────────── Medido sobre portal.css: 38 usos de font-size 12px, 36 de 11px, 27 de 13px, y nada por encima de 15px salvo el logo. Con esa escala comprimida es imposible que el número principal destaque: "46,441.90" y "Consulta ITF" pesan lo mismo. Y hay 8 radios de borde distintos (6/8/9/10/12/14/16/20px), sin ritmo. El tema ataca las dos cosas por token: 1. Escala tipográfica real (--fs-*), con --fs-figure-xl para las cifras que encabezan. 2. Un solo radio (--radius) y un solo acento. 3. Fondo plano en vez del degradado de 4 paradas, y superficies opacas en vez de glass: sube el contraste del texto sobre la tarjeta, que es lo que se lee todo el día. 4. Cifras con tabular-nums, para que las columnas de importes queden alineadas al pixel. ============================================================ */ html[data-theme="sobrio"] { /* ── Marca: se conserva, es identidad ───────────────────── */ --brand-x-a: #ff6b35; --brand-x-b: #ff416c; /* ── Primario ──────────────────────────────────────────── #0f62c4 en vez de #0078d4: sobre superficie blanca el azul original queda en 3.6:1 con texto blanco encima; este llega a 4.6:1 y pasa AA para texto de UI. */ --blue: #0f62c4; --blue-hover: #0a4a99; --blue-light: #eef4fc; --blue-focus: rgba(15, 98, 196, .20); --teal: #0f8a76; --green: #17915b; --yellow-green:#8aa832; --orange-glow: rgba(255, 107, 53, .30); /* ── Fondo: plano ──────────────────────────────────────── Las 4 paradas del degradado se igualan, así cualquier regla que use --bg-stop-N por separado sigue funcionando. */ --bg-stop-1: #f6f8fa; --bg-stop-2: #f6f8fa; --bg-stop-3: #f6f8fa; --bg-stop-4: #f6f8fa; --bg-grad: #f6f8fa; /* ── Sidebar: superficie propia, separada por borde ────── */ --sidebar-w: 185px; --sidebar-bg: #ffffff; --sidebar-blur: 0px; --sidebar-border-clr: #e4e8ee; --sidebar-shadow: 1px 0 0 #e4e8ee; /* ── Tarjetas: opacas, sin glass ───────────────────────── El glass rgba(255,255,255,.72) sobre el degradado dejaba el texto secundario cerca del mínimo de contraste. */ --glass-bg: #ffffff; --glass-border: #e4e8ee; /* ── Inputs ──────────────────────────────────────────────── */ --input-bg: #ffffff; --input-border: #d3dae3; --input-focus-border: #0f62c4; /* ── Texto ───────────────────────────────────────────────── */ --text-dark: #1c2430; --text-mid: #4a5260; --text-light: #7a828e; --text-muted: #98a0ad; /* ── Bordes ──────────────────────────────────────────────── */ --border: #e4e8ee; --white: #ffffff; /* ══ TOKENS NUEVOS ══════════════════════════════════════════ No existen en theme.css. Se declaran acá para que el tema pueda usarlos y para que portal.css los adopte de forma gradual, sin un refactor de una sola vez. ═════════════════════════════════════════════════════════ */ /* Escala tipográfica — el arreglo de fondo */ --fs-label: 10px; /* etiquetas en mayúscula, con tracking */ --fs-xs: 11px; /* metadatos, chips */ --fs-sm: 12px; /* cuerpo de tabla */ --fs-base: 12.5px; /* cuerpo e ítems de menú */ --fs-md: 13px; /* títulos de tarjeta */ --fs-lg: 15px; /* cifra secundaria */ --fs-xl: 17px; /* cifra de apoyo */ --fs-figure: 20px; /* cifra destacada */ --fs-figure-xl: 30px; /* la cifra que encabeza la pantalla */ --lh-tight: 1.1; --lh-base: 1.45; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --tracking-label: .7px; /* Un solo radio, en vez de los 8 actuales */ --radius: 10px; --radius-sm: 7px; --radius-pill: 999px; /* Espaciado en escala de 4 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 26px; /* Sombras: casi planas — la separación la da el borde */ --shadow-card: 0 1px 2px rgba(28, 36, 48, .04); --shadow-pop: 0 8px 24px rgba(28, 36, 48, .10); /* Semánticos para signo de importe */ --pos: #17915b; --neg: #c0392f; /* Superficie para tokenizar estilos INLINE. Nombres propios a propósito: --white y --glass-bg existen también en theme.css, así que usarlos como fallback cambiaría el clásico. Estos dos no existen allá, por lo que var(--surface, ) deja el clásico pixel a pixel igual. */ --surface: #ffffff; --surface-border: #e4e8ee; } /* ══════════════════════════════════════════════════════════════ Aplicación del tema ───────────────────────────────────────────────────────────── Solo lo que NO se puede expresar con los tokens que portal.css ya consume. Deliberadamente corto: cada regla acá es deuda que habrá que mover a portal.css cuando el tema deje de ser opt-in. ══════════════════════════════════════════════════════════════ */ /* Fondo plano: portal.css aplica --bg-grad como background-image */ html[data-theme="sobrio"] body { background: var(--bg-stop-1); background-image: none; } /* ── Sin glass, de forma auto-mantenible ──────────────────────────────────── Regla universal a propósito, y con !important a propósito. La primera versión de este archivo listaba selectores uno por uno y se escapaban: .stat-card quedó con blur(15px) y radio 24px con el tema puesto, y después #detalleCard con blur(12px). Un barrido del DOM encontró 15 superficies sueltas (los dos triggers del topbar, el badge del plan, .menu-item.active, #sunatStatus, seis botones de modal, .ypill, .mgrid-btn…). "Sin glass" es lo que DEFINE a esta dirección, así que la regla correcta es la general: cualquier elemento con backdrop-filter que se agregue en el futuro queda cubierto solo, sin que haya que acordarse de listarlo. El costo de rendimiento es negativo: quitar backdrop-filter es más barato que aplicarlo. Y de yapa desaparece el containing block que el blur crea para position:fixed — el gotcha de CLAUDE.md que ya mordió al panel de exportación. */ html[data-theme="sobrio"] *, html[data-theme="sobrio"] *::before, html[data-theme="sobrio"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="sobrio"] .topbar { background: var(--white); border-bottom: 1px solid var(--border); box-shadow: none; } html[data-theme="sobrio"] .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border-clr); } /* Tarjetas: un radio, borde en vez de sombra difusa. .stat-card es la del dashboard y es la que importa: se había quedado afuera en la primera versión de este archivo y seguía con backdrop-filter: blur(15px), rgba(255,255,255,.7) y radio 24px aun con el tema puesto. Se veía "limpia" solo porque el fondo de la página ya era plano. */ html[data-theme="sobrio"] .card, html[data-theme="sobrio"] .dash-card, html[data-theme="sobrio"] .panel, html[data-theme="sobrio"] .stat-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow-card); } html[data-theme="sobrio"] .stat-card, html[data-theme="sobrio"] .stat-trend { backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="sobrio"] .stat-card:hover { box-shadow: 0 2px 6px rgba(28, 36, 48, .07); } /* El panel de detalle (#detalleCard, la superficie más grande: 1305x511) NO se arregla desde acá: su fondo, radio, borde y sombra están INLINE en el div de Dashboard.aspx, y el inline le gana a cualquier regla de hoja de estilos que no lleve !important. Está tokenizado en el HTML con var(--surface | --surface-border | --radius | --shadow-card, ). El backdrop-filter inline sí muere acá: la regla universal de arriba usa !important, y eso sí le gana al inline. */ /* El badge de SUNAT trae su blur con !important desde portal.css, y un selector de id (1,0,0) le gana a la regla universal (0,1,1). Hay que nombrarlo con la misma especificidad o más. */ html[data-theme="sobrio"] #sunatStatus { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; background: var(--white); border-color: var(--border); } html[data-theme="sobrio"] #sunatStatus::before { display: none; } /* Controles del topbar: opacos, para que el borde sea lo que los separa */ html[data-theme="sobrio"] #companyTrigger, html[data-theme="sobrio"] #periodTrigger { background: var(--white); border-color: var(--border); box-shadow: none; } /* El chip de conteo ("75 comp."): sin glass ni pseudo-elemento de brillo */ html[data-theme="sobrio"] .stat-trend { border-radius: var(--radius-pill); } html[data-theme="sobrio"] .stat-trend::before { display: none; } html[data-theme="sobrio"] .company-dropdown, html[data-theme="sobrio"] .period-dropdown, html[data-theme="sobrio"] .modal-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); } /* Cifras alineadas: aplica a toda columna numérica de las grillas y a los importes de las tarjetas. Es el cambio de menor costo y mayor efecto para leer columnas de plata. */ html[data-theme="sobrio"] #detalleTable td, html[data-theme="sobrio"] #detalleTable th, html[data-theme="sobrio"] .num, html[data-theme="sobrio"] .monto, html[data-theme="sobrio"] .importe { font-variant-numeric: tabular-nums; } /* Zebra en la grilla de detalle: 75 filas sin alternancia cansan */ html[data-theme="sobrio"] #detalleTable tbody tr:nth-child(even) { background: #fafbfc; } /* Barra inferior del móvil: opaca, sin blur */ html[data-theme="sobrio"] .bottom-nav { background: var(--white); background-color: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -1px 0 rgba(28, 36, 48, .05); } /* NOTA — badges de código (DSH-001, ECC-005, …): hoy se ven en producción y son ayudas de desarrollo (regla 1 de CLAUDE.md). No se pueden ocultar desde acá porque están escritos como sin clase, y una regla sin selector al que agarrarse sería código muerto. Para ocultarlos habría que darles una clase común primero; queda fuera de este tema. */