/* ========================================
   🎨 ESTILOS BASE (alineado con Radzen theme variables)
   ======================================== */

:root {
    font-size: var(--rz-root-font-size);
}

body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

/*
   Fondo ambiental del shell, inspirado en la composición de Radzen Blazor
   Studio. Se limita a Material / Material Dark (incluyendo su modo WCAG) y
   vive en RadzenBody y en el canvas Executive para acompañar el scroll sin alterar cards, diálogos,
   sidebar ni las experiencias públicas que usan otro layout.
*/
html:has(head link[href*="/material.css"]) :is(.rz-body, .raysys-ambient-surface),
html:has(head link[href*="/material-base.css"]) :is(.rz-body, .raysys-ambient-surface),
html:has(head link[href*="/material-wcag.css"]) :is(.rz-body, .raysys-ambient-surface),
html:has(head link[href*="/material-dark.css"]) :is(.rz-body, .raysys-ambient-surface),
html:has(head link[href*="/material-dark-base.css"]) :is(.rz-body, .raysys-ambient-surface),
html:has(head link[href*="/material-dark-wcag.css"]) :is(.rz-body, .raysys-ambient-surface) {
    background-image: url("images/raysys-material-ambient-background.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

/* LoginLayout no contiene RadzenBody. El marcador compartido de sus páginas
   anónimas permite llevar el mismo ambiente al canvas pre-login sin afectar
   kioscos, displays públicos ni los demás temas. */
html:has(head link[href*="/material.css"]):has(.login-header-actions) body,
html:has(head link[href*="/material-base.css"]):has(.login-header-actions) body,
html:has(head link[href*="/material-wcag.css"]):has(.login-header-actions) body,
html:has(head link[href*="/material-dark.css"]):has(.login-header-actions) body,
html:has(head link[href*="/material-dark-base.css"]):has(.login-header-actions) body,
html:has(head link[href*="/material-dark-wcag.css"]):has(.login-header-actions) body {
    min-height: 100dvh;
    background-image: url("images/raysys-material-ambient-background.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

a, .btn-link {
    color: var(--rz-link-color, #006bb7);
}

a:hover,
a:focus {
    color: var(--rz-link-hover-color);
}

.rz-body {
    --rz-body-padding: 0;
}

/* Native variants are selected centrally by AppearanceComponentActivator.
   Light is a neutral action in RaySys: adjust only its native ink token when
   inheriting an outlined/text policy. Explicit variants remain untouched. */
.raysys-default-variant.rz-light:is(.rz-variant-outlined, .rz-variant-text),
.raysys-default-variant.rz-splitbutton > .rz-button.rz-light:is(.rz-variant-outlined, .rz-variant-text) {
    --rz-base-200: var(--rz-text-color);
}
/* ========================================
   Badge visual policy
   Keeps status chips readable and subtle in light/dark themes.
   ======================================== */

:root {
    --raysys-badge-bg-strength: 9%;
    --raysys-badge-border-strength: 62%;
    --raysys-badge-neutral-bg-strength: 6%;
    --raysys-badge-neutral-border-strength: 28%;
}

.rz-dark,
html:has(head link[href*="material-dark"]),
html:has(head link[href*="standard-dark"]),
html:has(head link[href*="dark-wcag"]) {
    --raysys-badge-bg-strength: 13%;
    --raysys-badge-border-strength: 72%;
    --raysys-badge-neutral-bg-strength: 8%;
    --raysys-badge-neutral-border-strength: 38%;
}

.rz-badge {
    border: 1px solid currentColor !important;
    background-image: none !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

.rz-badge-primary {
    color: var(--rz-primary) !important;
    background-color: color-mix(in srgb, var(--rz-primary) var(--raysys-badge-bg-strength), transparent) !important;
    border-color: color-mix(in srgb, var(--rz-primary) var(--raysys-badge-border-strength), transparent) !important;
}

.rz-badge-info {
    color: var(--rz-info) !important;
    background-color: color-mix(in srgb, var(--rz-info) var(--raysys-badge-bg-strength), transparent) !important;
    border-color: color-mix(in srgb, var(--rz-info) var(--raysys-badge-border-strength), transparent) !important;
}

.rz-badge-success {
    color: var(--rz-success) !important;
    background-color: color-mix(in srgb, var(--rz-success) var(--raysys-badge-bg-strength), transparent) !important;
    border-color: color-mix(in srgb, var(--rz-success) var(--raysys-badge-border-strength), transparent) !important;
}

.rz-badge-warning {
    color: var(--rz-warning-dark, var(--rz-warning)) !important;
    background-color: color-mix(in srgb, var(--rz-warning) var(--raysys-badge-bg-strength), transparent) !important;
    border-color: color-mix(in srgb, var(--rz-warning) var(--raysys-badge-border-strength), transparent) !important;
}

.rz-badge-danger {
    color: var(--rz-danger) !important;
    background-color: color-mix(in srgb, var(--rz-danger) var(--raysys-badge-bg-strength), transparent) !important;
    border-color: color-mix(in srgb, var(--rz-danger) var(--raysys-badge-border-strength), transparent) !important;
}

.rz-badge-secondary,
.rz-badge-light,
.rz-badge-dark {
    color: var(--rz-text-color, currentColor) !important;
    background-color: color-mix(in srgb, var(--rz-text-color, currentColor) var(--raysys-badge-neutral-bg-strength), transparent) !important;
    border-color: color-mix(in srgb, var(--rz-text-color, currentColor) var(--raysys-badge-neutral-border-strength), transparent) !important;
}

.rz-dark .rz-badge-warning,
html:has(head link[href*="material-dark"]) .rz-badge-warning,
html:has(head link[href*="standard-dark"]) .rz-badge-warning,
html:has(head link[href*="dark-wcag"]) .rz-badge-warning {
    color: var(--rz-warning-light, var(--rz-warning)) !important;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e51760;
}

.validation-message {
    color: #e51760;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1zbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ========================================
   🔘 RadzenSplitButton - Bordes Redondeados y Sombra
   ======================================== */

/* Aplicar border-radius y sombra al contenedor del SplitButton */
.rz-splitbutton.rz-border-radius-10 {
    border-radius: 10px !important; /* Mismo que los demás botones */
    overflow: hidden; /* Importante para que los botones internos respeten el border-radius */
    /* Sombra fija igual a los demás botones (sin hover) */
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 
                0 1px 1px 0 rgba(0, 0, 0, 0.14), 
                0 1px 3px 0 rgba(0, 0, 0, 0.12) !important;
}

/* SIN HOVER - debe verse igual siempre como los demás botones */
.rz-splitbutton.rz-border-radius-10:hover {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 
                0 1px 1px 0 rgba(0, 0, 0, 0.14), 
                0 1px 3px 0 rgba(0, 0, 0, 0.12) !important;
    transform: none !important; /* Sin elevación */
}

/* Estado disabled igual que los demás */
.rz-splitbutton.rz-border-radius-10[disabled] {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 
                0 1px 1px 0 rgba(0, 0, 0, 0.14), 
                0 1px 3px 0 rgba(0, 0, 0, 0.12) !important;
    opacity: 0.6;
}

/* Aplicar border-radius a los botones internos */
.rz-splitbutton.rz-border-radius-10 .rz-button:first-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.rz-splitbutton.rz-border-radius-10 .rz-button:last-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Quitar el borde entre los dos botones para que se vean unidos */
.rz-splitbutton.rz-border-radius-10 .rz-button:first-child {
    border-right: none !important;
}

.rz-splitbutton.rz-border-radius-10 .rz-button:last-child {
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Asegurar que el dropdown también tenga bordes redondeados y sombra */
.rz-splitbutton.rz-border-radius-10 .rz-dropdown-menu {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 
                0 8px 16px rgba(0, 0, 0, 0.1) !important;
    margin-top: 4px;
}

/* Eliminar sombras duplicadas de Radzen */
.rz-splitbutton.rz-shadow-8 {
    box-shadow: none !important;
}

/* Items del dropdown */
.rz-splitbutton.rz-border-radius-10 .rz-dropdown-menu .rz-dropdown-item:first-child {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.rz-splitbutton.rz-border-radius-10 .rz-dropdown-menu .rz-dropdown-item:last-child {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* ========================================
   🧭 Header con Gradiente Adaptativo
   ======================================== */

/* Header con gradiente adaptativo.
   ✏️ Cambia --raysys-header-color abajo para probar colores:
      #1e3a8a = azul oscuro (actual)
      #1e40af = azul medio
      #2563eb = azul brillante
      #4f46e5 = indigo
      #7c3aed = violeta
      #0f766e = teal
      var(--rz-primary) = color del theme activo
   Light: color → claro   |   Dark: color → negro */
.rz-header.gradient-header {
    --raysys-header-color: var(--rz-primary);
    /* Oscuro donde arranca el logo y aclarando hacia la derecha: asi el logo
       se apoya sobre la parte densa de la franja y no compite con ella. */
    /* background: linear-gradient(115deg,
        color-mix(in srgb, var(--raysys-header-color) 40%, black),
        var(--raysys-header-color)) !important;*/
    background: var(--raysys-company-header-background, linear-gradient(180deg, var(--raysys-header-color), color-mix(in srgb, var(--raysys-header-color) 60%, black))) !important;
    color: var(--raysys-header-text-color, white) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.rz-dark .rz-header.gradient-header,
html:has(head link[href*="material-dark"]) .rz-header.gradient-header,
html:has(head link[href*="standard-dark"]) .rz-header.gradient-header,
html:has(head link[href*="dark-wcag"]) .rz-header.gradient-header,
html:has(head link[href*="humanistic-dark"]) .rz-header.gradient-header,
html:has(head link[href*="software-dark"]) .rz-header.gradient-header {
    background: var(--raysys-company-header-background, linear-gradient(135deg,
        color-mix(in srgb, var(--rz-sidebar-background-color, #171b22) 96%, black 4%) 0%,
        color-mix(in srgb, var(--rz-sidebar-background-color, #171b22) 90%, var(--rz-primary-dark, #1e3a8a) 10%) 100%)) !important;
}

/* Estilos para elementos del header */
.gradient-header .rz-sidebar-toggle {
    color: var(--raysys-header-text-color, white) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.gradient-header .rz-sidebar-toggle:hover,
.gradient-header .rz-sidebar-toggle:focus-visible {
    background: rgba(255,255,255,0.16) !important;
}

.gradient-header .header-logo-link {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0.2rem 0.35rem;
    border-radius: 0.65rem;
    text-decoration: none;
    transition: background-color 140ms ease, transform 140ms ease;
}

.gradient-header .header-logo-link:hover,
.gradient-header .header-logo-link:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

.gradient-header .header-logo-link:active {
    transform: translateY(1px);
}

.gradient-header .header-brand-logo {
    display: block;
    width: 112px;
    height: 30px;
    object-fit: contain;
}

.gradient-header .profile-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--raysys-header-text-color, white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.gradient-header .profile-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--raysys-header-text-color, white);
    font-weight: bold;
    font-size: 16px;
    border: 2px solid var(--raysys-header-text-color, white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.gradient-header .user-name {
    font-weight: bold;
    font-size: 14px;
    color: var(--raysys-header-text-color, white) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.gradient-header .role-badge {
    background-color: rgba(255,255,255,0.3) !important;
    color: var(--raysys-header-text-color, white) !important;
    font-size: 10px;
    border: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
}

.gradient-header .logout-button,
.gradient-header .header-appearance-toggle .rz-button,
.gradient-header .header-appearance-toggle button {
    background: rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: var(--raysys-header-text-color, white) !important;
    backdrop-filter: blur(10px);
}

.gradient-header .logout-button:hover,
.gradient-header .header-appearance-toggle .rz-button:hover,
.gradient-header .header-appearance-toggle button:hover {
    background: rgba(255,255,255,0.3) !important;
    border-color: rgba(255,255,255,0.45) !important;
    color: var(--raysys-header-text-color, white) !important;
}

.gradient-header .header-appearance-toggle .rz-icon,
.gradient-header .header-appearance-toggle .rz-button-icon-left {
    color: var(--raysys-header-text-color, white) !important;
}

/* ========================================
   🎨 Override global de color primario en modo oscuro (Radzen)
   Conserva la paleta histórica donde la compañía no ha personalizado colores.
   ======================================== */

:root { --raysys-dark-primary-default: #3b82f6; }

.rz-dark,
html:has(head link[href*="material-dark"]),
html:has(head link[href*="standard-dark"]),
html:has(head link[href*="dark-wcag"]) {
    --rz-primary: var(--raysys-palette-primary, var(--raysys-dark-primary-default)) !important;
    --rz-primary-rgb: var(--raysys-palette-primary-rgb, 59, 130, 246) !important;
    --rz-primary-light: var(--raysys-palette-primary-light, #60a5fa) !important;
    --rz-primary-dark: var(--raysys-palette-primary-dark, #2563eb) !important;
    --rz-primary-darker: var(--raysys-palette-primary-darker, #1d4ed8) !important;
    --rz-primary-lighter: var(--raysys-palette-primary-lighter, rgba(59, 130, 246, 0.18)) !important;
    --rz-on-primary: var(--raysys-palette-on-primary, #ffffff) !important;
    --rz-on-primary-light: var(--raysys-palette-on-primary-light, #ffffff) !important;
    --rz-on-primary-dark: var(--raysys-palette-on-primary-dark, #ffffff) !important;
    --rz-on-primary-darker: var(--raysys-palette-on-primary-darker, #ffffff) !important;
    --rz-on-primary-lighter: var(--raysys-palette-on-primary-lighter, #60a5fa) !important;
    --rz-info-lighter: var(--raysys-palette-info-lighter, rgba(59, 130, 246, 0.16)) !important;
    --rz-success-lighter: var(--raysys-palette-success-lighter, rgba(34, 197, 94, 0.14)) !important;
    --rz-warning-lighter: var(--raysys-palette-warning-lighter, rgba(245, 158, 11, 0.18)) !important;
    --rz-danger-lighter: var(--raysys-palette-danger-lighter, rgba(239, 68, 68, 0.16)) !important;
    --rz-info-light: var(--raysys-palette-info-light, #60a5fa) !important;
    --rz-success-light: var(--raysys-palette-success-light, #4ade80) !important;
    --rz-warning-light: var(--raysys-palette-warning-light, #fbbf24) !important;
    --rz-danger-light: var(--raysys-palette-danger-light, #f87171) !important;
}

/* ========================================
   🌙 Superficies suaves para documentos financieros
   ======================================== */

:root {
    --raysys-soft-info-bg: var(--rz-info-lighter);
    --raysys-soft-info-border: var(--rz-info-light);
    --raysys-soft-info-text: var(--rz-text-color);
    --raysys-soft-danger-bg: var(--rz-danger-lighter);
    --raysys-soft-danger-border: var(--rz-danger-light);
    --raysys-soft-danger-text: var(--rz-text-color);
    --raysys-soft-warning-bg: var(--rz-warning-lighter);
    --raysys-soft-warning-border: var(--rz-warning-light);
    --raysys-soft-warning-text: var(--rz-warning-dark);
    --raysys-muted-surface-bg: var(--rz-base-100);
    --raysys-muted-surface-border: var(--rz-border-color);
    --raysys-reference-bg: var(--rz-info-lighter);
    --raysys-reference-border: var(--rz-info-light);
    --raysys-reference-text: var(--rz-text-color);
}

.rz-dark,
html:has(head link[href*="material-dark"]),
html:has(head link[href*="standard-dark"]),
html:has(head link[href*="dark-wcag"]) {
    --raysys-soft-info-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(14, 165, 233, 0.12)) !important;
    --raysys-soft-info-border: rgba(59, 130, 246, 0.32) !important;
    --raysys-soft-info-text: var(--rz-text-color) !important;
    --raysys-soft-danger-bg: linear-gradient(135deg, rgba(220, 38, 38, 0.20), rgba(127, 29, 29, 0.14)) !important;
    --raysys-soft-danger-border: rgba(248, 113, 113, 0.30) !important;
    --raysys-soft-danger-text: var(--rz-text-color) !important;
    --raysys-soft-warning-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(120, 53, 15, 0.16)) !important;
    --raysys-soft-warning-border: rgba(251, 191, 36, 0.34) !important;
    --raysys-soft-warning-text: color-mix(in srgb, var(--rz-warning) 88%, white) !important;
    --raysys-muted-surface-bg: color-mix(in srgb, var(--rz-base-800) 72%, var(--rz-base-900)) !important;
    --raysys-muted-surface-border: color-mix(in srgb, var(--rz-border-color) 70%, transparent) !important;
    --raysys-reference-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.10)) !important;
    --raysys-reference-border: rgba(96, 165, 250, 0.30) !important;
    --raysys-reference-text: var(--rz-text-color) !important;
}

.raysys-adjustment-summary {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 0.9em;
    border: 1px solid var(--raysys-soft-info-border);
    background: var(--raysys-soft-info-bg);
    color: var(--raysys-soft-info-text);
}

.raysys-adjustment-summary.danger {
    border-color: var(--raysys-soft-danger-border);
    background: var(--raysys-soft-danger-bg);
    color: var(--raysys-soft-danger-text);
}

.raysys-adjustment-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--raysys-muted-surface-border);
    background: var(--raysys-muted-surface-bg);
}

.raysys-adjustment-reference {
    margin-top: 10px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--raysys-reference-border);
    background: var(--raysys-reference-bg);
    color: var(--raysys-reference-text);
}

.raysys-adjustment-reference-text {
    font-size: 0.9em;
    color: var(--raysys-reference-text);
}

.raysys-adjustment-comparison {
    margin-top: 6px;
    font-size: 0.78em;
    color: var(--rz-warning);
}

.raysys-adjustment-comparison.ok {
    color: var(--rz-success);
}

.raysys-muted-text {
    color: var(--rz-text-secondary-color, #666);
}

.raysys-soft-alert.rz-alert {
    border: 1px solid var(--raysys-soft-warning-border) !important;
    background: var(--raysys-soft-warning-bg) !important;
    color: var(--raysys-soft-warning-text) !important;
}

.raysys-soft-alert.rz-alert .rz-alert-message,
.raysys-soft-alert.rz-alert .rz-alert-title,
.raysys-soft-alert.rz-alert .rzi {
    color: var(--raysys-soft-warning-text) !important;
}

/* ========================================
   Input de archivos theme-aware
   ======================================== */

input[type="file"].form-control,
.raysys-file-input {
    width: 100%;
    min-height: 44px;
    padding: 8px;
    border: 1px dashed color-mix(in srgb, var(--rz-primary) 62%, var(--rz-border-color));
    border-radius: 8px;
    background: var(--rz-base-100);
    color: var(--rz-text-color);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="file"].form-control:hover,
.raysys-file-input:hover {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 7%, var(--rz-base-100));
}

input[type="file"].form-control:focus,
input[type="file"].form-control:focus-visible,
.raysys-file-input:focus,
.raysys-file-input:focus-visible {
    outline: none;
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-primary) 22%, transparent);
}

input[type="file"].form-control::file-selector-button,
.raysys-file-input::file-selector-button {
    margin-right: 12px;
    border: 1px solid var(--rz-primary);
    border-radius: 6px;
    padding: 8px 12px;
    background: var(--rz-primary);
    color: var(--rz-on-primary, #ffffff);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="file"].form-control::file-selector-button:hover,
.raysys-file-input::file-selector-button:hover {
    border-color: var(--rz-primary-dark);
    background: color-mix(in srgb, var(--rz-primary-dark) 88%, var(--rz-black, #000000));
}

.rz-dark input[type="file"].form-control,
html:has(head link[href*="material-dark"]) input[type="file"].form-control,
html:has(head link[href*="standard-dark"]) input[type="file"].form-control,
html:has(head link[href*="dark-wcag"]) input[type="file"].form-control,
.rz-dark .raysys-file-input,
html:has(head link[href*="material-dark"]) .raysys-file-input,
html:has(head link[href*="standard-dark"]) .raysys-file-input,
html:has(head link[href*="dark-wcag"]) .raysys-file-input {
    border-color: rgba(96, 165, 250, 0.34);
    background: color-mix(in srgb, var(--rz-base-800) 72%, var(--rz-base-900));
    color: var(--rz-text-color);
}

.rz-dark input[type="file"].form-control:hover,
html:has(head link[href*="material-dark"]) input[type="file"].form-control:hover,
html:has(head link[href*="standard-dark"]) input[type="file"].form-control:hover,
html:has(head link[href*="dark-wcag"]) input[type="file"].form-control:hover,
.rz-dark .raysys-file-input:hover,
html:has(head link[href*="material-dark"]) .raysys-file-input:hover,
html:has(head link[href*="standard-dark"]) .raysys-file-input:hover,
html:has(head link[href*="dark-wcag"]) .raysys-file-input:hover {
    border-color: rgba(96, 165, 250, 0.52);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(14, 165, 233, 0.05));
}

.rz-dark input[type="file"].form-control::file-selector-button,
html:has(head link[href*="material-dark"]) input[type="file"].form-control::file-selector-button,
html:has(head link[href*="standard-dark"]) input[type="file"].form-control::file-selector-button,
html:has(head link[href*="dark-wcag"]) input[type="file"].form-control::file-selector-button,
.rz-dark .raysys-file-input::file-selector-button,
html:has(head link[href*="material-dark"]) .raysys-file-input::file-selector-button,
html:has(head link[href*="standard-dark"]) .raysys-file-input::file-selector-button,
html:has(head link[href*="dark-wcag"]) .raysys-file-input::file-selector-button {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(59, 130, 246, 0.18);
    color: var(--rz-text-color);
}

.rz-dark input[type="file"].form-control::file-selector-button:hover,
html:has(head link[href*="material-dark"]) input[type="file"].form-control::file-selector-button:hover,
html:has(head link[href*="standard-dark"]) input[type="file"].form-control::file-selector-button:hover,
html:has(head link[href*="dark-wcag"]) input[type="file"].form-control::file-selector-button:hover,
.rz-dark .raysys-file-input::file-selector-button:hover,
html:has(head link[href*="material-dark"]) .raysys-file-input::file-selector-button:hover,
html:has(head link[href*="standard-dark"]) .raysys-file-input::file-selector-button:hover,
html:has(head link[href*="dark-wcag"]) .raysys-file-input::file-selector-button:hover {
    border-color: rgba(125, 181, 255, 0.62);
    background: rgba(59, 130, 246, 0.26);
}

.raysys-upload.rz-fileupload {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--rz-primary) 42%, var(--rz-border-color));
    border-radius: 8px;
    background: var(--rz-input-background-color, var(--rz-base-100));
    color: var(--rz-text-color);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.raysys-upload.rz-fileupload:hover {
    border-color: color-mix(in srgb, var(--rz-primary) 68%, var(--rz-border-color));
    background: color-mix(in srgb, var(--rz-primary) 3%, var(--rz-input-background-color, var(--rz-base-100)));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rz-primary) 12%, transparent);
}

.raysys-upload .rz-fileupload-buttonbar,
.raysys-upload .rz-fileupload-content {
    border: 0;
    background: transparent;
}

.raysys-upload .rz-fileupload-buttonbar {
    padding: 0;
    min-height: 52px;
}

.raysys-upload .rz-fileupload-content {
    color: var(--rz-text-secondary-color, var(--rz-text-color));
    padding: 0 14px 10px;
}

.raysys-upload .rz-fileupload-choose {
    width: 100%;
    min-height: 52px;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--rz-text-color);
    box-shadow: none;
    padding: 0 14px;
    text-align: left;
}

.raysys-upload .rz-fileupload-choose:hover {
    background: transparent;
    color: var(--rz-text-color);
}

.raysys-upload-card {
    border: 2px dashed color-mix(in srgb, var(--rz-primary) 70%, var(--rz-border-color));
    border-radius: 8px;
    padding: 1.5rem;
    min-height: 132px;
    text-align: center;
    background: color-mix(in srgb, var(--rz-primary) 3%, var(--rz-base-100));
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--rz-black) 12%, transparent);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.raysys-upload-card:hover {
    border-color: color-mix(in srgb, var(--rz-primary) 88%, var(--rz-border-color));
    background: color-mix(in srgb, var(--rz-primary) 5%, var(--rz-base-100));
    box-shadow: 0 5px 14px color-mix(in srgb, var(--rz-black) 18%, transparent);
}

.raysys-upload-card-icon {
    font-size: 40px;
    color: var(--rz-primary);
}

.raysys-upload-card-title {
    display: block;
    margin-top: 0.35rem;
}

.raysys-upload-card-caption {
    display: block;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.65rem;
}

.raysys-upload-card > .raysys-upload.rz-fileupload {
    position: absolute;
    width: 1px;
    height: 1px;
    left: -9999px;
    bottom: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
}

.raysys-upload-card > .raysys-upload .rz-fileupload-content {
    display: none;
}

.rz-dark .raysys-upload.rz-fileupload,
html:has(head link[href*="material-dark"]) .raysys-upload.rz-fileupload,
html:has(head link[href*="standard-dark"]) .raysys-upload.rz-fileupload,
html:has(head link[href*="dark-wcag"]) .raysys-upload.rz-fileupload {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(15, 23, 42, 0.34);
    color: var(--rz-text-color);
}

.rz-dark .raysys-upload.rz-fileupload:hover,
html:has(head link[href*="material-dark"]) .raysys-upload.rz-fileupload:hover,
html:has(head link[href*="standard-dark"]) .raysys-upload.rz-fileupload:hover,
html:has(head link[href*="dark-wcag"]) .raysys-upload.rz-fileupload:hover {
    border-color: rgba(96, 165, 250, 0.52);
    background: rgba(30, 41, 59, 0.46);
}

.rz-dark .raysys-upload .rz-fileupload-choose,
html:has(head link[href*="material-dark"]) .raysys-upload .rz-fileupload-choose,
html:has(head link[href*="standard-dark"]) .raysys-upload .rz-fileupload-choose,
html:has(head link[href*="dark-wcag"]) .raysys-upload .rz-fileupload-choose {
    border-color: transparent;
    background: transparent;
    color: var(--rz-text-color);
}

.rz-dark .raysys-upload .rz-fileupload-choose:hover,
html:has(head link[href*="material-dark"]) .raysys-upload .rz-fileupload-choose:hover,
html:has(head link[href*="standard-dark"]) .raysys-upload .rz-fileupload-choose:hover,
html:has(head link[href*="dark-wcag"]) .raysys-upload .rz-fileupload-choose:hover {
    background: transparent;
    color: var(--rz-text-color);
}

.rz-dark .raysys-upload-card,
html:has(head link[href*="material-dark"]) .raysys-upload-card,
html:has(head link[href*="standard-dark"]) .raysys-upload-card,
html:has(head link[href*="dark-wcag"]) .raysys-upload-card {
    border-color: rgba(59, 130, 246, 0.82);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.rz-dark .raysys-upload-card:hover,
html:has(head link[href*="material-dark"]) .raysys-upload-card:hover,
html:has(head link[href*="standard-dark"]) .raysys-upload-card:hover,
html:has(head link[href*="dark-wcag"]) .raysys-upload-card:hover {
    border-color: rgba(96, 165, 250, 0.96);
    background: rgba(59, 130, 246, 0.055);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26);
}

.raysys-file-viewer-surface {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--rz-border-color);
    background: var(--rz-base-100);
}

.rz-dark .raysys-file-viewer-surface,
html:has(head link[href*="material-dark"]) .raysys-file-viewer-surface,
html:has(head link[href*="standard-dark"]) .raysys-file-viewer-surface,
html:has(head link[href*="dark-wcag"]) .raysys-file-viewer-surface {
    border-color: color-mix(in srgb, var(--rz-border-color) 72%, transparent);
    background: var(--rz-base-900, #111);
}

/* ========================================
   📘 Banner de encabezado para reportes (theme-aware)
   ======================================== */

:root {
    --raysys-report-banner-bg: linear-gradient(135deg, #1f4f9d 0%, #2a78c8 100%);
    --raysys-report-banner-border: rgba(31, 79, 157, 0.58);
    --raysys-report-banner-text: var(--rz-text-color, #1f2937);
}

.gradient-header .branch-badge {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: rgba(255,255,255,0.3) !important;
    color: white !important;
    font-size: 10px;
    border: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
}

.gradient-header .operational-context-form {
    display: flex;
    max-width: min(280px, 34vw);
    margin: 0;
}

.gradient-header .operational-context-select {
    width: 100%;
    min-width: 110px;
    max-width: 280px;
    height: 20px;
    padding: 0 22px 0 7px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    outline: none;
    background: rgba(255,255,255,0.22);
    color: white;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.gradient-header .operational-context-select.rz-dropdown {
    display: flex;
    align-items: center;
    min-height: 20px;
    border-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.22) !important;
    color: white !important;
    box-shadow: none !important;
}

.gradient-header .operational-context-select .rz-dropdown-label {
    min-height: 18px;
    padding: 0 22px 0 7px;
    background: transparent !important;
    color: white !important;
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
}

.gradient-header .operational-context-select .rz-dropdown-trigger {
    width: 22px;
    color: white !important;
    background: transparent !important;
}

.gradient-header .operational-context-select.rz-dropdown:hover,
.gradient-header .operational-context-select.rz-dropdown:focus-within,
.gradient-header .operational-context-select.rz-dropdown.rz-state-focused {
    border-color: rgba(255,255,255,0.75) !important;
    background: rgba(255,255,255,0.32) !important;
    color: white !important;
    box-shadow: none !important;
}

.gradient-header .operational-context-select:hover,
.gradient-header .operational-context-select:focus-visible {
    background: rgba(255,255,255,0.32);
    border-color: rgba(255,255,255,0.75);
}

.gradient-header .operational-context-select option {
    color: var(--rz-text-color, #202020);
    background: var(--rz-base-background-color, white);
}

.rz-dark,
html:has(head link[href*="material-dark"]),
html:has(head link[href*="standard-dark"]),
html:has(head link[href*="dark-wcag"]) {
    --raysys-report-banner-bg: linear-gradient(135deg,
        rgba(24, 73, 150, 0.36) 0%,
        rgba(33, 96, 176, 0.30) 100%);
    --raysys-report-banner-border: rgba(50, 115, 210, 0.45);
    --raysys-report-banner-text: var(--rz-text-color);
}

.raysys-report-banner {
    background: var(--raysys-report-banner-bg) !important;
    border: 1px solid var(--raysys-report-banner-border);
    color: var(--raysys-report-banner-text) !important;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.raysys-report-banner,
.raysys-report-banner * {
    color: var(--raysys-report-banner-text) !important;
}

/* Reporte de facturas por periodo */
.sales-period-page-toolbar {
    margin-bottom: 12px;
}

.sales-period-filter-panel {
    border-color: color-mix(in srgb, var(--rz-border-color) 82%, transparent);
}

.sales-period-filter-panel .rz-fieldset-content {
    padding: 14px 16px 16px;
}

.sales-period-report {
    width: 100%;
}

.sales-period-report-shell {
    display: block;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 84%, transparent);
    border-radius: 8px;
    background: var(--rz-card-background-color, var(--rz-base-background-color));
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.sales-period-report-banner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--rz-primary) 28%, var(--rz-border-color));
    border-left: 4px solid var(--rz-primary);
    border-radius: 8px;
    background: color-mix(in srgb, var(--rz-primary) 8%, var(--rz-card-background-color, #fff));
    color: var(--rz-text-color);
}

.sales-period-report-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--rz-text-color);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}

.sales-period-report-title .rz-icon {
    color: var(--rz-primary);
}

.sales-period-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 10px;
    color: var(--rz-text-secondary-color, #64748b);
    font-size: 0.875rem;
}

.sales-period-report-meta strong {
    color: var(--rz-text-color);
    font-weight: 700;
}

.sales-period-report-toolbar {
    margin-bottom: 12px;
    gap: 12px;
}

.sales-period-report-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--rz-text-color);
}

.sales-period-report-grid {
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 86%, transparent);
    border-radius: 8px;
    overflow: hidden;
}

.sales-period-report-grid .rz-grid-table thead th {
    background: color-mix(in srgb, var(--rz-base-200, #f3f4f6) 74%, var(--rz-card-background-color, #fff));
    color: var(--rz-text-color);
    font-weight: 700;
}

/* Reportes operacionales compartidos */
.raysys-report-page-toolbar {
    margin-bottom: 12px;
}

.raysys-report-filter-panel {
    border-color: color-mix(in srgb, var(--rz-border-color) 82%, transparent);
}

.raysys-report-filter-panel .rz-fieldset-content {
    padding: 14px 16px 16px;
}

.raysys-report {
    width: 100%;
}

.raysys-report-shell {
    display: block;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 84%, transparent);
    border-radius: 8px;
    background: var(--rz-card-background-color, var(--rz-base-background-color));
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.raysys-report-banner {
    --raysys-report-accent: var(--rz-primary);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--raysys-report-accent) 28%, var(--rz-border-color));
    border-left: 4px solid var(--raysys-report-accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--raysys-report-accent) 8%, var(--rz-card-background-color, #fff)) !important;
    color: var(--rz-text-color);
}

.raysys-report-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--rz-text-color);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}

.raysys-report-title .rz-icon {
    color: var(--raysys-report-accent, var(--rz-primary)) !important;
}

.raysys-report-banner .sales-period-report-title .rz-icon,
.raysys-report-banner > .rz-stack:first-child .rz-icon {
    color: var(--raysys-report-accent, var(--rz-primary)) !important;
}

.raysys-report-banner.accent-slate { --raysys-report-accent: #475569; }
.raysys-report-banner.accent-blue { --raysys-report-accent: #2563eb; }
.raysys-report-banner.accent-green { --raysys-report-accent: #16a34a; }
.raysys-report-banner.accent-amber { --raysys-report-accent: #d97706; }
.raysys-report-banner.accent-violet { --raysys-report-accent: #7c3aed; }
.raysys-report-banner.accent-sky { --raysys-report-accent: #0284c7; }
.raysys-report-banner.accent-rose { --raysys-report-accent: #e11d48; }
.raysys-report-banner.accent-orange { --raysys-report-accent: #ea580c; }
.raysys-report-banner.accent-teal { --raysys-report-accent: #0f766e; }
.raysys-report-banner.accent-indigo { --raysys-report-accent: #4f46e5; }
.raysys-report-banner.accent-cyan { --raysys-report-accent: #0891b2; }
.raysys-report-banner.accent-pink { --raysys-report-accent: #db2777; }
.raysys-report-banner.accent-emerald { --raysys-report-accent: #059669; }

.raysys-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 10px;
    color: var(--rz-text-secondary-color, #64748b);
    font-size: 0.875rem;
}

.raysys-report-meta strong {
    color: var(--rz-text-color);
    font-weight: 700;
}

.raysys-report-toolbar {
    margin-bottom: 12px;
    gap: 12px;
}

.raysys-report-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--rz-text-color);
}

.raysys-report-grid {
    max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 86%, transparent);
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
}

.raysys-report-grid .rz-grid-table thead th {
    background: color-mix(in srgb, var(--rz-base-200, #f3f4f6) 74%, var(--rz-card-background-color, #fff));
    color: var(--rz-text-color);
    font-weight: 700;
}

.raysys-report-footer-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 82%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--rz-base-100, #f8fafc) 82%, var(--rz-card-background-color, #fff));
}

.raysys-report-footer-card > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.raysys-report-footer-card strong {
    color: var(--rz-text-color);
    font-size: 0.92rem;
}

.raysys-report-footer-card span {
    color: var(--rz-text-secondary-color, #64748b);
    font-size: 0.82rem;
}

.raysys-report-summary-card {
    border-radius: 8px;
    box-shadow: none;
}

.raysys-financial-report .rz-card[style*="linear-gradient"]:not(.finance-kpi-card) {
    border: 1px solid color-mix(in srgb, var(--raysys-report-accent, var(--rz-primary)) 18%, var(--rz-border-color)) !important;
    border-left: 4px solid var(--raysys-report-accent, var(--rz-primary)) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--raysys-report-accent, var(--rz-primary)) 7%, var(--rz-card-background-color, #fff)) !important;
    color: var(--rz-text-color) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07) !important;
}

.raysys-financial-report .rz-card[style*="linear-gradient"]:not(.finance-kpi-card) .rz-text-overline,
.raysys-financial-report .rz-card[style*="linear-gradient"]:not(.finance-kpi-card) .rz-text-caption {
    color: var(--rz-text-secondary-color, #64748b) !important;
}

.raysys-financial-report .rz-card[style*="linear-gradient"]:not(.finance-kpi-card) .rz-text-h3,
.raysys-financial-report .rz-card[style*="linear-gradient"]:not(.finance-kpi-card) .rz-text-h4,
.raysys-financial-report .rz-card[style*="linear-gradient"]:not(.finance-kpi-card) .rz-text-h5,
.raysys-financial-report .rz-card[style*="linear-gradient"]:not(.finance-kpi-card) .rz-text-h6 {
    color: var(--rz-text-color) !important;
}

.raysys-financial-report .finance-kpi-card {
    --finance-kpi-accent: var(--raysys-report-accent, var(--rz-primary));
    --finance-kpi-bg: color-mix(in srgb, var(--finance-kpi-accent) 7%, var(--rz-card-background-color, #fff));
    border: 1px solid color-mix(in srgb, var(--finance-kpi-accent) 22%, var(--rz-border-color)) !important;
    border-left: 4px solid var(--finance-kpi-accent) !important;
    border-radius: 8px !important;
    background: var(--finance-kpi-bg) !important;
    color: var(--rz-text-color) !important;
    min-width: max-content;
}

.raysys-financial-report .finance-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px !important;
    width: 100%;
}

.raysys-financial-report .finance-summary-grid.finance-summary-grid--two {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.raysys-financial-report .finance-summary-grid > [class*="rz-col"] {
    flex: initial !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
}

.raysys-financial-report .finance-summary-grid .finance-kpi-card {
    width: 100%;
    min-width: 0;
}

.raysys-financial-report .finance-kpi-card.kpi-primary { --finance-kpi-accent: #2563eb; }
.raysys-financial-report .finance-kpi-card.kpi-payable { --finance-kpi-accent: #7c3aed; }
.raysys-financial-report .finance-kpi-card.kpi-overdue { --finance-kpi-accent: #e11d48; }
.raysys-financial-report .finance-kpi-card.kpi-current { --finance-kpi-accent: #059669; }
.raysys-financial-report .finance-kpi-card.kpi-customers { --finance-kpi-accent: #7c3aed; }
.raysys-financial-report .finance-kpi-card.kpi-credit { --finance-kpi-accent: #0284c7; }
.raysys-financial-report .finance-kpi-card.kpi-average { --finance-kpi-accent: #d97706; }
.raysys-financial-report .finance-kpi-card.kpi-paid { --finance-kpi-accent: #16a34a; }
.raysys-financial-report .finance-kpi-card.kpi-net { --finance-kpi-accent: #475569; }
.raysys-financial-report .finance-kpi-card.kpi-warning { --finance-kpi-accent: #ea580c; }
.raysys-financial-report .finance-kpi-card.kpi-aging-0 { --finance-kpi-accent: #0f766e; }
.raysys-financial-report .finance-kpi-card.kpi-aging-30 { --finance-kpi-accent: #0284c7; }
.raysys-financial-report .finance-kpi-card.kpi-aging-60 { --finance-kpi-accent: #d97706; }
.raysys-financial-report .finance-kpi-card.kpi-aging-90 { --finance-kpi-accent: #dc2626; }

.raysys-financial-report .finance-kpi-card .rz-text-h3,
.raysys-financial-report .finance-kpi-card .rz-text-h4 {
    width: max-content;
    max-width: none;
    color: var(--rz-text-color) !important;
    font-size: clamp(1.2rem, 1.55vw, 2rem) !important;
    line-height: 1.15 !important;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.raysys-financial-report .finance-kpi-card .rz-text-overline {
    color: color-mix(in srgb, var(--finance-kpi-accent) 68%, var(--rz-text-secondary-color, #64748b)) !important;
    font-weight: 800;
}

.raysys-financial-report .finance-kpi-card .rz-text-caption {
    color: var(--rz-text-secondary-color, #64748b) !important;
}

.raysys-financial-report .finance-aging-panel {
    margin-bottom: 20px;
}

.raysys-financial-report .finance-aging-grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 28px !important;
    row-gap: 18px !important;
    align-items: stretch;
    width: 100%;
}

.raysys-financial-report .finance-aging-grid > [class*="rz-col"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content;
}

.raysys-financial-report .finance-report-filters {
    width: 100%;
}

.raysys-financial-report .finance-grid-card {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 84%, transparent);
    border-radius: 8px !important;
    background: var(--rz-card-background-color, #fff);
}

.raysys-financial-report .finance-report-actions {
    margin-top: 16px;
    flex-wrap: wrap;
}

@media (max-width: 860px) {
    .raysys-financial-report {
        overflow-x: hidden;
    }

    .raysys-financial-report .finance-kpi-card {
        min-width: 0;
    }

    .raysys-financial-report .finance-kpi-card .rz-text-h3,
    .raysys-financial-report .finance-kpi-card .rz-text-h4 {
        width: auto;
        max-width: 100%;
        font-size: clamp(1.28rem, 5.6vw, 1.9rem) !important;
    }

    .raysys-financial-report .finance-aging-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
        column-gap: 18px !important;
    }

    .raysys-financial-report .finance-aging-grid > [class*="rz-col"] {
        width: auto !important;
        min-width: 0;
    }

    .raysys-financial-report .finance-aging-grid .finance-kpi-card {
        width: 100%;
    }

    .raysys-financial-report .finance-report-filters,
    .raysys-financial-report .finance-customer-balance-filters {
        align-items: stretch !important;
        width: 100%;
    }

    .raysys-financial-report .finance-report-filters > *,
    .raysys-financial-report .finance-customer-balance-filters > * {
        flex: 1 1 220px;
        max-width: 100%;
    }

    .raysys-financial-report .finance-report-filters > .rz-inputtext,
    .raysys-financial-report .finance-report-filters > .rz-textbox,
    .raysys-financial-report .finance-report-filters > .rz-datepicker,
    .raysys-financial-report .finance-report-filters > .rz-dropdown,
    .raysys-financial-report .finance-report-filters > .rz-button,
    .raysys-financial-report .finance-customer-balance-filters > .rz-inputtext,
    .raysys-financial-report .finance-customer-balance-filters > .rz-textbox,
    .raysys-financial-report .finance-customer-balance-filters > .rz-datepicker,
    .raysys-financial-report .finance-customer-balance-filters > .rz-button {
        width: 100% !important;
    }

    .raysys-financial-report .finance-report-actions {
        align-items: stretch !important;
    }

    .raysys-financial-report .finance-report-actions .rz-button {
        flex: 1 1 180px;
    }
}

@media (max-width: 520px) {
    .raysys-report-banner {
        padding: 14px;
    }

    .raysys-report-title {
        font-size: 1.2rem;
    }

    .raysys-report-filter-panel .rz-fieldset-content {
        padding: 12px;
    }

    .raysys-financial-report .finance-summary-grid,
    .raysys-financial-report .finance-aging-grid {
        grid-template-columns: 1fr;
    }
}

.rz-dark .sales-period-report-shell,
html:has(head link[href*="material-dark"]) .sales-period-report-shell,
html:has(head link[href*="standard-dark"]) .sales-period-report-shell,
html:has(head link[href*="dark-wcag"]) .sales-period-report-shell {
    background: color-mix(in srgb, var(--rz-base-900, #111827) 92%, var(--rz-primary) 8%);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}

.rz-dark .sales-period-report-banner,
html:has(head link[href*="material-dark"]) .sales-period-report-banner,
html:has(head link[href*="standard-dark"]) .sales-period-report-banner,
html:has(head link[href*="dark-wcag"]) .sales-period-report-banner {
    background: color-mix(in srgb, var(--rz-base-800, #1f2937) 88%, var(--rz-primary) 12%);
    border-color: rgba(96, 165, 250, 0.28);
}

.rz-dark .sales-period-report-grid .rz-grid-table thead th,
html:has(head link[href*="material-dark"]) .sales-period-report-grid .rz-grid-table thead th,
html:has(head link[href*="standard-dark"]) .sales-period-report-grid .rz-grid-table thead th,
html:has(head link[href*="dark-wcag"]) .sales-period-report-grid .rz-grid-table thead th {
    background: color-mix(in srgb, var(--rz-base-800, #1f2937) 84%, var(--rz-primary) 16%);
}

.rz-dark .raysys-report-shell,
html:has(head link[href*="material-dark"]) .raysys-report-shell,
html:has(head link[href*="standard-dark"]) .raysys-report-shell,
html:has(head link[href*="dark-wcag"]) .raysys-report-shell {
    background: color-mix(in srgb, var(--rz-base-900, #111827) 92%, var(--rz-primary) 8%);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}

.rz-dark .raysys-report-banner,
html:has(head link[href*="material-dark"]) .raysys-report-banner,
html:has(head link[href*="standard-dark"]) .raysys-report-banner,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner {
    background: color-mix(in srgb, var(--rz-base-800, #1f2937) 88%, var(--raysys-report-accent) 12%) !important;
    border-color: color-mix(in srgb, var(--raysys-report-accent) 34%, rgba(148, 163, 184, 0.18));
}

.rz-dark .raysys-report-banner.accent-slate,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-slate,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-slate,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-slate { --raysys-report-accent: #94a3b8; }
.rz-dark .raysys-report-banner.accent-blue,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-blue,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-blue,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-blue { --raysys-report-accent: #60a5fa; }
.rz-dark .raysys-report-banner.accent-green,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-green,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-green,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-green { --raysys-report-accent: #22c55e; }
.rz-dark .raysys-report-banner.accent-amber,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-amber,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-amber,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-amber { --raysys-report-accent: #f59e0b; }
.rz-dark .raysys-report-banner.accent-violet,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-violet,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-violet,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-violet { --raysys-report-accent: #a78bfa; }
.rz-dark .raysys-report-banner.accent-sky,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-sky,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-sky,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-sky { --raysys-report-accent: #38bdf8; }
.rz-dark .raysys-report-banner.accent-rose,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-rose,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-rose,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-rose { --raysys-report-accent: #fb7185; }
.rz-dark .raysys-report-banner.accent-orange,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-orange,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-orange,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-orange { --raysys-report-accent: #fb923c; }
.rz-dark .raysys-report-banner.accent-teal,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-teal,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-teal,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-teal { --raysys-report-accent: #2dd4bf; }
.rz-dark .raysys-report-banner.accent-indigo,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-indigo,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-indigo,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-indigo { --raysys-report-accent: #818cf8; }
.rz-dark .raysys-report-banner.accent-cyan,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-cyan,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-cyan,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-cyan { --raysys-report-accent: #22d3ee; }
.rz-dark .raysys-report-banner.accent-pink,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-pink,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-pink,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-pink { --raysys-report-accent: #f472b6; }
.rz-dark .raysys-report-banner.accent-emerald,
html:has(head link[href*="material-dark"]) .raysys-report-banner.accent-emerald,
html:has(head link[href*="standard-dark"]) .raysys-report-banner.accent-emerald,
html:has(head link[href*="dark-wcag"]) .raysys-report-banner.accent-emerald { --raysys-report-accent: #34d399; }

.rz-dark .raysys-report-grid .rz-grid-table thead th,
html:has(head link[href*="material-dark"]) .raysys-report-grid .rz-grid-table thead th,
html:has(head link[href*="standard-dark"]) .raysys-report-grid .rz-grid-table thead th,
html:has(head link[href*="dark-wcag"]) .raysys-report-grid .rz-grid-table thead th {
    background: color-mix(in srgb, var(--rz-base-800, #1f2937) 84%, var(--rz-primary) 16%);
}

.rz-dark .raysys-report-footer-card,
html:has(head link[href*="material-dark"]) .raysys-report-footer-card,
html:has(head link[href*="standard-dark"]) .raysys-report-footer-card,
html:has(head link[href*="dark-wcag"]) .raysys-report-footer-card {
    background: color-mix(in srgb, var(--rz-base-800, #1f2937) 90%, var(--rz-primary) 10%);
    border-color: rgba(148, 163, 184, 0.18);
}

.rz-dark .raysys-report-summary-card,
html:has(head link[href*="material-dark"]) .raysys-report-summary-card,
html:has(head link[href*="standard-dark"]) .raysys-report-summary-card,
html:has(head link[href*="dark-wcag"]) .raysys-report-summary-card {
    background: color-mix(in srgb, var(--rz-base-800, #1f2937) 90%, var(--rz-primary) 10%);
    border-color: rgba(148, 163, 184, 0.18);
}

@media (max-width: 768px) {
    .sales-period-report-shell {
        padding: 12px;
    }

    .sales-period-report-banner {
        padding: 14px;
    }

    .sales-period-report-title {
        font-size: 1.15rem;
    }

    .sales-period-report-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .raysys-report-shell {
        padding: 12px;
    }

    .raysys-report-banner {
        padding: 14px;
    }

    .raysys-report-title {
        font-size: 1.15rem;
    }

    .raysys-report-toolbar,
    .raysys-report-footer-card {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

/* Caja de total factura proveedor en compra directa */
.direct-receipt-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
    gap: 12px;
    align-items: stretch;
}

.direct-receipt-top-panel {
    margin: 0;
    min-width: 0;
}

.direct-receipt-config-panel .rz-fieldset-content > .rz-stack {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.direct-receipt-config-panel .rz-fieldset-content > .rz-stack > div[style*="width:1px"] {
    display: none !important;
}

.direct-receipt-config-panel .rz-fieldset-content > .rz-stack > div[style*="border-left"] {
    margin-left: 0 !important;
    max-width: 100%;
}

.direct-receipt-config-panel .rz-label {
    white-space: normal !important;
    line-height: 1.25;
}

.direct-receipt-soft-success-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin-left: auto;
    border: 1px solid color-mix(in srgb, var(--rz-success) 45%, transparent);
    border-left-width: 3px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--rz-success) 10%, transparent);
    color: var(--rz-success);
}

.direct-receipt-soft-success-pill-text {
    color: inherit !important;
    font-size: 12px !important;
    white-space: nowrap;
}

.direct-receipt-soft-success-pill-icon {
    color: inherit;
    font-size: 14px;
    vertical-align: middle;
    margin-right: 4px;
}

.direct-receipt-soft-success-badge.rz-badge {
    color: var(--rz-success) !important;
    background: color-mix(in srgb, var(--rz-success) 11%, transparent) !important;
    border-color: color-mix(in srgb, var(--rz-success) 50%, transparent) !important;
    font-weight: 700 !important;
}

.direct-receipt-withholding-preview {
    width: min(100%, 560px);
    padding: 10px 12px;
    border: 1px solid var(--rz-border-color);
    border-left-width: 3px;
    border-left-color: var(--rz-success);
    border-radius: 7px;
    background: color-mix(in srgb, var(--rz-secondary) 6%, transparent);
    color: var(--rz-text-color);
}

.direct-receipt-withholding-preview-title {
    color: var(--rz-text-secondary-color, var(--rz-secondary)) !important;
    margin-bottom: 6px;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
}

.direct-receipt-withholding-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    padding: 4px 0;
}

.direct-receipt-withholding-preview-name {
    min-width: 0;
    color: var(--rz-text-color);
    font-size: 13px;
}

.direct-receipt-withholding-preview-name strong {
    color: var(--rz-text-color);
}

.direct-receipt-withholding-preview-note {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--rz-border-color);
}

.direct-receipt-withholding-preview-note span {
    color: var(--rz-text-secondary-color, color-mix(in srgb, var(--rz-text-color) 70%, transparent));
    font-size: 12px;
    font-style: italic;
}

.direct-receipt-withholding-preview-note .rz-icon {
    color: inherit;
    font-size: 14px;
    vertical-align: middle;
    margin-right: 4px;
}

.rz-dark .direct-receipt-soft-success-pill,
html:has(head link[href*="material-dark"]) .direct-receipt-soft-success-pill,
html:has(head link[href*="standard-dark"]) .direct-receipt-soft-success-pill,
html:has(head link[href*="dark-wcag"]) .direct-receipt-soft-success-pill {
    background: color-mix(in srgb, var(--rz-success) 13%, transparent);
    border-color: color-mix(in srgb, var(--rz-success) 58%, transparent);
}

.rz-dark .direct-receipt-soft-success-badge.rz-badge,
html:has(head link[href*="material-dark"]) .direct-receipt-soft-success-badge.rz-badge,
html:has(head link[href*="standard-dark"]) .direct-receipt-soft-success-badge.rz-badge,
html:has(head link[href*="dark-wcag"]) .direct-receipt-soft-success-badge.rz-badge {
    background: color-mix(in srgb, var(--rz-success) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--rz-success) 62%, transparent) !important;
}

.rz-dark .direct-receipt-withholding-preview,
html:has(head link[href*="material-dark"]) .direct-receipt-withholding-preview,
html:has(head link[href*="standard-dark"]) .direct-receipt-withholding-preview,
html:has(head link[href*="dark-wcag"]) .direct-receipt-withholding-preview {
    background: color-mix(in srgb, var(--rz-secondary) 8%, transparent);
    border-color: var(--rz-border-color);
    border-left-color: var(--rz-success);
}

.direct-purchase-lines-scroll {
    max-height: 438px;
    overflow: auto;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
}

.direct-purchase-lines-scroll .rz-data-grid {
    border: 0;
}

.direct-purchase-lines-scroll .rz-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--rz-grid-header-background-color, var(--rz-base-100));
}

.direct-receipt-settlement-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.55fr) minmax(320px, 0.85fr);
    gap: 12px;
    align-items: stretch;
    margin-top: 1rem;
}

.direct-receipt-settlement-grid .vendor-invoice-total-box {
    margin-top: 0 !important;
}

.direct-receipt-notes-box {
    min-width: 0;
    margin-top: 0;
}

.direct-receipt-dgii606-box {
    min-width: 0;
    margin-top: 0;
}

.direct-receipt-notes-box textarea {
    resize: vertical;
}

.direct-receipt-notes-standalone,
.direct-receipt-support-box {
    margin-top: 1rem;
}

.direct-receipt-upload-row {
    max-width: 560px;
}

.direct-receipt-upload-surface {
    min-width: 0;
}

.direct-receipt-upload-card.raysys-upload-card {
    min-height: 104px;
    padding: 1rem;
    box-shadow: none;
}

.direct-receipt-upload-card .raysys-upload-card-icon {
    font-size: 28px;
}

.direct-receipt-file-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    border: 1px solid color-mix(in srgb, var(--rz-success) 55%, var(--rz-border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--rz-success) 12%, var(--rz-base-100));
    color: var(--rz-text-color);
    padding: 10px 12px;
}

.direct-receipt-file-icon {
    color: var(--rz-success);
    font-size: 24px;
    flex: 0 0 auto;
}

.direct-receipt-file-details {
    min-width: 0;
    flex: 1 1 auto;
}

.direct-receipt-file-name {
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.direct-receipt-file-meta {
    color: var(--rz-text-secondary-color);
    font-size: 0.78rem;
    margin-top: 2px;
}

.vendor-invoice-total-box {
    background: var(--rz-base-100);
    color: var(--rz-text-color);
}

.rz-dark .vendor-invoice-total-box,
html:has(head link[href*="material-dark"]) .vendor-invoice-total-box,
html:has(head link[href*="standard-dark"]) .vendor-invoice-total-box,
html:has(head link[href*="dark-wcag"]) .vendor-invoice-total-box {
    background: var(--rz-base-900);
}

.rz-dark .direct-receipt-file-selected,
html:has(head link[href*="material-dark"]) .direct-receipt-file-selected,
html:has(head link[href*="standard-dark"]) .direct-receipt-file-selected,
html:has(head link[href*="dark-wcag"]) .direct-receipt-file-selected {
    background: color-mix(in srgb, var(--rz-success) 16%, var(--rz-base-900));
    border-color: color-mix(in srgb, var(--rz-success) 62%, var(--rz-border-color));
}

.vendor-invoice-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
    gap: 12px;
    align-items: stretch;
}

.vendor-invoice-layout:not(:has(.vendor-invoice-comparison-panel)) .vendor-invoice-entry-panel {
    grid-column: 1 / -1;
}

.vendor-invoice-entry-panel,
.vendor-invoice-comparison-panel {
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--rz-base-100) 92%, var(--rz-primary) 8%);
    padding: 12px;
    min-width: 0;
}

.vendor-invoice-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.vendor-invoice-panel-title {
    color: var(--rz-text-color);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.vendor-invoice-panel-caption,
.vendor-invoice-help,
.vendor-invoice-metric span,
.vendor-invoice-metric small,
.vendor-invoice-comparison-message {
    color: var(--rz-text-secondary-color);
}

.vendor-invoice-panel-caption {
    font-size: 0.74rem;
    line-height: 1.25;
    margin-top: 2px;
}

.vendor-invoice-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 12px;
}

.vendor-invoice-field {
    min-width: 0;
}

.vendor-invoice-help {
    font-size: 0.72rem;
    line-height: 1.2;
    margin-top: 4px;
}

.vendor-invoice-empty-tax {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border: 1px dashed var(--rz-border-color);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--rz-text-secondary-color);
    font-size: 0.78rem;
}

.vendor-invoice-balance-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.vendor-invoice-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.vendor-invoice-comparison-panel {
    --vendor-invoice-accent: var(--rz-info);
    --vendor-invoice-status-bg: color-mix(in srgb, var(--rz-info) 12%, var(--rz-base-100));
    background: var(--vendor-invoice-status-bg);
    border-left: 4px solid var(--vendor-invoice-accent);
}

.vendor-invoice-comparison-panel.is-ok {
    --vendor-invoice-accent: var(--rz-success);
    --vendor-invoice-status-bg: color-mix(in srgb, var(--rz-success) 14%, var(--rz-base-100));
}

.vendor-invoice-comparison-panel.is-info {
    --vendor-invoice-accent: var(--rz-info);
    --vendor-invoice-status-bg: color-mix(in srgb, var(--rz-info) 13%, var(--rz-base-100));
}

.vendor-invoice-comparison-panel.is-warning {
    --vendor-invoice-accent: var(--rz-warning);
    --vendor-invoice-status-bg: color-mix(in srgb, var(--rz-warning) 18%, var(--rz-base-100));
}

.vendor-invoice-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vendor-invoice-metric {
    min-width: 0;
}

.vendor-invoice-metric span,
.vendor-invoice-metric small {
    display: block;
    overflow-wrap: anywhere;
}

.vendor-invoice-metric span {
    font-size: 0.72rem;
    line-height: 1.2;
    margin-bottom: 3px;
}

.vendor-invoice-metric strong {
    display: block;
    color: var(--rz-text-color);
    font-size: 0.95rem;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vendor-invoice-metric small {
    font-size: 0.68rem;
    line-height: 1.25;
    margin-top: 4px;
}

.vendor-invoice-primary-amount {
    color: var(--rz-primary) !important;
}

.vendor-invoice-difference-amount {
    color: var(--vendor-invoice-accent) !important;
}

.vendor-invoice-comparison-message {
    border-top: 1px solid color-mix(in srgb, var(--vendor-invoice-accent) 28%, transparent);
    font-size: 0.72rem;
    font-style: italic;
    line-height: 1.35;
    margin-top: 10px;
    padding-top: 8px;
}

.rz-dark .vendor-invoice-entry-panel,
.rz-dark .vendor-invoice-comparison-panel,
html:has(head link[href*="material-dark"]) .vendor-invoice-entry-panel,
html:has(head link[href*="material-dark"]) .vendor-invoice-comparison-panel,
html:has(head link[href*="standard-dark"]) .vendor-invoice-entry-panel,
html:has(head link[href*="standard-dark"]) .vendor-invoice-comparison-panel,
html:has(head link[href*="dark-wcag"]) .vendor-invoice-entry-panel,
html:has(head link[href*="dark-wcag"]) .vendor-invoice-comparison-panel {
    background: color-mix(in srgb, var(--rz-base-900) 92%, var(--rz-primary) 8%);
}

.rz-dark .vendor-invoice-comparison-panel.is-ok,
html:has(head link[href*="material-dark"]) .vendor-invoice-comparison-panel.is-ok,
html:has(head link[href*="standard-dark"]) .vendor-invoice-comparison-panel.is-ok,
html:has(head link[href*="dark-wcag"]) .vendor-invoice-comparison-panel.is-ok {
    --vendor-invoice-status-bg: color-mix(in srgb, var(--rz-success) 18%, var(--rz-base-900));
    background: var(--vendor-invoice-status-bg);
}

.rz-dark .vendor-invoice-comparison-panel.is-info,
html:has(head link[href*="material-dark"]) .vendor-invoice-comparison-panel.is-info,
html:has(head link[href*="standard-dark"]) .vendor-invoice-comparison-panel.is-info,
html:has(head link[href*="dark-wcag"]) .vendor-invoice-comparison-panel.is-info {
    --vendor-invoice-status-bg: color-mix(in srgb, var(--rz-info) 18%, var(--rz-base-900));
    background: var(--vendor-invoice-status-bg);
}

.rz-dark .vendor-invoice-comparison-panel.is-warning,
html:has(head link[href*="material-dark"]) .vendor-invoice-comparison-panel.is-warning,
html:has(head link[href*="standard-dark"]) .vendor-invoice-comparison-panel.is-warning,
html:has(head link[href*="dark-wcag"]) .vendor-invoice-comparison-panel.is-warning {
    --vendor-invoice-status-bg: color-mix(in srgb, var(--rz-warning) 22%, var(--rz-base-900));
    background: var(--vendor-invoice-status-bg);
}

@media (max-width: 1200px) {
    .direct-receipt-top-grid,
    .direct-receipt-settlement-grid,
    .direct-receipt-upload-row {
        grid-template-columns: 1fr;
    }

    .vendor-invoice-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vendor-invoice-panel-header {
        flex-direction: column;
    }

    .vendor-invoice-balance-button {
        width: 100%;
    }

    .vendor-invoice-header-actions {
        width: 100%;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
    }

    .vendor-invoice-metrics {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Reportes de Inventario - menu limpio
   ======================================== */

.inventory-reports-menu {
    --inventory-menu-bg: var(--rz-card-background-color, #ffffff);
    --inventory-menu-border: var(--rz-border-color, #d8dee8);
    --inventory-menu-card-bg: #ffffff;
    --inventory-menu-card-hover-bg: color-mix(in srgb, var(--rz-primary) 4%, #ffffff);
    --inventory-menu-text: var(--rz-text-color, #1f2937);
    --inventory-menu-muted: var(--rz-text-secondary-color, #667085);
    --inventory-menu-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    --inventory-menu-hover-shadow: 0 10px 22px rgba(16, 24, 40, 0.10);
    background: var(--inventory-menu-bg);
    border: 1px solid var(--inventory-menu-border);
    border-radius: 8px;
    padding: 18px;
}

.inventory-reports-menu__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 16px;
}

.inventory-reports-menu__title {
    margin: 0 0 4px;
    color: var(--inventory-menu-text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.inventory-reports-menu__subtitle {
    color: var(--inventory-menu-muted);
    font-size: 0.875rem;
}

.inventory-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.inventory-report-card {
    --report-accent: var(--rz-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 132px;
    padding: 14px 14px 12px;
    overflow: hidden;
    background: var(--inventory-menu-card-bg);
    border: 1px solid var(--inventory-menu-border);
    border-radius: 8px;
    box-shadow: var(--inventory-menu-shadow);
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.inventory-report-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--report-accent);
}

.inventory-report-card:hover {
    background: var(--inventory-menu-card-hover-bg);
    border-color: color-mix(in srgb, var(--report-accent) 45%, var(--inventory-menu-border));
    box-shadow: var(--inventory-menu-hover-shadow);
    transform: translateY(-1px);
}

.inventory-report-card__content {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.inventory-report-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: var(--report-accent);
    background: color-mix(in srgb, var(--report-accent) 12%, transparent);
}

.inventory-report-card__icon .rzi {
    font-size: 24px;
}

.inventory-report-card__copy {
    min-width: 0;
    text-align: left;
}

.inventory-report-card__title {
    margin: 1px 0 4px;
    color: var(--inventory-menu-text);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.25;
}

.inventory-report-card__description {
    color: var(--inventory-menu-muted);
    font-size: 0.79rem;
    font-weight: 500;
    line-height: 1.35;
}

.inventory-reports-menu .inventory-report-card__action.rz-button {
    width: 100%;
    min-height: 32px;
    margin-top: 14px;
    border-color: color-mix(in srgb, var(--report-accent) 48%, var(--inventory-menu-border)) !important;
    color: var(--report-accent) !important;
    background: transparent !important;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

.inventory-reports-menu .inventory-report-card__action.rz-button:hover,
.inventory-reports-menu .inventory-report-card__action.rz-button:focus-visible {
    border-color: var(--report-accent) !important;
    color: var(--report-accent) !important;
    background: color-mix(in srgb, var(--report-accent) 10%, transparent) !important;
}

.inventory-report-card.accent-slate { --report-accent: #475569; }
.inventory-report-card.accent-blue { --report-accent: #2563eb; }
.inventory-report-card.accent-green { --report-accent: #16a34a; }
.inventory-report-card.accent-amber { --report-accent: #d97706; }
.inventory-report-card.accent-violet { --report-accent: #7c3aed; }
.inventory-report-card.accent-sky { --report-accent: #0284c7; }
.inventory-report-card.accent-rose { --report-accent: #e11d48; }
.inventory-report-card.accent-orange { --report-accent: #ea580c; }
.inventory-report-card.accent-teal { --report-accent: #0f766e; }
.inventory-report-card.accent-indigo { --report-accent: #4f46e5; }
.inventory-report-card.accent-cyan { --report-accent: #0891b2; }
.inventory-report-card.accent-pink { --report-accent: #db2777; }
.inventory-report-card.accent-emerald { --report-accent: #059669; }

.rz-dark .inventory-reports-menu,
html:has(head link[href*="material-dark"]) .inventory-reports-menu,
html:has(head link[href*="standard-dark"]) .inventory-reports-menu,
html:has(head link[href*="dark-wcag"]) .inventory-reports-menu {
    --inventory-menu-bg: color-mix(in srgb, var(--rz-base-900, #111827) 92%, #ffffff);
    --inventory-menu-border: rgba(148, 163, 184, 0.18);
    --inventory-menu-card-bg: color-mix(in srgb, var(--rz-base-800, #172033) 88%, #0f172a);
    --inventory-menu-card-hover-bg: color-mix(in srgb, var(--rz-base-700, #243044) 88%, var(--report-accent));
    --inventory-menu-text: #e5e7eb;
    --inventory-menu-muted: #9ca3af;
    --inventory-menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    --inventory-menu-hover-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
}

.rz-dark .inventory-report-card__icon,
html:has(head link[href*="material-dark"]) .inventory-report-card__icon,
html:has(head link[href*="standard-dark"]) .inventory-report-card__icon,
html:has(head link[href*="dark-wcag"]) .inventory-report-card__icon {
    background: color-mix(in srgb, var(--report-accent) 18%, transparent);
}

.rz-dark .inventory-report-card.accent-slate,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-slate,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-slate,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-slate { --report-accent: #94a3b8; }
.rz-dark .inventory-report-card.accent-blue,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-blue,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-blue,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-blue { --report-accent: #60a5fa; }
.rz-dark .inventory-report-card.accent-green,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-green,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-green,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-green { --report-accent: #22c55e; }
.rz-dark .inventory-report-card.accent-amber,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-amber,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-amber,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-amber { --report-accent: #f59e0b; }
.rz-dark .inventory-report-card.accent-violet,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-violet,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-violet,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-violet { --report-accent: #a78bfa; }
.rz-dark .inventory-report-card.accent-sky,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-sky,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-sky,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-sky { --report-accent: #38bdf8; }
.rz-dark .inventory-report-card.accent-rose,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-rose,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-rose,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-rose { --report-accent: #fb7185; }
.rz-dark .inventory-report-card.accent-orange,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-orange,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-orange,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-orange { --report-accent: #fb923c; }
.rz-dark .inventory-report-card.accent-teal,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-teal,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-teal,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-teal { --report-accent: #2dd4bf; }
.rz-dark .inventory-report-card.accent-indigo,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-indigo,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-indigo,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-indigo { --report-accent: #818cf8; }
.rz-dark .inventory-report-card.accent-cyan,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-cyan,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-cyan,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-cyan { --report-accent: #22d3ee; }
.rz-dark .inventory-report-card.accent-pink,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-pink,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-pink,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-pink { --report-accent: #f472b6; }
.rz-dark .inventory-report-card.accent-emerald,
html:has(head link[href*="material-dark"]) .inventory-report-card.accent-emerald,
html:has(head link[href*="standard-dark"]) .inventory-report-card.accent-emerald,
html:has(head link[href*="dark-wcag"]) .inventory-report-card.accent-emerald { --report-accent: #34d399; }

@media (max-width: 640px) {
    .inventory-reports-menu {
        padding: 14px;
    }

    .inventory-report-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Gradientes legibles en reportes (modo oscuro)
   ======================================== */

.rz-dark .financial-reports-menu .rz-card[style*="linear-gradient"],
.rz-dark .sales-reports-menu .rz-card[style*="linear-gradient"],
.rz-dark .inventory-reports-menu .rz-card[style*="linear-gradient"],
.rz-dark .rz-main .rz-card[style*="linear-gradient"],
html:has(head link[href*="material-dark"]) .financial-reports-menu .rz-card[style*="linear-gradient"],
html:has(head link[href*="material-dark"]) .sales-reports-menu .rz-card[style*="linear-gradient"],
html:has(head link[href*="material-dark"]) .inventory-reports-menu .rz-card[style*="linear-gradient"],
html:has(head link[href*="material-dark"]) .rz-main .rz-card[style*="linear-gradient"],
html:has(head link[href*="standard-dark"]) .financial-reports-menu .rz-card[style*="linear-gradient"],
html:has(head link[href*="standard-dark"]) .sales-reports-menu .rz-card[style*="linear-gradient"],
html:has(head link[href*="standard-dark"]) .inventory-reports-menu .rz-card[style*="linear-gradient"],
html:has(head link[href*="standard-dark"]) .rz-main .rz-card[style*="linear-gradient"],
html:has(head link[href*="dark-wcag"]) .financial-reports-menu .rz-card[style*="linear-gradient"],
html:has(head link[href*="dark-wcag"]) .sales-reports-menu .rz-card[style*="linear-gradient"],
html:has(head link[href*="dark-wcag"]) .inventory-reports-menu .rz-card[style*="linear-gradient"],
html:has(head link[href*="dark-wcag"]) .rz-main .rz-card[style*="linear-gradient"],
.rz-dark .invoice-payments-by-customer-report .rz-card[style*="linear-gradient"],
html:has(head link[href*="material-dark"]) .invoice-payments-by-customer-report .rz-card[style*="linear-gradient"],
html:has(head link[href*="standard-dark"]) .invoice-payments-by-customer-report .rz-card[style*="linear-gradient"],
html:has(head link[href*="dark-wcag"]) .invoice-payments-by-customer-report .rz-card[style*="linear-gradient"],
.rz-dark .payments-by-customer-report .rz-card[style*="linear-gradient"],
html:has(head link[href*="material-dark"]) .payments-by-customer-report .rz-card[style*="linear-gradient"],
html:has(head link[href*="standard-dark"]) .payments-by-customer-report .rz-card[style*="linear-gradient"],
html:has(head link[href*="dark-wcag"]) .payments-by-customer-report .rz-card[style*="linear-gradient"] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--rz-primary) 28%, var(--rz-base-900)) 0%,
        color-mix(in srgb, var(--rz-info) 20%, var(--rz-base-900)) 100%) !important;
    color: var(--rz-text-color) !important;
    border: 1px solid color-mix(in srgb, var(--rz-primary) 30%, transparent) !important;
}

.rz-dark .financial-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
.rz-dark .sales-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
.rz-dark .inventory-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
.rz-dark .rz-main .rz-card[style*="linear-gradient"] .rz-text,
.rz-dark .rz-main .rz-card[style*="linear-gradient"] .rzi,
.rz-dark .invoice-payments-by-customer-report .rz-card[style*="linear-gradient"] .rz-text,
.rz-dark .payments-by-customer-report .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="material-dark"]) .financial-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="material-dark"]) .sales-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="material-dark"]) .inventory-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="material-dark"]) .rz-main .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="material-dark"]) .rz-main .rz-card[style*="linear-gradient"] .rzi,
html:has(head link[href*="material-dark"]) .invoice-payments-by-customer-report .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="material-dark"]) .payments-by-customer-report .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="standard-dark"]) .financial-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="standard-dark"]) .sales-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="standard-dark"]) .inventory-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="standard-dark"]) .rz-main .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="standard-dark"]) .rz-main .rz-card[style*="linear-gradient"] .rzi,
html:has(head link[href*="standard-dark"]) .invoice-payments-by-customer-report .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="standard-dark"]) .payments-by-customer-report .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="dark-wcag"]) .financial-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="dark-wcag"]) .sales-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="dark-wcag"]) .inventory-reports-menu .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="dark-wcag"]) .rz-main .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="dark-wcag"]) .rz-main .rz-card[style*="linear-gradient"] .rzi,
html:has(head link[href*="dark-wcag"]) .invoice-payments-by-customer-report .rz-card[style*="linear-gradient"] .rz-text,
html:has(head link[href*="dark-wcag"]) .payments-by-customer-report .rz-card[style*="linear-gradient"] .rz-text {
    color: var(--rz-text-color) !important;
}

/* ========================================
   🍽️ Restaurant - Estaciones de Preparación (theme-aware)
   ======================================== */

.stations-page {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.stations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.stations-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.stations-loading,
.stations-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 4rem 1rem;
    color: var(--rz-text-disabled-color);
}

.stations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.station-card {
    --station-accent: var(--rz-primary);
    background: var(--rz-card-background-color, var(--rz-base-100));
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease;
    overflow: hidden;
}

.station-card:hover {
    box-shadow: var(--rz-card-shadow);
}

.station-card--inactive {
    opacity: .7;
}

.station-card__header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--rz-border-color);
    border-left: 4px solid var(--station-accent);
}

.station-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: color-mix(in srgb, var(--station-accent) 18%, transparent);
    color: var(--station-accent);
    flex-shrink: 0;
}

.station-card__title {
    flex: 1;
    min-width: 0;
}

.station-card__name {
    font-weight: 700;
    font-size: .95rem;
    display: block;
}

.station-card__type {
    font-size: .75rem;
    color: var(--rz-text-secondary-color);
}

.station-card__badges {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.station-card__body {
    padding: .75rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.station-card__section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
}

.station-card__label {
    color: var(--rz-text-secondary-color);
    display: flex;
    align-items: center;
    gap: .25rem;
}

.station-card__value {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.station-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .25rem;
}

.station-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: 999px;
    padding: .18rem .55rem;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-primary);
}

.station-chip .rz-icon {
    font-size: .85rem;
}

.station-chip--neutral {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--rz-text-secondary-color) 22%, transparent);
    color: var(--rz-text-color);
}

.station-chip--primary {
    background: color-mix(in srgb, var(--rz-primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--rz-primary) 35%, transparent);
    color: var(--rz-primary);
}

.station-chip--info {
    background: color-mix(in srgb, var(--rz-info) 18%, transparent);
    border-color: color-mix(in srgb, var(--rz-info) 38%, transparent);
    color: var(--rz-info);
}

.station-chip--success {
    background: color-mix(in srgb, var(--rz-success) 18%, transparent);
    border-color: color-mix(in srgb, var(--rz-success) 38%, transparent);
    color: var(--rz-success);
}

.station-chip--warning {
    background: color-mix(in srgb, var(--rz-warning) 18%, transparent);
    border-color: color-mix(in srgb, var(--rz-warning) 40%, transparent);
    color: var(--rz-warning);
}

.station-state-icon {
    font-size: 1rem;
}

.station-state-icon--ok {
    color: var(--rz-success);
}

.station-state-icon--off {
    color: var(--rz-danger);
}

.station-time-dot {
    width: .62rem;
    height: .62rem;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent);
}

.station-time-dot--alert {
    background: var(--rz-warning);
    color: var(--rz-warning);
}

.station-time-dot--critical {
    background: var(--rz-danger);
    color: var(--rz-danger);
}

.station-time-separator {
    color: var(--rz-text-secondary-color);
}

.station-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem .75rem;
    border-top: 1px solid var(--rz-border-color);
}

.stations-pager {
    margin-top: 1rem;
    padding: .75rem 0;
}

/* --------------------------------------------------------------------------
   Loader global de RadzenDataGrid

   Radzen 11.1.9 renderiza IsLoading con .rz-datatable-loading y un
   .rzi-circle-o-notch. El selector queda deliberadamente limitado al grid
   para no reemplazar otros iconos o indicadores internos de Radzen.

   El simbolo va incrustado como data-URI mas abajo. Si cambia la geometria del
   logo hay que regenerarlo: sale del mismo trazado que usa
   RaySysBrandAnimated, descrito en Docs/Brand/RaySys/README.md.
   -------------------------------------------------------------------------- */
.rz-datatable-loading {
    background-color: color-mix(
        in srgb,
        var(--rz-base-background-color, #ffffff) 82%,
        transparent
    );
    opacity: 1;
    backdrop-filter: blur(1px);
}

.rz-datatable-loading-content {
    width: 4.75rem;
    height: 4.75rem;
    display: grid;
    place-items: center;
    color: transparent;
    pointer-events: none;
}

.rz-datatable-loading-content .rzi-circle-o-notch {
    position: relative;
    width: 4.75rem;
    height: 4.75rem;
    display: block;
    font-size: 0;
    color: transparent;
    /* El simbolo va como SVG incrustado: 894 bytes frente a los 191 KB del PNG
       que habia aqui, y ademas lleva dentro el trazo que recorre el contorno.
       Tiene que ir dentro del archivo porque el CSS de la pagina no alcanza el
       contenido de un background-image. */
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2227%2026%20734%20722%22%3E%3Cstyle%3E.t%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A30%3Bstroke-linecap%3Around%3Bstroke-dasharray%3A11%2089%3Bfilter%3Adrop-shadow%280%200%205px%20rgba%2856%2C189%2C248%2C.95%29%29%20drop-shadow%280%200%2018px%20rgba%2856%2C189%2C248%2C.95%29%29%3Banimation%3Ac%201.5s%20linear%20infinite%7D%40keyframes%20c%7Bto%7Bstroke-dashoffset%3A-100%7D%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%231E293B%22%20d%3D%22M%2065%2056%20L%20460%2056%20A%20209%20217%200%200%201%20460%20490%20L%20433%20376%20A%2091%2093%200%200%200%20433%20190%20L%20196%20190%20Z%22%2F%3E%3Cpath%20fill%3D%22%231E293B%22%20d%3D%22M%20126%20499%20L%20126%20718%20L%2057%20718%20L%2057%20554%20Z%22%2F%3E%3Cpath%20fill%3D%22%2364748B%22%20d%3D%22M%20253%20393%20L%20253%20718%20L%20175%20718%20L%20175%20454%20Z%22%2F%3E%3Cpath%20fill%3D%22%231D4ED8%22%20d%3D%22M%20307%20484%20L%20378%20556%20L%20378%20718%20L%20307%20718%20Z%22%2F%3E%3Cpath%20fill%3D%22%232563EB%22%20d%3D%22M%20273%20376%20L%20433%20376%20L%20731%20718%20L%20571%20718%20Z%22%2F%3E%3Cpath%20class%3D%22t%22%20pathLength%3D%22100%22%20d%3D%22M%2065%2056%20L%20460%2056%20A%20209%20217%200%200%201%20460%20490%20L%20433%20376%20A%2091%2093%200%200%200%20433%20190%20L%20196%20190%20Z%20M%20273%20376%20L%20433%20376%20L%20731%20718%20L%20571%20718%20Z%20M%20307%20484%20L%20378%20556%20L%20378%20718%20L%20307%20718%20Z%20M%20253%20393%20L%20253%20718%20L%20175%20718%20L%20175%20454%20Z%20M%20126%20499%20L%20126%20718%20L%2057%20718%20L%2057%20554%20Z%22%2F%3E%3C%2Fsvg%3E") center / 78% 78% no-repeat;
    filter: drop-shadow(0 .35rem .65rem rgba(30, 41, 59, .18));
    animation: raysys-grid-mark-breathe 1.8s ease-in-out infinite;
}

.rz-datatable-loading-content .rzi-circle-o-notch::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 4px solid rgba(37, 99, 235, .13);
    border-top-color: #2563eb;
    border-right-color: rgba(37, 99, 235, .55);
    border-radius: 50%;
    animation: raysys-grid-orbit-spin 1.15s linear infinite;
}

.rz-datatable-loading-content .rzi-circle-o-notch::after {
    content: "";
    position: absolute;
    inset: .55rem;
    border: 1px solid rgba(100, 116, 139, .2);
    border-radius: 50%;
}

@keyframes raysys-grid-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes raysys-grid-mark-breathe {
    0%, 100% {
        transform: scale(.96);
        opacity: .88;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .rz-datatable-loading-content,
    .rz-datatable-loading-content .rzi-circle-o-notch {
        width: 4rem;
        height: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rz-datatable-loading-content .rzi-circle-o-notch,
    .rz-datatable-loading-content .rzi-circle-o-notch::before {
        animation: none;
    }
}

/* ===== Reveal animado del logotipo RaySys ===== */
/* ============================================================
   Reveal animado del logotipo RaySys
   Ciclo unico de 20 s en bucle infinito. Cada pieza se traza como una silueta
   y luego se rellena; el wordmark tambien, letra a letra:
     fase 1  0.15 s  se traza la silueta de la R
     fase 2  1.25 s  se escriben Ray y Sys, contorno a contorno
     fase 3  2.95 s  se dibujan el trazo azul y las tres barras
     fase 4  4.25 s  bump final
     reposo  5.05 s  el logo se mantiene hasta el fundido de cierre
   Sobre cada trazo corre una cometa que marca la punta de escritura.
   Todas las animaciones duran 20 s con delay 0: el momento de cada fase vive
   en los porcentajes de los keyframes, nunca en animation-delay. Es la unica
   forma de que todas reinicien en el mismo instante y el bucle no se desfase.
   Equivalencia: 1 s = 5%.
   Geometria del simbolo medida pixel a pixel sobre exports/raysys-mark.png.
   Letras: contornos reales de Roboto Regular encajados en la caja medida en
   exports/raysys-wordmark-dark.png. No depende de ninguna fuente cargada.
   ============================================================ */
.rsa {
    --rsa-ink: #1E293B;
    --rsa-blue: #2563EB;
    --rsa-slate: #64748B;
    --rsa-deep: #1D4ED8;
    --rsa-bar-a: #1E293B;
    --rsa-spark: #2563EB;
    --rsa-spark-glow: rgba(37, 99, 235, .55);
    /* El trazo de carga va blanco: el azul se confundia con la pierna del
       simbolo. El destello lo hace visible tambien donde el trazo se sale de
       la figura y cae sobre fondo claro. */
    --rsa-trace: #FFFFFF;
    --rsa-trace-glow: rgba(56, 189, 248, .95);
    display: block;
}

:where(html:has(link[href*="material-dark"])) .rsa {
    --rsa-ink: #F8FAFC;
    --rsa-slate: #94A3B8;
    --rsa-deep: #2F63E4;
    --rsa-bar-a: rgba(248, 250, 252, .7);
    --rsa-spark: #93C5FD;
    --rsa-spark-glow: rgba(147, 197, 253, .55);
}

/* Cabeceras con franja de color. Los colores son los del arte para fondo
   oscuro, muestreados de exports/raysys-wordmark-light.png: blanco #FCFCFC,
   azul de marca #1860E4 y slate claro #B4C0D8. El azul NO se aclara: la
   identidad manda.
   Para que no se confunda con el degradado, el logo se despega en relieve, no
   cambiando de color. El filtro son cuatro sombras encadenadas: dos claras sin
   desplazamiento hacen de bordeado y separan la silueta del fondo, y dos
   oscuras hacia abajo dan el contacto y la elevacion.
   Va despues del bloque de tema oscuro y con la misma especificidad, asi que
   gana por orden. Por eso aquel selector lleva :where(). */
.rsa--on-dark {
    --rsa-ink: #FFFFFF;
    --rsa-blue: #2563EB;
    --rsa-slate: #B4C0D8;
    --rsa-deep: #1D4ED8;
    --rsa-bar-a: rgba(255, 255, 255, .75);
    --rsa-spark: #FFFFFF;
    --rsa-spark-glow: rgba(255, 255, 255, .65);
    filter: drop-shadow(0 0 .75px rgba(255, 255, 255, .55))
            drop-shadow(0 0 2px rgba(255, 255, 255, .22))
            drop-shadow(0 1px 0 rgba(2, 6, 23, .3))
            drop-shadow(0 3px 5px rgba(2, 6, 23, .34));
    /* En cabecera el logo suele ir dentro del enlace de inicio: dejar pasar el
       puntero mantiene clicable todo el rectangulo, no solo la tinta. */
    pointer-events: none;
}

.rsa-logo {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: rsa-bump 20s linear infinite,
               rsa-cycle 20s linear infinite;
}

.rsa-shape {
    fill-opacity: 0;
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.rsa-r-body { fill: var(--rsa-ink); stroke: var(--rsa-ink); animation-name: rsa-r-body; }
.rsa-bar-a { fill: var(--rsa-bar-a); stroke: var(--rsa-bar-a); animation-name: rsa-bar-a; }
.rsa-bar-b { fill: var(--rsa-slate); stroke: var(--rsa-slate); animation-name: rsa-bar-b; }
.rsa-bar-c { fill: var(--rsa-deep); stroke: var(--rsa-deep); animation-name: rsa-bar-c; }
.rsa-leg { fill: var(--rsa-blue); stroke: var(--rsa-blue); animation-name: rsa-leg; }
.rsa-word-a { fill: var(--rsa-ink); stroke: var(--rsa-ink); animation-name: rsa-word-a; stroke-width: 3.4; }
.rsa-word-b { fill: var(--rsa-blue); stroke: var(--rsa-blue); animation-name: rsa-word-b; stroke-width: 3.4; }

/* La punta de escritura. Recorre exactamente el mismo trazado que se esta
   dibujando: offset-distance avanza de 0% a 100% en la misma ventana y con la
   misma curva que el stroke-dashoffset, asi que la cometa cae siempre sobre el
   punto que en ese momento se traza. transform-box fill-box hace que el
   100% 50% de offset-anchor sea la punta delantera de la cometa. */
.rsa-spark {
    opacity: 0;
    offset-rotate: auto;
    offset-anchor: 100% 50%;
    transform-box: fill-box;
    filter: drop-shadow(0 0 30px var(--rsa-spark-glow));
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.45,.05,.2,1);
}
.rsa-spark-r-body { offset-path: path("M 65 56 L 460 56 A 209 217 0 0 1 460 490 L 433 376 A 91 93 0 0 0 433 190 L 196 190 Z"); animation-name: rsa-spark-r-body; }
.rsa-spark-bar-a { offset-path: path("M 126 499 L 126 718 L 57 718 L 57 554 Z"); animation-name: rsa-spark-bar-a; }
.rsa-spark-bar-b { offset-path: path("M 253 393 L 253 718 L 175 718 L 175 454 Z"); animation-name: rsa-spark-bar-b; }
.rsa-spark-bar-c { offset-path: path("M 307 484 L 378 556 L 378 718 L 307 718 Z"); animation-name: rsa-spark-bar-c; }
.rsa-spark-leg { offset-path: path("M 273 376 L 433 376 L 731 718 L 571 718 Z"); animation-name: rsa-spark-leg; }
.rsa-spark-word-a { offset-path: path("M 951.6,241.62 L 951.6,391.22 1035.94,391.22 C 1066.23,391.22 1088.04,385.07 1101.37,372.78 1114.7,360.48 1121.37,341.74 1121.37,316.56 1121.37,292.74 1114.88,274.3 1101.91,261.22 1088.94,248.15 1068.77,241.62 1041.38,241.62 L 951.6,241.62 Z M 898,196.5 L 1041.38,196.5 C 1084.73,196.5 1117.83,206.78 1140.68,227.35 1163.54,247.92 1174.96,277.8 1174.96,317 1174.96,338.73 1169.66,357.65 1159.05,373.76 1148.44,389.86 1132.97,402.67 1112.66,412.18 1134.42,419.75 1150.07,432.02 1159.59,449 1169.11,465.98 1173.87,486.98 1173.87,512.01 L 1173.87,551.89 C 1173.87,565.09 1175.23,576.92 1177.96,587.4 1180.68,597.88 1185.39,606.42 1192.1,613.01 L 1192.1,620 1136.87,620 C 1129.8,613.4 1125.27,603.7 1123.27,590.89 1121.28,578.09 1120.28,564.89 1120.28,551.31 L 1120.28,512.6 C 1120.28,489.7 1114.02,471.27 1101.5,457.29 1088.99,443.32 1072.21,436.34 1051.17,436.34 L 951.6,436.34 951.6,620 898,620 898,196.5 Z M 1371.94,474.18 C 1350.35,474.18 1333.08,479.98 1320.11,491.59 1307.14,503.2 1300.66,516.84 1300.66,532.52 1300.66,546.45 1304.74,557.48 1312.9,565.6 1321.06,573.73 1333.12,577.8 1349.08,577.8 1368.49,577.8 1385.99,572.47 1401.59,561.83 1417.19,551.19 1427.35,539 1432.06,525.26 L 1432.06,474.18 1371.94,474.18 Z M 1374.66,299.25 C 1408.03,299.25 1434.88,308.32 1455.19,326.46 1475.5,344.6 1485.66,370.75 1485.66,404.9 L 1485.66,556.55 C 1485.66,567.8 1486.2,578.67 1487.29,589.15 1488.38,599.63 1490.38,609.91 1493.28,620 L 1438.05,620 C 1436.24,610.49 1434.83,602.1 1433.83,594.82 1432.83,587.55 1432.25,580.22 1432.06,572.85 1422.09,587.98 1409.07,600.64 1393.02,610.83 1376.97,621.02 1359.69,626.11 1341.19,626.11 1310.54,626.11 1287.19,617.72 1271.14,600.94 1255.09,584.15 1247.06,561.01 1247.06,531.52 1247.06,501.44 1258.44,477.91 1281.2,460.93 1303.97,443.95 1334.85,435.46 1373.84,435.46 L 1432.06,435.46 1432.06,404.32 C 1432.06,385.89 1426.8,371.28 1416.28,360.52 1405.76,349.75 1390.89,344.36 1371.67,344.36 1354.43,344.36 1340.42,349.07 1329.63,358.48 1318.84,367.89 1313.44,379.19 1313.44,392.39 L 1262.3,392.39 1261.75,390.64 C 1260.66,367.74 1270.77,346.79 1292.09,327.77 1313.4,308.75 1340.92,299.25 1374.66,299.25 Z M 1527.56,305.07 L 1587.41,305.07 1649.44,503.28 1658.97,542.87 1660.6,542.87 1732.97,305.07 1792.55,305.07 1668.76,668.32 C 1661.32,689.47 1650.67,707.9 1636.79,723.62 1622.92,739.34 1604.19,747.2 1580.61,747.2 1576.26,747.2 1570.73,746.66 1564.02,745.59 1557.3,744.53 1552.14,743.51 1548.51,742.54 L 1553.95,697.42 C 1552.86,697.23 1556.08,697.42 1563.61,698.01 1571.13,698.59 1575.9,698.88 1577.89,698.88 1589.32,698.88 1598.66,693.45 1605.91,682.58 1613.17,671.71 1619.24,659.68 1624.14,646.49 L 1636.93,613.6 1527.56,305.07 Z"); animation-name: rsa-spark-word-a; }
.rsa-spark-word-b { offset-path: path("M 1975.65,190.1 C 2019,190.1 2053.51,202.81 2079.17,228.23 2104.84,253.65 2117.22,283.14 2116.31,316.71 L 2115.76,318.46 2064.62,318.46 C 2064.62,293.62 2056.95,273.54 2041.63,258.21 2026.3,242.88 2004.31,235.21 1975.65,235.21 1948.99,235.21 1928.54,241.66 1914.3,254.57 1900.06,267.47 1892.94,284.3 1892.94,305.07 1892.94,323.5 1900.65,338.88 1916.07,351.2 1931.49,363.52 1956.52,374.34 1991.16,383.65 2032.88,394.72 2064.62,411.02 2086.38,432.55 2108.15,454.09 2119.03,480.77 2119.03,512.6 2119.03,546.75 2105.97,574.21 2079.85,594.97 2053.73,615.73 2019.63,626.11 1977.56,626.11 1938.01,626.11 1903.05,614.62 1872.67,591.62 1842.29,568.63 1827.56,537.92 1828.46,499.5 L 1829.01,497.75 1880.16,497.75 C 1880.16,524.92 1889.5,545.58 1908.18,559.75 1926.86,573.91 1949.99,581 1977.56,581 2004.58,581 2025.98,574.92 2041.76,562.77 2057.54,550.61 2065.43,534.12 2065.43,513.28 2065.43,493.99 2058.63,477.84 2045.03,464.82 2031.42,451.79 2007.3,440.85 1972.66,431.97 1930.76,421.28 1898.07,405.52 1874.58,384.71 1851.09,363.89 1839.35,337.73 1839.35,306.22 1839.35,273.15 1852,245.53 1877.3,223.36 1902.6,201.18 1935.38,190.1 1975.65,190.1 Z M 2155.21,305.07 L 2215.07,305.07 2277.1,503.28 2286.62,542.87 2288.25,542.87 2360.62,305.07 2420.21,305.07 2296.42,668.32 C 2288.98,689.47 2278.32,707.9 2264.45,723.62 2250.57,739.34 2231.85,747.2 2208.27,747.2 2203.91,747.2 2198.38,746.66 2191.67,745.59 2184.96,744.53 2179.79,743.51 2176.16,742.54 L 2181.6,697.42 C 2180.52,697.23 2183.74,697.42 2191.26,698.01 2198.79,698.59 2203.55,698.88 2205.55,698.88 2216.97,698.88 2226.31,693.45 2233.57,682.58 2240.82,671.71 2246.9,659.68 2251.8,646.49 L 2264.58,613.6 2155.21,305.07 Z M 2576.1,299.25 C 2610.38,299.25 2637.63,308.66 2657.86,327.48 2678.08,346.3 2687.74,369.2 2686.83,396.17 L 2686.29,397.92 2635.14,397.92 C 2635.14,384.14 2629.74,371.77 2618.95,360.81 2608.16,349.84 2593.88,344.36 2576.1,344.36 2557.06,344.36 2542.91,348.82 2533.66,357.75 2524.41,366.68 2519.78,377.45 2519.78,390.06 2519.78,402.48 2523.86,412.28 2532.03,419.46 2540.19,426.64 2556.78,433.04 2581.81,438.67 2619,447.2 2646.66,458.8 2664.79,473.45 2682.93,488.1 2692,507.75 2692,532.39 2692,560.33 2681.43,582.94 2660.3,600.21 2639.17,617.48 2611.56,626.11 2577.46,626.11 2539.92,626.11 2510.35,615.93 2488.77,595.55 2467.18,575.18 2456.94,551.41 2458.02,524.24 L 2458.57,522.49 2509.72,522.49 C 2510.62,542.77 2517.7,557.59 2530.94,566.95 2544.18,576.32 2559.69,581 2577.46,581 2596.51,581 2611.42,576.87 2622.22,568.63 2633.01,560.38 2638.4,549.56 2638.4,536.17 2638.4,523.56 2633.91,513.18 2624.94,505.03 2615.96,496.88 2598.95,489.8 2573.92,483.78 2538.19,475.45 2511.3,464.16 2493.26,449.92 2475.21,435.69 2466.19,416.26 2466.19,391.66 2466.19,366.08 2476.34,344.29 2496.66,326.27 2516.97,308.25 2543.45,299.25 2576.1,299.25 Z"); animation-name: rsa-spark-word-b; }

/* Modo solo-simbolo. No basta con ocultar el wordmark: con la linea de tiempo
   del logo completo la R se quedaria parada 1.65 s esperando el hueco de unas
   letras que aqui ni se dibujan. Estas reglas cambian cada pieza a su propio
   juego de keyframes, encadenado sin ese hueco. */
.rsa--mark .rsa-logo { animation-name: rsa-m-bump, rsa-cycle; }
.rsa--mark .rsa-r-body { animation-name: rsa-m-r-body; }
.rsa--mark .rsa-leg { animation-name: rsa-m-leg; }
.rsa--mark .rsa-bar-a { animation-name: rsa-m-bar-a; }
.rsa--mark .rsa-bar-b { animation-name: rsa-m-bar-b; }
.rsa--mark .rsa-bar-c { animation-name: rsa-m-bar-c; }
.rsa--mark .rsa-spark-r-body { animation-name: rsa-m-spark-r-body; }
.rsa--mark .rsa-spark-leg { animation-name: rsa-m-spark-leg; }
.rsa--mark .rsa-spark-bar-a { animation-name: rsa-m-spark-bar-a; }
.rsa--mark .rsa-spark-bar-b { animation-name: rsa-m-spark-bar-b; }
.rsa--mark .rsa-spark-bar-c { animation-name: rsa-m-spark-bar-c; }

/* Reproduccion unica. En cabecera el logo acompana toda la sesion, asi que se
   dibuja al entrar y se queda puesto en vez de repetirse cada 20 s. El reinicio
   al volver a la pestana lo sigue haciendo scripts/raysys-brand-animation.js.
   Se quita rsa-cycle a proposito: ese es el fundido que prepara la vuelta, y
   sin bucle dejaria el logo invisible a los 19.4 s. */
.rsa--once .rsa-shape,
.rsa--once .rsa-spark {
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.rsa--once .rsa-logo {
    animation-name: rsa-bump;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.rsa--mark.rsa--once .rsa-logo { animation-name: rsa-m-bump; }

/* Modo carga. Aqui no se dibuja nada: el logo esta completo desde el primer
   fotograma y el trabajo lo comunica un trazo corto que recorre el contorno de
   la R, con un latido suave de fondo. Es deliberadamente lo contrario del
   reveal, porque una carga de rejilla suele durar menos (300-500 ms) que el
   trazado completo (2.7 s) y el usuario solo veria un garabato a medias. */
.rsa--loading .rsa-shape {
    fill-opacity: 1;
    stroke-opacity: 0;
    stroke-dashoffset: 0;
    animation: none;
}

.rsa--loading .rsa-logo {
    animation: rsa-pulse 1.6s ease-in-out infinite;
}

/* El trazo va en un path aparte y el ultimo del grupo: sobre el trazado de la
   R lo taparia la pierna azul durante parte del recorrido. */
.rsa-trace {
    fill: none;
    stroke: var(--rsa-trace, #FFFFFF);
    /* En unidades del viewBox: 30 sobre 734 son ~4 px a 100 px de logo. Con 8
       el trazo era de 1 px y no se veia. */
    stroke-width: 30;
    stroke-linecap: round;
    /* pathLength normaliza los cinco contornos a 100, asi que el guion recorre
       el simbolo entero de un tiron y salta de una pieza a la siguiente. */
    stroke-dasharray: 11 89;
    /* Dos capas de destello: la corta define el filo, la larga lo hace legible
       sobre el fondo claro del loader. */
    filter: drop-shadow(0 0 5px var(--rsa-trace-glow, rgba(56, 189, 248, .95)))
            drop-shadow(0 0 18px var(--rsa-trace-glow, rgba(56, 189, 248, .95)));
    animation: rsa-chase 1.5s linear infinite;
}

@keyframes rsa-r-body {
    0%, 0.75% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    4.75% { fill-opacity: 0; animation-timing-function: ease-out; }
    5.75% { stroke-opacity: 1; animation-timing-function: ease-out; }
    6.5% { stroke-dashoffset: 0; }
    7% { fill-opacity: 1; }
    7.5% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-word-a {
    0%, 6.25% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    8.6% { fill-opacity: 0; animation-timing-function: ease-out; }
    9.6% { stroke-opacity: 1; animation-timing-function: ease-out; }
    9.5% { stroke-dashoffset: 0; }
    10.85% { fill-opacity: 1; }
    11.35% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-word-b {
    0%, 9.4% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    11.75% { fill-opacity: 0; animation-timing-function: ease-out; }
    12.75% { stroke-opacity: 1; animation-timing-function: ease-out; }
    12.65% { stroke-dashoffset: 0; }
    14% { fill-opacity: 1; }
    14.5% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-leg {
    0%, 14.75% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    16.6% { fill-opacity: 0; animation-timing-function: ease-out; }
    17.5% { stroke-opacity: 1; animation-timing-function: ease-out; }
    17.75% { stroke-dashoffset: 0; }
    18.85% { fill-opacity: 1; }
    19.25% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-bar-a {
    0%, 16% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    17.1% { fill-opacity: 0; animation-timing-function: ease-out; }
    17.9% { stroke-opacity: 1; animation-timing-function: ease-out; }
    18.25% { stroke-dashoffset: 0; }
    19.35% { fill-opacity: 1; }
    19.65% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-bar-b {
    0%, 16.6% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    17.7% { fill-opacity: 0; animation-timing-function: ease-out; }
    18.5% { stroke-opacity: 1; animation-timing-function: ease-out; }
    18.85% { stroke-dashoffset: 0; }
    19.95% { fill-opacity: 1; }
    20.25% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-bar-c {
    0%, 17.2% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    18.3% { fill-opacity: 0; animation-timing-function: ease-out; }
    19.1% { stroke-opacity: 1; animation-timing-function: ease-out; }
    19.45% { stroke-dashoffset: 0; }
    20.55% { fill-opacity: 1; }
    20.85% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-spark-r-body {
    0%, 0.75% { offset-distance: 0%; opacity: 0; }
    1.25% { opacity: 1; }
    5.9% { opacity: 1; }
    6.5%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-spark-word-a {
    0%, 6.25% { offset-distance: 0%; opacity: 0; }
    6.75% { opacity: 1; }
    8.9% { opacity: 1; }
    9.5%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-spark-word-b {
    0%, 9.4% { offset-distance: 0%; opacity: 0; }
    9.9% { opacity: 1; }
    12.05% { opacity: 1; }
    12.65%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-spark-leg {
    0%, 14.75% { offset-distance: 0%; opacity: 0; }
    15.25% { opacity: 1; }
    17.15% { opacity: 1; }
    17.75%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-spark-bar-a {
    0%, 16% { offset-distance: 0%; opacity: 0; }
    16.5% { opacity: 1; }
    17.65% { opacity: 1; }
    18.25%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-spark-bar-b {
    0%, 16.6% { offset-distance: 0%; opacity: 0; }
    17.1% { opacity: 1; }
    18.25% { opacity: 1; }
    18.85%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-spark-bar-c {
    0%, 17.2% { offset-distance: 0%; opacity: 0; }
    17.7% { opacity: 1; }
    18.85% { opacity: 1; }
    19.45%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-m-r-body {
    0%, 0.75% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    4.75% { fill-opacity: 0; animation-timing-function: ease-out; }
    5.75% { stroke-opacity: 1; animation-timing-function: ease-out; }
    6.5% { stroke-dashoffset: 0; }
    7% { fill-opacity: 1; }
    7.5% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-m-leg {
    0%, 7.25% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    9.1% { fill-opacity: 0; animation-timing-function: ease-out; }
    10% { stroke-opacity: 1; animation-timing-function: ease-out; }
    10.25% { stroke-dashoffset: 0; }
    11.35% { fill-opacity: 1; }
    11.75% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-m-bar-a {
    0%, 8.5% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    9.6% { fill-opacity: 0; animation-timing-function: ease-out; }
    10.4% { stroke-opacity: 1; animation-timing-function: ease-out; }
    10.75% { stroke-dashoffset: 0; }
    11.85% { fill-opacity: 1; }
    12.15% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-m-bar-b {
    0%, 9.1% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    10.2% { fill-opacity: 0; animation-timing-function: ease-out; }
    11% { stroke-opacity: 1; animation-timing-function: ease-out; }
    11.35% { stroke-dashoffset: 0; }
    12.45% { fill-opacity: 1; }
    12.75% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-m-bar-c {
    0%, 9.7% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
        stroke-opacity: 1;
        animation-timing-function: cubic-bezier(.45,.05,.2,1);
    }
    10.8% { fill-opacity: 0; animation-timing-function: ease-out; }
    11.6% { stroke-opacity: 1; animation-timing-function: ease-out; }
    11.95% { stroke-dashoffset: 0; }
    13.05% { fill-opacity: 1; }
    13.35% { stroke-opacity: 0; }
    /* Sin este 100% explicito el navegador inventa uno con el estilo
       base y el logo se va desdibujando durante el resto del ciclo. */
    100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes rsa-m-spark-r-body {
    0%, 0.75% { offset-distance: 0%; opacity: 0; }
    1.25% { opacity: 1; }
    5.9% { opacity: 1; }
    6.5%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-m-spark-leg {
    0%, 7.25% { offset-distance: 0%; opacity: 0; }
    7.75% { opacity: 1; }
    9.65% { opacity: 1; }
    10.25%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-m-spark-bar-a {
    0%, 8.5% { offset-distance: 0%; opacity: 0; }
    9% { opacity: 1; }
    10.15% { opacity: 1; }
    10.75%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-m-spark-bar-b {
    0%, 9.1% { offset-distance: 0%; opacity: 0; }
    9.6% { opacity: 1; }
    10.75% { opacity: 1; }
    11.35%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-m-spark-bar-c {
    0%, 9.7% { offset-distance: 0%; opacity: 0; }
    10.2% { opacity: 1; }
    11.35% { opacity: 1; }
    11.95%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsa-bump {
    0%, 21.25% { transform: scale(1); filter: none; animation-timing-function: ease-out; }
    22.77% { transform: scale(1.055); filter: drop-shadow(0 0 26px rgba(37, 99, 235, .42)); animation-timing-function: ease-in-out; }
    23.97% { transform: scale(.988); animation-timing-function: ease-out; }
    25.25%, 100% { transform: scale(1); filter: none; }
}

@keyframes rsa-m-bump {
    0%, 13.75% { transform: scale(1); filter: none; animation-timing-function: ease-out; }
    15.27% { transform: scale(1.055); filter: drop-shadow(0 0 26px rgba(37, 99, 235, .42)); animation-timing-function: ease-in-out; }
    16.47% { transform: scale(.988); animation-timing-function: ease-out; }
    17.75%, 100% { transform: scale(1); filter: none; }
}

/* Cierre del ciclo: el logo se funde antes de que las formas se reinicien,
   asi el bucle no corta en seco al volver a empezar. */
@keyframes rsa-cycle {
    0%, 92% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

@keyframes rsa-chase {
    to { stroke-dashoffset: -100; }
}

@keyframes rsa-pulse {
    0%, 100% { transform: scale(.96); }
    50% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .rsa-logo,
    .rsa--loading .rsa-logo,
    .rsa-shape,
    .rsa-spark { animation: none; }
    .rsa-shape { fill-opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; }
    .rsa-sparks { display: none; }
    /* El trazo se conserva: es el que informa de que algo esta cargando. */
}
/* ===== Fin del reveal animado del logotipo RaySys ===== */

/* Superficie de trabajo completa para formularios abiertos desde selectores.
   Solo controla geometria; colores y tipografia siguen perteneciendo al tema. */
.raysys-fullscreen-dialog-wrapper {
    align-items: stretch !important;
    justify-content: stretch !important;
}

.raysys-fullscreen-dialog {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.raysys-fullscreen-dialog-content {
    height: 100%;
    padding: 0 !important;
    overflow: auto;
}

.raysys-fullscreen-form-surface {
    min-height: 100%;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.gradient-header .rz-icon,
.gradient-header .branch-badge {
    color: var(--raysys-header-text-color, white) !important;
}

.gradient-header .header-logo-link {
    background-color: var(--raysys-header-logo-background, transparent);
}