/* Identidad visual "Solvrax Ledger" — ver ContextoDeProyecto.md sección 3.6.1 */
:root {
/* GRAFITO es el default desde el 3 ago 2026. El teal historico chocaba con --sv-success:
#0F7A66 y #2D7A4F son la misma familia y dan 5.26 vs 5.24 de contraste, asi que el boton
primario y el chip de «correcto» se leian igual. Con un primario neutro el color queda solo
donde SIGNIFICA algo. El teal sigue disponible en html[data-accent="teal"]. */
--sv-primary: #37474F;
--sv-primary-light: #4A5B65;
--sv-secondary: #B8860B;
/* Neutrales con sesgo FRIO. El crema tibio anterior (#FAF8F4 / #DCD6C9) es lo que hacia que la
interfaz leyera a papel de despacho contable; son compartidos por los cinco acentos, asi que
cambiarlos los moderniza a todos sin tocar ninguno. */
--sv-surface: #F4F7F6;
--sv-surface-card: #FFFFFF;
--sv-surface-sunk: #EDF2F0;
--sv-ink: #0E241F;
/* 5.04 sobre el fondo y 5.43 sobre la tarjeta. Con #647A74 daba 4.26: por DEBAJO del minimo
AA de 4.5, y no lo habria notado nadie hasta que un cliente no pudiera leer una etiqueta. */
--sv-ink-muted: #5A6E68;
--sv-border: #E0E8E5;
--sv-success: #2D7A4F;
--sv-warning: #B8860B;
--sv-danger: #9B2C2C;
/* Escala de radios: una sola fuente para toda la app. MudBlazor toma
DefaultBorderRadius de SolvraxTheme.cs; estos son para el CSS propio. */
--sv-radius-sm: 10px;
--sv-radius: 14px;
--sv-radius-lg: 22px;
--sv-radius-xl: 30px;
/* Sombras suaves y bajas, no cajas con borde duro. */
--sv-shadow-sm: 0 1px 2px rgba(14, 36, 31, .06), 0 1px 3px rgba(14, 36, 31, .04);
--sv-shadow: 0 4px 16px -6px rgba(14, 36, 31, .14);
--sv-shadow-lg: 0 40px 80px -30px rgba(8, 32, 28, .42), 0 2px 8px rgba(8, 32, 28, .06);
}
/* Paleta OSCURA (parámetro ui.paleta_colores = OSCURO). On-brand (Teal aclarado).
Mismos valores semánticos que SolvraxTheme.PaletteDark → MudBlazor y el CSS propio cambian juntos. */
html[data-theme="oscuro"] {
/* Aclarado del grafito para fondo oscuro (mismo criterio que los demas acentos). */
--sv-primary: #90A8B4;
--sv-primary-light: #A9BFC9;
--sv-secondary: #D4A53A;
--sv-surface: #071916;
--sv-surface-card: #10201C;
--sv-surface-sunk: #0B1815;
--sv-ink: #E6F0ED;
--sv-ink-muted: #8CA49E;
--sv-border: #1F3831;
--sv-success: #4CAF6E;
--sv-warning: #D4A53A;
--sv-danger: #E06A6A;
--sv-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
--sv-shadow: 0 4px 18px -6px rgba(0, 0, 0, .55);
--sv-shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
}
/* Tamaño base de la UI (preferencia ui.apariencia → --sv-font-size-base, escala acotada
15/16/17 px). Al fijarlo en , la cascada rem de MudBlazor escala proporcionalmente. */
html {
font-size: var(--sv-font-size-base, 16px);
}
html, body {
font-family: var(--sv-font-ui, 'Inter'), sans-serif;
background-color: var(--sv-surface);
color: var(--sv-ink);
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lexend', sans-serif;
}
/* Datos numéricos/montos: alineación de columnas en tablas y grids */
.sv-numeric {
font-variant-numeric: tabular-nums;
}
/* Último recurso de error (rebrandeado): tarjeta centrada abajo, no una franja roja "rota".
Blazor fuerza display:block al mostrarlo (inline), por eso el layout usa block + flex en hijos. */
#blazor-error-ui {
display: none;
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
width: 440px;
max-width: 92%;
box-sizing: border-box;
align-items: center;
gap: 12px;
background: #fff;
color: var(--sv-ink, #2A3D36);
border: 1px solid var(--sv-border, #E3DFD4);
border-left: 4px solid var(--sv-danger, #C0392B);
border-radius: 12px;
box-shadow: 0 10px 34px rgba(0,0,0,0.20);
padding: 14px 16px;
font-family: var(--sv-font-ui, 'Inter'), sans-serif;
font-size: 14px;
line-height: 1.35;
z-index: 13000;
}
/* Cuando Blazor lo muestra (display:block inline), forzamos el layout flex del contenido. */
#blazor-error-ui { display: none; }
#blazor-error-ui[style*="display: block"],
#blazor-error-ui[style*="display:block"] { display: flex !important; }
#blazor-error-ui .sv-err-icon { font-size: 22px; line-height: 1; }
#blazor-error-ui .sv-err-texto { flex: 1 1 auto; min-width: 0; }
#blazor-error-ui .sv-err-titulo { font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 15px; margin-bottom: 2px; }
#blazor-error-ui .sv-err-cuerpo { color: var(--sv-ink-muted, #5C6B66); }
#blazor-error-ui .reload {
flex: 0 0 auto;
background: var(--sv-primary, #1E6E52);
color: #fff;
text-decoration: none;
font-weight: 600;
padding: 8px 14px;
border-radius: 8px;
white-space: nowrap;
}
#blazor-error-ui .reload:hover { filter: brightness(1.06); }
#blazor-error-ui .dismiss {
flex: 0 0 auto;
cursor: pointer;
color: var(--sv-ink-muted, #5C6B66);
font-size: 16px;
line-height: 1;
padding: 2px 4px;
}
/* Modo oscuro (el arranque marca data-theme en ). */
:root[data-theme="oscuro"] #blazor-error-ui {
background: #22282A;
color: #E8EAE9;
border-color: #3A4247;
}
:root[data-theme="oscuro"] #blazor-error-ui .sv-err-cuerpo { color: #A9B2AE; }
/* =====================================================================
SUPERFICIE "VIDRIO" (Liquid Glass) — piloto, preferencia por usuario.
Eje independiente del tema/paleta: se enciende con html[data-surface="vidrio"]
(lo fija solvraxApariencia.set). Si está en "clasico" (o ausente), NADA de esto
aplica y la UI queda idéntica a la actual. Se tiñe con los tokens --sv-*, así
que respeta la paleta y el modo claro/oscuro vigentes.
Alcance del piloto (bajo ruido): el MARCO (barra + navegación + diálogos) y los
botones primarios. El contenido/tablas quedan planos a propósito.
===================================================================== */
/* Fondo AMBIENTAL (como el mockup): halos suaves teñidos con el acento sobre el
lienzo base. Da profundidad y algo para que el vidrio refracte. Muy sutil (bajo
ruido). background-attachment: fixed → queda de telón, no se desplaza al hacer scroll. */
html[data-surface="vidrio"] body {
background-color: var(--sv-surface);
background-image:
radial-gradient(60% 55% at 12% -5%, color-mix(in oklab, var(--sv-primary) 13%, transparent), transparent 70%),
radial-gradient(55% 50% at 106% 12%, color-mix(in oklab, var(--sv-primary-light) 10%, transparent), transparent 72%),
radial-gradient(48% 55% at 92% 112%, color-mix(in oklab, var(--sv-primary) 9%, transparent), transparent 72%);
background-attachment: fixed;
background-repeat: no-repeat;
}
/* Que las capas de layout no tapen el fondo ambiental. */
html[data-surface="vidrio"] .mud-layout,
html[data-surface="vidrio"] .mud-main-content {
background-color: transparent !important;
}
/* Marco esmerilado: barra superior, cajón de navegación, diálogos y popups
(menús, desplegables de select, date pickers… todos viven en .mud-popover). */
html[data-surface="vidrio"] .mud-appbar,
html[data-surface="vidrio"] .mud-drawer,
html[data-surface="vidrio"] .mud-dialog {
/* Vidrio TINTADO con la marca: se lee la paleta (teal/color) a través del blur. */
background-color: color-mix(in oklab, var(--sv-primary) 10%, color-mix(in oklab, var(--sv-surface-card) 68%, transparent)) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border-color: color-mix(in oklab, var(--sv-primary) 22%, transparent) !important;
box-shadow:
inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.85),
inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.30),
0 8px 30px -12px rgba(0, 0, 0, 0.28);
}
/* La barra superior: vidrio CLARO (mockup) — apenas teñido, texto/íconos en tinta.
El color se reserva para botones y detalles, no para llenar la barra. */
html[data-surface="vidrio"] .mud-appbar {
background-color: color-mix(in oklab, var(--sv-primary) 15%, color-mix(in oklab, var(--sv-surface-card) 74%, transparent)) !important;
}
html[data-surface="vidrio"] .mud-appbar,
html[data-surface="vidrio"] .mud-appbar .mud-typography,
html[data-surface="vidrio"] .mud-appbar .mud-icon-button,
html[data-surface="vidrio"] .mud-appbar .mud-icon-root,
html[data-surface="vidrio"] .mud-appbar .mud-button-root,
html[data-surface="vidrio"] .mud-appbar a {
color: var(--sv-ink) !important;
}
/* El menú lateral con un lavado de marca un poco más notorio que los diálogos. */
html[data-surface="vidrio"] .mud-drawer {
background-color: color-mix(in oklab, var(--sv-primary) 14%, color-mix(in oklab, var(--sv-surface-card) 66%, transparent)) !important;
}
/* Cabecera del diálogo: en Vidrio deja de ser una franja de color (app.css la llena con
--sv-primary) y se vuelve transparente sobre el vidrio del diálogo, con el título en
tinta y una línea de acento sutil. Así el color no domina (look del mockup). */
html[data-surface="vidrio"] .mud-dialog-title {
background-color: transparent !important;
border-bottom: 1px solid color-mix(in oklab, var(--sv-primary) 24%, transparent);
}
html[data-surface="vidrio"] .mud-dialog-title,
html[data-surface="vidrio"] .mud-dialog-title .mud-typography {
color: var(--sv-ink) !important;
}
html[data-surface="vidrio"] .mud-dialog-title .mud-icon-button,
html[data-surface="vidrio"] .mud-dialog-title .mud-icon-root,
html[data-surface="vidrio"] .mud-dialog-title .mud-button-root {
color: var(--sv-ink-muted) !important;
}
/* Popups (menús, desplegables de select, date pickers). En MudBlazor 8 la caja ES el
propio .mud-popover; algunos (pickers/autocomplete) además traen un .mud-paper. Teñimos
ambos para cubrir todos los casos. */
html[data-surface="vidrio"] .mud-popover,
html[data-surface="vidrio"] .mud-popover .mud-paper,
html[data-surface="vidrio"] .mud-popover .mud-list {
background-color: color-mix(in oklab, var(--sv-primary) 12%, color-mix(in oklab, var(--sv-surface-card) 76%, transparent)) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid color-mix(in oklab, var(--sv-primary) 24%, transparent) !important;
}
/* Botón primario LÍQUIDO: fondo translúcido + refracción SVG (#sv-liquid) + bisel de vidrio.
El texto sigue legible (relleno al 84% del acento); si el navegador no soporta el filtro,
se queda solo el bisel (degradación limpia). */
html[data-surface="vidrio"] .mud-button-filled.mud-button-filled-primary {
background-color: color-mix(in oklab, var(--sv-primary) 84%, transparent) !important;
-webkit-backdrop-filter: url("#sv-liquid") saturate(1.15);
backdrop-filter: url("#sv-liquid") saturate(1.15);
box-shadow:
inset 1.5px 1.5px 1px -1px rgba(255, 255, 255, 0.65),
inset -1.5px -1.5px 1px -1px rgba(0, 0, 0, 0.25),
inset 0 0 8px 2px color-mix(in oklab, #fff 12%, transparent),
0 4px 16px -6px color-mix(in oklab, var(--sv-primary) 60%, transparent);
transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
html[data-surface="vidrio"] .mud-button-filled.mud-button-filled-primary:hover {
transform: translateY(-1px);
filter: brightness(1.06);
}
html[data-surface="vidrio"] .mud-button-filled.mud-button-filled-primary:active {
transform: translateY(0);
filter: brightness(0.96);
}
/* Respaldo: donde backdrop-filter no exista, superficie sólida (nunca "transparente rota"). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-surface="vidrio"] .mud-appbar,
html[data-surface="vidrio"] .mud-drawer,
html[data-surface="vidrio"] .mud-dialog,
html[data-surface="vidrio"] .mud-popover,
html[data-surface="vidrio"] .mud-popover .mud-paper,
html[data-surface="vidrio"] .mud-popover .mud-list {
background-color: var(--sv-surface-card) !important;
}
}
@media (prefers-reduced-motion: reduce) {
html[data-surface="vidrio"] .mud-button-filled.mud-button-filled-primary { transition: none; }
html[data-surface="vidrio"] .mud-button-filled.mud-button-filled-primary:hover { transform: none; }
}
/* (2)+(3) Tarjetas/paneles de CONTENIDO como vidrio flotando sobre el fondo ambiental:
esmerilado, esquinas más redondeadas y un poco más de aire. Acotado a .mud-main-content
para no tocar barra/menú/diálogos (que ya tienen su propio trato). */
html[data-surface="vidrio"] .mud-main-content .mud-paper,
html[data-surface="vidrio"] .mud-main-content .mud-card {
background-color: color-mix(in oklab, var(--sv-surface-card) 76%, transparent) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.25);
backdrop-filter: blur(12px) saturate(1.25);
border: 1px solid color-mix(in oklab, var(--sv-primary) 12%, transparent) !important;
border-radius: 16px !important;
}
/* Esquinas más redondeadas también en diálogos y popups (redondez del mockup). */
html[data-surface="vidrio"] .mud-dialog,
html[data-surface="vidrio"] .mud-popover,
html[data-surface="vidrio"] .mud-popover .mud-paper { border-radius: 16px !important; }
/* Un respiro extra de contenido (aire del mockup) sin descuadrar toolbars densos. */
html[data-surface="vidrio"] .mud-main-content .mud-card-content { padding: 18px 20px !important; }
html[data-surface="vidrio"] .mud-dialog-content { padding-top: 20px !important; }
/* Respaldo sin backdrop-filter: tarjetas sólidas (legibles). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-surface="vidrio"] .mud-main-content .mud-paper,
html[data-surface="vidrio"] .mud-main-content .mud-card {
background-color: var(--sv-surface-card) !important;
}
}
/* =====================================================================
ACENTO por usuario (preferencia ui.apariencia → html[data-accent]).
Reasigna --sv-primary / --sv-primary-light para el CSS propio. El MudTheme
cambia aparte (SolvraxTheme.Construir en MainLayout) con los MISMOS hex →
ambos sistemas de color se mueven juntos. TEAL = base (:root), sin override.
Modo claro: html[data-accent="…"]. Modo oscuro: compuesto con data-theme.
===================================================================== */
/* teal: era el :root hasta el 3 ago 2026; al dejar de serlo necesita bloque propio o quien lo
tenga elegido veria el grafito. */
html[data-accent="grafito"] { --sv-primary:#37474F; --sv-primary-light:#4A5B65; }
html[data-accent="teal"] { --sv-primary:#0F7A66; --sv-primary-light:#12A488; }
html[data-accent="marino"] { --sv-primary:#1B3A5C; --sv-primary-light:#2C557F; }
html[data-accent="azul"] { --sv-primary:#1D5F9E; --sv-primary-light:#2E77BE; }
html[data-accent="indigo"] { --sv-primary:#4A40A0; --sv-primary-light:#6156C2; }
html[data-accent="rojo"] { --sv-primary:#B23A2E; --sv-primary-light:#CC5040; }
html[data-accent="guinda"] { --sv-primary:#7A1F3D; --sv-primary-light:#9A3054; }
html[data-theme="oscuro"][data-accent="grafito"] { --sv-primary:#90A8B4; --sv-primary-light:#A9BFC9; }
html[data-theme="oscuro"][data-accent="teal"] { --sv-primary:#2ACBA9; --sv-primary-light:#4FDCBE; }
html[data-theme="oscuro"][data-accent="marino"] { --sv-primary:#7FA6CE; --sv-primary-light:#9CBBDC; }
html[data-theme="oscuro"][data-accent="azul"] { --sv-primary:#55A6EC; --sv-primary-light:#78BBF2; }
html[data-theme="oscuro"][data-accent="indigo"] { --sv-primary:#8F82F2; --sv-primary-light:#A99FF6; }
html[data-theme="oscuro"][data-accent="rojo"] { --sv-primary:#EC8479; --sv-primary-light:#F2A198; }
html[data-theme="oscuro"][data-accent="guinda"] { --sv-primary:#D06A8A; --sv-primary-light:#DE8AA3; }
/* ---------------------------------------------------------------------
TEXTO SOBRE EL ACENTO (--sv-primary-contraste)
Todo lo que pinte un fondo con --sv-primary debe tomar de aquí su color de texto, NUNCA
#FFFFFF fijo. El blanco funcionaba de casualidad: vale para los cinco acentos del modo
CLARO —que son oscuros— pero en modo OSCURO el primario es un pastel claro (#3FB89E,
#55A6EC, #8F82F2, #EC8479, #D06A8A) y el blanco encima daba 2.0–3.4 de contraste, muy por
debajo del mínimo AA de 4.5. El texto se perdía.
Mismo criterio que `SolvraxTheme.TextoSobre` del lado C#: gana el que más contrasta.
Si se agrega un acento nuevo, hay que poner también su contraste aquí.
--------------------------------------------------------------------- */
:root { --sv-primary-contraste: #FFFFFF; } /* claro: acentos oscuros → blanco */
html[data-theme="oscuro"] { --sv-primary-contraste: #1C2422; } /* oscuro: pasteles → tinta */
/* =====================================================================
LOGIN — vidrio líquido "hero". SIEMPRE activo (es la puerta de entrada,
pre-login; no depende de la preferencia de superficie). Se tiñe con el
acento vigente (--sv-primary, del caché o Teal por defecto) y respeta
claro/oscuro. El CTA usa el filtro SVG #sv-liquid de index.html.
===================================================================== */
.sv-login-bg {
background-color: var(--sv-surface);
background-image:
radial-gradient(45% 45% at 15% 0%, color-mix(in oklab, var(--sv-primary) 22%, transparent), transparent 70%),
radial-gradient(42% 45% at 100% 8%, color-mix(in oklab, var(--sv-primary-light) 18%, transparent), transparent 72%),
radial-gradient(50% 50% at 85% 105%, color-mix(in oklab, var(--sv-primary) 16%, transparent), transparent 72%);
background-attachment: fixed;
background-repeat: no-repeat;
}
/* Tarjeta de cristal del login: translúcida, muy redondeada, flotando sobre los halos. */
.sv-login-card {
background-color: color-mix(in oklab, var(--sv-surface-card) 66%, transparent) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.5);
backdrop-filter: blur(22px) saturate(1.5);
border: 1px solid color-mix(in oklab, var(--sv-primary) 18%, transparent) !important;
border-radius: 22px !important;
box-shadow:
inset 1.5px 1.5px 0.5px -1px rgba(255, 255, 255, 0.85),
inset -1.5px -1.5px 0.5px -1px rgba(255, 255, 255, 0.35),
0 24px 60px -24px rgba(0, 0, 0, 0.35) !important;
}
/* CTA «Iniciar sesión»: vidrio líquido pleno (refracción SVG + bisel + relleno translúcido). */
.sv-login-cta {
background-color: color-mix(in oklab, var(--sv-primary) 82%, transparent) !important;
-webkit-backdrop-filter: url("#sv-liquid") saturate(1.2);
backdrop-filter: url("#sv-liquid") saturate(1.2);
box-shadow:
inset 1.5px 1.5px 1px -1px rgba(255, 255, 255, 0.70),
inset -1.5px -1.5px 1px -1px rgba(0, 0, 0, 0.28),
inset 0 0 10px 3px color-mix(in oklab, #fff 14%, transparent),
0 6px 20px -6px color-mix(in oklab, var(--sv-primary) 65%, transparent) !important;
transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}
.sv-login-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.sv-login-cta:active { transform: translateY(0); filter: brightness(0.96); }
/* Respaldo sin backdrop-filter: tarjeta sólida legible; el CTA queda con su bisel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.sv-login-card { background-color: var(--sv-surface-card) !important; }
.sv-login-cta { background-color: var(--sv-primary) !important; }
}
@media (prefers-reduced-motion: reduce) {
.sv-login-cta { transition: none !important; }
.sv-login-cta:hover { transform: none; }
}
/* =====================================================================
ACCESO — login y registro (newbrand)
Estructura de la referencia: campo de color saturado, tarjeta muy
redondeada flotando encima, formulario a la izquierda y panel gráfico a
la derecha. El panel se pinta con el ACENTO ACTIVO, así que un usuario
con Índigo ve su índigo: la personalización sigue mandando.
===================================================================== */
/* El campo de color. Sustituye los halos difusos por un degradado con
dirección: lo que hacía que la pantalla se viera lavada era la falta de
un punto de mayor densidad. */
.sv-auth-bg {
background-color: var(--sv-surface);
background-image:
radial-gradient(120% 120% at 12% 8%,
color-mix(in oklab, var(--sv-primary-light) 92%, transparent) 0%,
color-mix(in oklab, var(--sv-primary) 96%, transparent) 42%,
var(--sv-ink) 100%);
background-attachment: fixed;
background-repeat: no-repeat;
display: grid;
place-items: center;
padding: clamp(12px, 3vw, 48px);
}
/* La tarjeta: dos columnas simétricas, esquinas grandes, sombra baja. */
.sv-auth-shell {
width: min(1060px, 100%);
background: var(--sv-surface-card);
border-radius: var(--sv-radius-xl, 30px);
box-shadow: var(--sv-shadow-lg);
padding: clamp(12px, 1.4vw, 18px);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(12px, 1.8vw, 22px);
animation: sv-auth-rise .65s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes sv-auth-rise {
from { opacity: 0; transform: translateY(12px) scale(.99); }
to { opacity: 1; transform: none; }
}
/* Columna del formulario. El aire es el punto: sin esto la tarjeta partida
se ve apretada y pierde el efecto. */
.sv-auth-form {
padding: clamp(18px, 3vw, 46px) clamp(14px, 2.6vw, 40px);
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
/* Panel gráfico. El grano es lo que evita que el degradado se vea plano y
sintético; va en un data URI para no depender de ninguna petición. */
.sv-auth-art {
position: relative;
overflow: hidden;
border-radius: var(--sv-radius-lg, 22px);
min-height: 460px;
background:
radial-gradient(85% 70% at 78% 12%,
color-mix(in oklab, var(--sv-primary-light) 88%, #fff) 0%, transparent 55%),
radial-gradient(70% 80% at 18% 78%,
color-mix(in oklab, var(--sv-primary) 90%, #000) 0%, transparent 62%),
linear-gradient(155deg,
var(--sv-primary-light) 0%, var(--sv-primary) 40%, var(--sv-ink) 100%);
}
.sv-auth-art::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: .16;
mix-blend-mode: overlay;
pointer-events: none;
}
.sv-auth-art-inner {
position: absolute;
inset: 0;
padding: clamp(20px, 2.4vw, 34px);
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
}
.sv-auth-tag {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .2);
padding: 7px 12px;
border-radius: 999px;
}
.sv-auth-tag i {
width: 6px; height: 6px; border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.sv-auth-art-quote {
font-family: 'Lexend', sans-serif;
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.3;
margin: 0;
text-wrap: balance;
max-width: 24ch;
}
.sv-auth-art-sub {
margin: 8px 0 0;
font-size: .82rem;
color: rgba(255, 255, 255, .74);
}
/* Hueco para la imagen de marca. Si no hay archivo, el panel se ve igual de
bien: el degradado ya sostiene la composición por sí solo. */
.sv-auth-art-img {
flex: 1;
margin: 18px 0;
border-radius: 16px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 900px) {
.sv-auth-shell { grid-template-columns: minmax(0, 1fr); }
.sv-auth-art { min-height: 190px; order: -1; }
.sv-auth-art-img { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.sv-auth-shell { animation: none; }
}
/* =====================================================================
ACCESO 2 (/login2) — controles propios, no MudBlazor.
La página combina login y alta en una sola tarjeta, y para que se vea
como el mock-up los campos se construyen a mano: MudBlazor impone su
propio alto, etiqueta flotante y borde, y pelearse con eso a base de
!important sale peor que escribir seis reglas.
Todo cuelga de los tokens (--sv-*), así que el acento del usuario y el
tema claro/oscuro siguen mandando.
===================================================================== */
.sv2-head h1 {
font-family: 'Lexend', sans-serif;
font-size: clamp(1.65rem, 3vw, 2.1rem);
font-weight: 650;
letter-spacing: -.035em;
line-height: 1.1;
margin: 0 0 .5rem;
color: var(--sv-ink);
text-wrap: balance;
}
.sv2-head p {
margin: 0;
color: var(--sv-ink-muted);
font-size: .92rem;
line-height: 1.55;
max-width: 42ch;
}
/* Segmentado login / alta */
.sv2-seg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
background: var(--sv-surface-sunk, var(--sv-surface));
border-radius: 12px;
padding: 4px;
margin: 1.4rem 0;
}
.sv2-seg button {
font: inherit;
font-size: .86rem;
font-weight: 560;
color: var(--sv-ink-muted);
background: transparent;
border: 0;
border-radius: 9px;
padding: 10px 12px;
cursor: pointer;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.sv2-seg button[aria-selected="true"] {
background: var(--sv-surface-card);
color: var(--sv-ink);
box-shadow: var(--sv-shadow-sm);
}
.sv2-seg button:focus-visible { outline: 2px solid var(--sv-primary); outline-offset: 2px; }
/* Campos */
.sv2-fields { display: flex; flex-direction: column; gap: 13px; }
.sv2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.sv2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sv2-field > label {
font-size: .69rem;
font-weight: 620;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--sv-ink-muted);
}
.sv2-control {
display: flex;
align-items: center;
gap: 9px;
background: var(--sv-surface-sunk, var(--sv-surface));
border: 1px solid transparent;
border-radius: var(--sv-radius, 14px);
padding: 0 13px;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.sv2-control:focus-within {
background: var(--sv-surface-card);
border-color: var(--sv-primary);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--sv-primary) 16%, transparent);
}
.sv2-control input {
font: inherit;
font-size: .92rem;
color: var(--sv-ink);
background: none;
border: 0;
outline: none;
padding: 12px 0;
width: 100%;
min-width: 0;
}
.sv2-control input::placeholder { color: var(--sv-ink-muted); opacity: .7; }
.sv2-control svg { flex: none; color: var(--sv-ink-muted); }
.sv2-control .sv2-ghost {
font: inherit;
font-size: .78rem;
font-weight: 560;
color: var(--sv-ink-muted);
background: none;
border: 0;
cursor: pointer;
padding: 4px;
white-space: nowrap;
}
.sv2-control .sv2-ghost:hover { color: var(--sv-primary); }
.sv2-hint { font-size: .72rem; color: var(--sv-ink-muted); }
/* Opciones */
.sv2-opts {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
font-size: .84rem;
}
.sv2-check { display: flex; align-items: center; gap: 8px; color: var(--sv-ink-muted); cursor: pointer; }
.sv2-check input { accent-color: var(--sv-primary); width: 15px; height: 15px; }
.sv2-link {
color: var(--sv-primary);
text-decoration: none;
font-weight: 560;
border-radius: 4px;
cursor: pointer;
background: none;
border: 0;
font: inherit;
font-weight: 560;
padding: 0;
}
.sv2-link:hover { text-decoration: underline; }
.sv2-link:focus-visible { outline: 2px solid var(--sv-primary); outline-offset: 3px; }
/* Botón principal */
.sv2-cta {
font: inherit;
font-size: .95rem;
font-weight: 620;
color: #fff;
background: linear-gradient(180deg,
color-mix(in oklab, var(--sv-primary-light) 92%, #fff),
var(--sv-primary));
border: 0;
border-radius: var(--sv-radius, 14px);
padding: 14px 18px;
cursor: pointer;
box-shadow: 0 8px 20px -10px color-mix(in oklab, var(--sv-primary) 80%, transparent);
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.sv2-cta:hover:not(:disabled) { filter: brightness(1.06); }
.sv2-cta:active:not(:disabled) { transform: translateY(1px); }
.sv2-cta:disabled { opacity: .62; cursor: default; }
.sv2-cta:focus-visible { outline: 2px solid var(--sv-primary-light); outline-offset: 3px; }
.sv2-foot { font-size: .84rem; color: var(--sv-ink-muted); text-align: center; margin: 0; }
/* Marca */
.sv2-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 1.6rem; }
.sv2-brand-name {
font-family: 'Lexend', sans-serif;
font-size: 1.05rem;
font-weight: 650;
letter-spacing: -.02em;
color: var(--sv-ink);
}
.sv2-brand-name span { color: var(--sv-primary); }
@media (max-width: 900px) {
.sv2-row { grid-template-columns: minmax(0, 1fr); }
}
/* Hueco de la imagen del panel de acceso.
El marco punteado va DEBAJO y la foto encima: si el archivo carga la tapa por
completo, y si falta, el se oculta solo (onerror) y queda el marco con su
leyenda. Sin esto un archivo faltante deja un hueco mudo que parece un error de
maquetación. */
.sv-auth-art-slot {
position: relative;
flex: 1;
margin: 18px 0;
border-radius: 16px;
overflow: hidden;
}
.sv-auth-art-ph {
position: absolute;
inset: 0;
border: 1.5px dashed rgba(255, 255, 255, .34);
border-radius: 16px;
display: grid;
place-content: center;
text-align: center;
padding: 20px;
}
.sv-auth-art-ph strong {
display: block;
font-size: .84rem;
font-weight: 600;
color: #fff;
}
.sv-auth-art-ph p {
margin: 10px auto 0;
font-size: .78rem;
line-height: 1.5;
color: rgba(255, 255, 255, .72);
max-width: 26ch;
}
.sv-auth-art-slot img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
display: block;
}
@media (max-width: 900px) {
.sv-auth-art-slot { display: none; }
}
/* =====================================================================
Diálogo de PARTIDA — las dos fichas comparten alto mínimo.
Sin esto el modal encoge al pasar a «Observaciones» (una ficha con un
solo campo) y vuelve a crecer al regresar: el botón Aceptar salta bajo
el cursor, que es la clase de detalle que hace sentir inestable una
pantalla que funciona bien.
===================================================================== */
.sv-partida-ficha {
min-height: 340px;
}
@media (max-width: 600px) {
/* En móvil el alto lo manda el contenido: reservar 340px dejaría media
pantalla vacía bajo la ficha corta. */
.sv-partida-ficha { min-height: 0; }
}
/* =====================================================================
TABS — estilo navegador (estándar de toda la app), del mock aprobado.
La unidad completa es UNA pieza redondeada, como la ventana de un navegador:
· una tira superior más apagada donde viven las fichas;
· la ficha activa es una superficie que SE DESLIZA hasta el destino y se
FUNDE con el panel de abajo — mismo color, sin costura: la pestaña «sube
el volumen» del contenido, como en Safari/Chrome;
· el hover dibuja una píldora fantasma neutra, el paso intermedio;
· la inactiva es solo texto e icono apagados, sin contenedor.
La activa se reconoce por FORMA y no solo por color, que es lo que la vuelve
legible con los cinco acentos, en claro y en oscuro, y para quien no
distingue bien los colores. Todo sale de los tokens --sv-*: ni un color fijo.
===================================================================== */
/* Los dos tonos de la unidad, derivados de los tokens por tema.
En CLARO la tira se oscurece un paso (la superficie hundida sola da 1.13
contra la tarjeta: no se ve); en OSCURO es al revés — la tira se queda en el
fondo hundido y lo que sube es el PANEL, aclarado un punto, porque «subir el
volumen» en un tema oscuro es aclarar lo activo, no oscurecer lo demás. */
.mud-tabs:not(.mud-tabs-vertical) {
--sv-tabs-strip: color-mix(in oklab, var(--sv-ink) 5%, var(--sv-surface-sunk));
--sv-tabs-panel: var(--sv-surface-card);
background-color: var(--sv-tabs-strip);
border: 1px solid var(--sv-border);
border-radius: var(--sv-radius);
/* Recorta las esquinas de tira y panel de una sola vez. Los popovers y menús
de MudBlazor viven en su provider a nivel de body, así que esto no los corta. */
overflow: hidden;
}
html[data-theme="oscuro"] .mud-tabs:not(.mud-tabs-vertical) {
--sv-tabs-strip: var(--sv-surface-sunk);
--sv-tabs-panel: color-mix(in oklab, var(--sv-surface-card) 88%, #FFFFFF 12%);
}
/* El panel comparte superficie con la ficha activa: esa igualdad ES la fusión. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tabs-panels {
background-color: var(--sv-tabs-panel);
}
/* El contenido RESPIRA al llegar: 4px de subida con fundido, en la misma curva y
por debajo de la píldora en duración (180 contra 280 ms) para que termine
antes de que la pestaña aterrice. Es deliberadamente poco: esta pantalla se
cambia decenas de veces al día y un desplazamiento teatral aquí sería un
peaje, no un adorno. Anima transform y opacity: composición pura. */
@keyframes sv-panel-entra {
from { opacity: 0; transform: translateY(4px); }
}
.mud-tabs:not(.mud-tabs-vertical) .mud-tab-panel:not(.mud-tab-panel-hidden) {
animation: sv-panel-entra .18s cubic-bezier(.23, 1, .32, 1);
}
/* La tira: aire arriba y a los lados, CERO abajo — la ficha activa tiene que
tocar el panel para fundirse con él.
⚠️ Nada de `width: fit-content` aquí, aunque la barra ceñida se vea mejor con dos
fichas: MudBlazor le pone `width: 100%` a cada `.mud-tab` y el ancho de la barra
pasaría a depender de unos hijos que dependen de ella. La circularidad no revienta
—se resuelve mal y en silencio—: cada ficha se estira al ancho entero y la barra
se desborda. Medido, no supuesto. */
.mud-tabs:not(.mud-tabs-vertical) > .mud-tabs-tabbar {
background-color: transparent;
border: none;
padding: 6px 6px 0 6px;
box-shadow: none;
}
/* Las fichas toman su ancho natural, no el de la barra. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tabs-tabbar-wrapper .mud-tab {
width: auto;
}
/* ── La píldora que SE DESLIZA ──────────────────────────────────────────────
La línea indicadora de MudBlazor no se oculta: se convierte en la píldora.
Es el mismo elemento que el framework ya posiciona y anima siguiendo a la
ficha activa, así que el deslizamiento sale gratis y siempre está en su sitio
—incluso cuando las fichas cambian de ancho o aparecen y desaparecen—. Pintar
una píldora propia habría exigido replicar ese cálculo en JS para acabar en el
mismo lugar, con un motivo más para desincronizarse.
MudBlazor solo transiciona `left`, y al cambiar entre fichas de ancho distinto
el salto de `width` se ve: se añade aquí. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tab-slider.mud-tab-slider-horizontal {
/* `top: 0` y no el padding de la barra: el indicador se posiciona contra
`.mud-tabs-tabbar-content`, que ya vive DENTRO de ese padding. Sumarlo otra
vez dejaba la píldora 4px por debajo de su ficha — medido. */
top: 0;
bottom: auto;
height: 38px;
/* Solo las esquinas de ARRIBA: las de abajo se funden con el panel. */
border-radius: var(--sv-radius-sm) var(--sv-radius-sm) 0 0;
/* El mismo color que el panel, sin borde ni sombra: la definición la pone el
contraste tonal contra la tira, como en un navegador real. Un borde o una
sombra pintarían una línea justo donde la fusión promete que no hay nada. */
background: var(--sv-tabs-panel);
border: none;
box-shadow: none;
/* 280 ms: por debajo de los 300 que vuelven lenta una interfaz que se usa
decenas de veces al día, y con una curva más fuerte que la del framework —
arranca de inmediato, que es el momento que el ojo está mirando.
⚠️ Sí, esto anima `left` y `width`, que son propiedades de LAYOUT, y la regla
general es animar solo `transform` y `opacity`. Aquí la excepción está
razonada, no olvidada:
· el indicador es `position: absolute`, o sea que está FUERA DEL FLUJO: su
recálculo no re-maqueta la página, solo a sí mismo, y es un único nodo;
· la alternativa canónica —`translateX` + `scaleX`— DEFORMA lo que hace
reconocible a esta píldora: el borde de 1 px se estira a grosor variable
y el radio se vuelve ovalado mientras viaja, porque las fichas tienen
anchos distintos. Corregirlo exige escalar en sentido inverso un hijo
interno, que es mucha maquinaria para un elemento que se mueve 280 ms
cuando alguien cambia de ficha;
· y no es movimiento continuo: ocurre en un gesto puntual, no en scroll ni
en un bucle.
Si algún día se ve tirón en equipos lentos, el camino es el hijo con escala
inversa, no quitar la animación. */
transition: left .28s cubic-bezier(.23, 1, .32, 1), width .28s cubic-bezier(.23, 1, .32, 1);
will-change: left, width;
}
/* ⚠️ Aquí vivían los CUELLOS cóncavos (los filetes con que la pestaña de un
navegador se derrama en la página, dos cuadrados con un degradado radial
pegados a los lados de la píldora). SE RETIRARON: en pantalla no se leían
como filetes sino como dos parches sueltos junto a la ficha activa, y el
dueño los señaló. La geometría era plausible sobre el papel y falsa en el
render — este entorno no compone frames, así que se construyeron a ciegas.
Si algún día se retoman, la condición es mirarlos: con `::before/::after` no
basta razonar el arco, hay que ver dónde cae el antialias contra la tira. La
pestaña se queda con sus esquinas superiores redondeadas fundidas al panel,
que es limpio y no inventa formas. */
/* Las fichas van ENCIMA de la píldora, que es su fondo. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tab {
position: relative;
z-index: 1;
}
/* Quien llega con el movimiento reducido activado ve el cambio, no el viaje. */
@media (prefers-reduced-motion: reduce) {
.mud-tabs:not(.mud-tabs-vertical) .mud-tab-slider.mud-tab-slider-horizontal {
transition: none;
}
.mud-tabs:not(.mud-tabs-vertical) .mud-tab-panel:not(.mud-tab-panel-hidden) {
animation: none;
}
}
/* El flex real de la barra es el `wrapper`, no el `content` (que es inline-block):
el gap puesto en el sitio equivocado no separa nada. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tabs-tabbar-wrapper {
gap: 2px;
}
/* `inline-block` deja 4px de DESCENDER bajo la caja —el hueco que la tipografía
reserva para la cola de la «g»— y esos 4px eran una costura entre la ficha
activa y el panel: la fusión rota por un baseline. En bloque, desaparece. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tabs-tabbar-content {
display: block;
}
/* ⚠️ El armazón interno de la barra trae `min-height: 48px` de fábrica. Con fichas
de 38 + 6 de aire son 44: MudBlazor estiraba la barra a 48+6 y el sobrante se
veía como una TIRA GRIS entre la ficha activa y el panel — la fusión rota por
un mínimo invisible. Se descubrió porque el fixture de verificación no incluía
este nivel del DOM y renderizaba «perfecto» mientras la app real no: desde
entonces el fixture replica el árbol completo. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tabs-tabbar-inner {
min-height: 0;
}
/* ⚠️ Y el mínimo tiene un CÓMPLICE que solo aparece con MUCHAS fichas: los botones
de desplazamiento (‹ ›) son MudIconButton de 48px, y en un flex el hijo más
alto manda — con 10 fichas (Asociados) la tira gris volvía aunque el armazón ya
no tuviera mínimo. Reproducido en el fixture con overflow: costura de 10px
exactos. Se acotan al alto de la ficha, con el icono centrado. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tabs-scroll-button .mud-button-root {
height: 38px;
width: 34px;
padding: 5px;
border-radius: var(--sv-radius-sm);
color: var(--sv-ink-muted);
}
.mud-tabs:not(.mud-tabs-vertical) .mud-tab {
min-height: 38px;
padding: 6px 16px;
border-radius: var(--sv-radius-sm);
/* MAYÚSCULAS fuera: «Información financiera» en caja alta es más ancho y se
lee peor; el peso y el color ya jerarquizan. */
text-transform: none;
letter-spacing: -.01em;
font-size: .875rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
color: var(--sv-ink-muted);
background-color: transparent;
/* Propiedades concretas, nunca `all`: `all` transiciona también lo que cambie
por otras razones y produce animaciones que nadie pidió. */
transition: background-color .18s ease, color .18s ease, transform .12s cubic-bezier(.23, 1, .32, 1);
}
/* El hover solo donde hay puntero de verdad: en táctil se dispara al tocar y deja
la ficha «encendida» después de soltar. */
@media (hover: hover) and (pointer: fine) {
.mud-tabs:not(.mud-tabs-vertical) .mud-tab:hover:not(.mud-tab-active):not(.mud-disabled) {
/* Píldora fantasma NEUTRA, como en la referencia: el paso intermedio hacia
la activa, no un tinte del acento. Mezclar la TINTA y no un gris fijo
hace que la misma regla funcione en los dos temas — la tinta es oscura
en claro (oscurece) y clara en oscuro (aclara). */
background-color: color-mix(in oklab, var(--sv-ink) 7%, transparent);
color: var(--sv-ink);
}
}
/* Respuesta al clic. La ficha se hunde un punto mientras el dedo está abajo: sin
esto, entre el clic y el viaje de la píldora hay un hueco en el que la interfaz
parece no haber oído. Es leve a propósito —0.97 encoge el texto de forma
visible— y no toca la píldora, que sigue su propio camino. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tab:active:not(.mud-disabled) {
transform: scale(.985);
}
/* La ficha activa NO se pinta a sí misma: su fondo es la superficie que se
desliza por debajo (el indicador), que a su vez es del color del panel. La
tríada tira/ficha/panel es lo que produce el efecto navegador: la tira apagada
detrás, la ficha y el panel iguales y fundidos. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tab.mud-tab-active {
background-color: transparent;
color: var(--sv-ink);
box-shadow: none;
}
/* Iconos de ficha: 18px como en la referencia — discretos, acompañan al texto sin
competir con él (el tamaño default de MudBlazor, 24px, domina la etiqueta). */
.mud-tabs:not(.mud-tabs-vertical) .mud-tab .mud-icon-root {
font-size: 18px;
width: 18px;
height: 18px;
margin-inline-end: 7px;
/* El icono FUNDE hacia el acento al activarse, al paso del texto: sin esto el
color salta de golpe mientras todo lo demás transiciona. */
transition: color .18s ease;
}
/* El icono de la ficha activa toma el acento; el de las demás sigue al texto. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tab.mud-tab-active .mud-icon-root {
color: var(--sv-primary);
}
.mud-tabs:not(.mud-tabs-vertical) .mud-tab.mud-disabled {
opacity: .45;
color: var(--sv-ink-muted);
}
/* Foco visible por teclado: la píldora se recorta con outline propio, porque el
del navegador queda cortado por el radio. */
.mud-tabs:not(.mud-tabs-vertical) .mud-tab:focus-visible {
outline: 2px solid var(--sv-primary);
outline-offset: 1px;
}
/* En pantallas angostas la barra ocupa el ancho y sus fichas se reparten, en vez
de desbordar y obligar a las flechas de scroll de MudBlazor. */
@media (max-width: 600px) {
.mud-tabs:not(.mud-tabs-vertical) > .mud-tabs-tabbar { width: 100%; }
.mud-tabs:not(.mud-tabs-vertical) .mud-tab { padding: 6px 10px; font-size: .82rem; }
}