/* basado en 
    https://preview.sprukomarket.com/blazor/webapp/server/mudblazor/ynex/dist/html/contacts.html


*/

:root {
    --body-bg-rgb: 240, 241, 247;
    --default-body-bg-color: rgb(var(--body-bg-rgb));
    --global--size: 2rem; /* clamp(2rem, 4vw, 5rem) */
    --anim--hover-time: 400ms;
    --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

[data-theme-mode=dark] {
    --body-bg-rgb: 26, 28, 30;
}



/* Sidemenu Layout Syles */
@media (max-width: 991.98px) {
    .sidemenu-layout-styles {
        display: none;
    }
}
/* Sidemenu Layout Syles */
/* Respoonsive Logo Styles */
@media (max-width: 991.98px) {
    .app-header .horizontal-logo .header-logo img {
        height: 2rem;
        line-height: 2rem;
    }
}
/* Respoonsive Logo Styles */
/* Dark Mode */
[data-theme-mode=dark] .app-sidebar .main-sidebar-header .header-logo .desktop-dark {
    display: block;
}

/* slider Menu treeview */

.mud-drawer {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    /* FIX (2026-07-14, reportado por Alejandro): el calc original no restaba el pie de pagina
       fijo (position: fixed; bottom: 0;) agregado en MainLayout.razor, asi que el drawer de
       modulos ocupaba hasta el borde inferior real de la pantalla y el ultimo item del arbol
       quedaba tapado por el footer (copyright/version/scope). Se resta el alto del footer (44px,
       mismo valor que el padding-bottom que ya usa el MudContainer del contenido principal). */
    height: calc(100vh + 11px - var(--mud-appbar-height) - var(--mud-appbar-height) / 4 - 44px) !important;
    overflow-y: auto;
}

.mud-drawer-content {
    flex: 1;
    overflow-y: auto;
}

.mud-drawer-content {
    overflow-y: auto;
}

.mud-drawer-header {
    position: sticky;
    z-index: 20;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 20px 0px 0px 20px;
}

[data-theme-mode="dark"] .mud-treeview {
background: #1e1e1e;
color: white;
}

[data-theme-mode="light"] .mud-treeview  {
    background: white;
    color: black;
}


.mud-treeview-item {
    font-size: 15px;
}

.tree-bold {
    color: grey;
    font-weight: 600;
    font-size: 17px;
}

.tree-normal {
    color: grey;
    font-size: 15px;
}

/* El arbol efectivo de KUX-007 usa contenido personalizado en MudTreeViewItem. El indicador se
   dibuja de forma explicita para que no dependa del toggler interno de MudBlazor y conserve buen
   contraste tanto cerrado (>) como abierto (chevron hacia abajo). */
.kr-menu-tree-chevron {
    color: currentColor !important;
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    opacity: 1;
}

/* end slider --------------------------------------- */

[data-theme-mode="dark"] .HamburButton {
    color: white !important;
}

[data-theme-mode="light"] .HamburButton {
    color: white !important;
}

/* Definicion de bordes */

.mud-appbar {
    border-bottom: 2px solid rgba(255,255,255,0.1);
}

.mud-drawer.mud-drawer-pos-left {
    border-right: 2px solid rgba(255,255,255,0.08);
}

/* 2026-08-16, a pedido de Alejandro ("el menu en dark... me parecio que era mas transparente"): el
   cajon de modulos era opaco -- el fondo propio de MudDrawer mas el #1e1e1e que pinta .mud-treeview
   en oscuro. Se le da la misma receta de vidrio que al buscador: velo translucido sobre el fondo de
   la aplicacion, desenfocado. El arbol pasa a transparente porque de lo contrario tapa el vidrio
   del contenedor; hace falta mas especificidad que la regla de [data-theme-mode="dark"] .mud-treeview
   de mas arriba, que es la que lo pintaba solido. */
/* El velo arranco en .55 y se veia igual de opaco: detras del cajon no pasa contenido --el drawer
   es fijo y el contenido va al costado, no debajo-- asi que lo unico que hay para dejar ver es la
   imagen de fondo de la aplicacion. Con mas de la mitad de velo esa textura desaparece y el vidrio
   no se percibe. A .30 el fondo se transparenta de verdad. */
body[data-theme-mode="dark"] .mud-drawer.mud-drawer-pos-left {
    background-color: rgba(18, 21, 32, 0.30);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    /* Cierre visual inferior sin cambiar el scroll ni las dimensiones del drawer. */
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.18);
}

    body[data-theme-mode="dark"] .mud-drawer.mud-drawer-pos-left .mud-treeview,
    body[data-theme-mode="dark"] .mud-drawer.mud-drawer-pos-left .mud-drawer-header,
    body[data-theme-mode="dark"] .mud-drawer.mud-drawer-pos-left .mud-drawer-content {
        background: transparent;
    }

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

@property --angle-1 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -75deg;
}

@property --angle-2 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -45deg;
}

body {
    /*width: 100%;
    height: 100vh;*/
    /*margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;*/
 /*   font-size: var(--global--size);
    background-color: rgba(215, 215, 215, 1);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;*/
}

body:after {
    content: "";
    pointer-events: none;
    z-index: -1;
    position: fixed;
    inset: 0;
}

.button-wrap {
    position: relative;
    display: inline-flex;
    margin: 1rem;
    z-index: 2;
    border-radius: 999vw;
    background: transparent;
    pointer-events: none;
    transition: all var(--anim--hover-time) var(--anim--hover-ease);
}

.button-shadow {
    --shadow-cuttoff-fix: 2em;
    position: absolute;
    width: calc(100% + var(--shadow-cuttoff-fix));
    height: calc(100% + var(--shadow-cuttoff-fix));
    top: calc(0% - var(--shadow-cuttoff-fix) / 2);
    left: calc(0% - var(--shadow-cuttoff-fix) / 2);
    filter: blur(2px);
    overflow: visible;
    pointer-events: none;
}

.button-shadow::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: 999vw;
    background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
    width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
    height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
    top: calc(var(--shadow-cuttoff-fix) - 0.5em);
    left: calc(var(--shadow-cuttoff-fix) - 0.875em);
    padding: 0.125em;
    box-sizing: border-box;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: all var(--anim--hover-time) var(--anim--hover-ease);
    overflow: visible;
    opacity: 1;
}

.glassbutton {
    --border-width: clamp(1px, 0.0625em, 4px);
    all: unset;
    cursor: pointer;
    position: relative;
    pointer-events: auto;
    z-index: 3;
    background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    border-radius: 999vw;
    box-shadow: inset 0 0.125em 0.125em rgba(0,0,0,0.05), inset 0 -0.125em 0.125em rgba(255,255,255,0.5), 0 0.25em 0.125em -0.125em rgba(0,0,0,0.2), 0 0 0.1em 0.25em inset rgba(255,255,255,0.2), 0 0 0 0 rgba(255,255,255,1);
    backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    transition: all var(--anim--hover-time) var(--anim--hover-ease);
}
.glassbutton:hover {
    transform: scale(0.975);
    backdrop-filter: blur(0.01em);
    -webkit-backdrop-filter: blur(0.01em);
    box-shadow: inset 0 0.125em 0.125em rgba(0,0,0,0.05), inset 0 -0.125em 0.125em rgba(255,255,255,0.5), 0 0.15em 0.05em -0.1em rgba(0,0,0,0.25), 0 0 0.05em 0.1em inset rgba(255,255,255,0.5), 0 0 0 0 rgba(255,255,255,1);
}

.glassbutton span {
    position: relative;
    display: block;
    user-select: none;
    letter-spacing: -0.05em;
    font-weight: 500;
    font-size: 1em;
    
    color: rgba(255,255,255,0.92);
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 0.25em 0.05em rgba(0,0,0,0.1);
    transition: all var(--anim--hover-time) var(--anim--hover-ease);
    padding-inline: 1.5em;
    padding-block: 0.875em;
}

.glassbutton:hover span {
    text-shadow: 0.025em 0.025em 0.025em rgba(0,0,0,0.12);
}

.glassbutton span::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: calc(100% - var(--border-width));
    height: calc(100% - var(--border-width));
    top: calc(0% + var(--border-width) / 2);
    left: calc(0% + var(--border-width) / 2);
    box-sizing: border-box;
    border-radius: 999vw;
    overflow: hidden;
    background: linear-gradient(var(--angle-2), rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 40% 50%, rgba(255,255,255,0) 55%);
    z-index: 3;
    mix-blend-mode: screen;
    pointer-events: none;
    background-size: 200% 200%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    transition: background-position calc(var(--anim--hover-time)*1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time)*1.25) var(--anim--hover-ease);
}

.glassbutton:hover span::after {
    background-position: 25% 50%;
}

.glassbutton:active span::after {
    background-position: 50% 15%;
    --angle-2: -35deg;
}

@media (hover: none) and (pointer: coarse) {
    .glassbutton span::after,
    .glassbutton:active span::after {
        --angle-2: -45deg;
    }
}

.glassbutton::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 999vw;
    width: calc(100% + var(--border-width));
    height: calc(100% + var(--border-width));
    top: calc(0% - var(--border-width) / 2);
    left: calc(0% - var(--border-width) / 2);
    padding: var(--border-width);
    box-sizing: border-box;
    background: conic-gradient(from var(--angle-1) at 50% 50%, rgba(0,0,0,0.5), rgba(0,0,0,0) 5% 40%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 60% 95%, rgba(0,0,0,0.5)), linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.5));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 500ms ease;
    box-shadow: inset 0 0 0 calc(var(--border-width)/2) rgba(255,255,255,0.5);
}

.glassbutton:hover::after {
    --angle-1: -125deg;
}

.glassbutton:active::after {
    --angle-1: -75deg;
}

@media (hover: none) and (pointer: coarse) {
    .glassbutton::after,
    .glassbutton:hover::after,
    .glassbutton:active::after {
        --angle-1: -75deg;
    }
}

/*******************************************************************************************/

/* Shadow Hover */
.button-wrap:has(.glassbutton:hover) .button-shadow {
    filter: blur(clamp(2px, 0.0625em, 6px));
    -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
    -moz-filter: blur(clamp(2px, 0.0625em, 6px));
    -ms-filter: blur(clamp(2px, 0.0625em, 6px));
    transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}

.button-wrap:has(.glassbutton:hover) .button-shadow::after {
    top: calc(var(--shadow-cuttoff-fix) - 0.875em);
    opacity: 1;
}

/* Rotation */
.button-wrap:has(.glassbutton:active) {
    transform: rotate3d(1, 0, 0, 25deg);
}

.button-wrap:has(.glassbutton:active) button {
    box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05), 0 0.25em 0 0 rgba(255, 255, 255, 0.75), inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
}

.button-wrap:has(.glassbutton:active) .button-shadow {
    filter: blur(clamp(2px, 0.125em, 12px));
    -webkit-filter: blur(clamp(2px, 0.125em, 12px));
    -moz-filter: blur(clamp(2px, 0.125em, 12px));
    -ms-filter: blur(clamp(2px, 0.125em, 12px));
}

    .button-wrap:has(.glassbutton:active) .button-shadow::after {
        top: calc(var(--shadow-cuttoff-fix) - 0.5em);
        opacity: 0.75;
    }

.button-wrap:has(.glassbutton:active) span {
    text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
}


/*[data-theme-mode="light"] .glassbutton {
    background: 
        radial-gradient( circle at top left, 
        rgba(255,255,255,0.95), 
        transparent 30% ), 
        radial-gradient( circle at bottom right, rgba(220,230,255,0.35), 
        transparent 35% ), linear-gradient( 135deg, #f8f9fc, #edf1f7 );
}*/


.acciones-panel {
    background: linear-gradient( 135deg, rgba(8,10,18,0.92), rgba(14,18,28,0.96) ), url('/assets/backgrounds/dark-lines-bg.webp');
}

.dark-theme {
    padding-top:50px;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
}


/* Glow Overlay */
.dark-theme::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient( circle at top left, rgba(255,255,255,0.08), transparent 25% ), radial-gradient( circle at bottom right, rgba(88,120,255,0.10), transparent 35% );
    z-index: 0;
}



/* =========================
   GLASS CARD
========================= */

.glass-card2 {
    position: relative;
    width: 420px;
    padding: 32px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient( 135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03) );
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.10), inset 0 -1px 1px rgba(255,255,255,0.03);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}


/* Shine Effect */
    .glass-card2::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 20%, rgba(255,255,255,0.12), transparent 80% );
        transform: translateX(-100%);
        transition: transform 0.8s ease;
        pointer-events: none;
        border-radius: inherit;
    }


/* Hover */
.glass-card2:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 30px rgba(95,125,255,0.18), inset 0 1px 1px rgba(255,255,255,0.12);
}



.glass-card2:hover::before {
    transform: translateX(100%);
}


/* =========================
CARD CONTENT
========================= */

.glass-title {
color: rgba(255,255,255,0.94);
font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}


.glass-subtitle {
    color: rgba(255,255,255,0.65);
    font-size: 15px;
    margin-bottom: 30px;
}


.glass-value {
    color: white;
    font-size: 54px;
    font-weight: 700;
    letter-spacing: -2px;
    margin-bottom: 10px;
    text-shadow: 0 4px 18px rgba(0,0,0,0.45);
}


.glass-success {
    color: #3ddc97;
    font-size: 16px;
    font-weight: 500;
}


/* =========================
   MINI STATS
========================= */

.glass-stats {
    display: flex;
    gap: 18px;
    margin-top: 30px;
}


.glass-stat {
    flex: 1;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    text-align: center;
}


.glass-stat-label {
    color: rgba(255,255,255,0.60);
    font-size: 13px;
    margin-bottom: 6px;
}


.glass-stat-value {
    color: white;
    font-size: 24px;
    font-weight: 600;
}


.left-scrollbar {
    direction: rtl;
    overflow-y: auto;
}

.left-scrollbar .drawer-content {
    direction: ltr;
}

.drawer_content_left {
    direction: ltr !important;
}

.sticky-toolbar {
    position: sticky;
    top: 50px;
    z-index: 1000;
    height: 48px;
    min-height: 48px;
    align-items: center;
    flex-wrap: nowrap !important;
    /* Transparencia */
    background: rgba(25, 30, 45, 0.45);
    /* Vidrio */
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 2px solid rgba(255,255,255,.08);
    /* 
    
    box-shadow: 0 8px 32px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.15);
    border-radius: 0 0 12px 12px;
    padding: 6px 12px;
  */
}

/* FIX (2026-08-16, reportado por Alejandro: "ese color gris no ayuda"): el vidrio de arriba usa un
   velo OSCURO fijo (rgba(25,30,45,.45)). Sobre el fondo claro eso no se lee como cristal sino como
   una banda gris sucia entre la barra superior y el contenido. En claro corresponde el velo
   inverso: blanco translucido y linea inferior oscura, conservando el mismo desenfoque. */
body[data-theme-mode="light"] .sticky-toolbar {
    background: rgba(255, 255, 255, 0.55);
    border-bottom-color: rgba(0, 0, 0, .10);
}

/* ============================================================
   LOGIN PAGE (2026-07-15, a pedido de Alejandro: "mejoralo, un fondo
   similar al de la app, uno para light y otro dark, y el logo de la
   empresa"). Reusa los MISMOS fondos abstractos que ya usa el resto de
   la app -- fondodark2.png/fondolight.png, ver ".acciones-panel" arriba
   y menu.css -- para que el login sea consistente, no un fondo nuevo
   inventado. Reacciona a [data-theme-mode] igual que el resto de este
   archivo (mud-treeview, etc.); antes de que setThemeMode corra (o si
   nunca corre) cae en la variante dark, que es el default real de la
   app (ver MainLayout._isDarkMode = true).
   La tarjeta prioriza el logo de la organizacion recordada; la marca Kayros
   queda en el login de Microsoft Entra. */

.kayros-login-page {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 68px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url('/_content/KayrosShared/assets/fondodark2.png');
}

[data-theme-mode="light"] .kayros-login-page {
    background-image: url('/_content/KayrosShared/assets/fondolight.png');
}

.kayros-login-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 44px 36px;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.10);
}

[data-theme-mode="light"] .kayros-login-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.80), rgba(255,255,255,0.55));
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 40px rgba(20,22,31,0.12), inset 0 1px 1px rgba(255,255,255,0.6);
}

/* FIX (2026-07-15): toggle sol/luna propio de la pagina de Login, ver Login.razor -- antes esta
   pagina no tenia ningun control de tema (heredaba lo que sea que MainLayout haya dejado puesto,
   o el default si era la primera visita). Posicionado absoluto arriba a la derecha de la card
   (que ya es position: relative). Color hereda de currentColor via .kayros-login-title de al
   lado, pero como esta fuera de ese flujo, fijamos el color explicito segun tema. */
.kayros-login-theme-toggle {
    position: absolute !important;
    top: 14px;
    right: 14px;
    color: #F5F7FA !important;
    opacity: .75;
}

.kayros-login-theme-toggle:hover {
    opacity: 1;
}

[data-theme-mode="light"] .kayros-login-theme-toggle {
    color: #14161F !important;
}

/* Marca principal del acceso contextual: Company del ultimo usuario logueado. El contenedor
   claro preserva contraste para logos transparentes tanto en tema oscuro como claro. */
.kayros-login-company-logo {
    width: 280px;
    height: 108px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 30px;
    display: block;
    padding: 12px 20px;
    box-sizing: border-box;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
}

.kr-app-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    color: #f5f7fa;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(43, 44, 54, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

[data-theme-mode="light"] .kr-app-footer {
    color: #20222b;
    border-top-color: rgba(0, 0, 0, .10);
    background: rgba(255, 255, 255, .92);
}

@media (max-width: 600px) {
    .kayros-login-page {
        padding: 18px 16px 82px;
    }

    .kayros-login-card {
        padding: 40px 24px;
    }

    .kayros-login-company-logo {
        width: 100%;
        height: 100px;
    }

    .kr-app-footer {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

.kayros-login-organization-placeholder {
    width: 72px;
    height: 72px;
    margin: 0 auto 30px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5f7fa;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
}

[data-theme-mode="light"] .kayros-login-organization-placeholder {
    color: #14161f;
    background: rgba(20, 22, 31, .06);
    border-color: rgba(20, 22, 31, .08);
}

/* ============================================================
   SPLASH / LOADING SCREEN (2026-07-21, fix a pedido de Alejandro: "el splash
   tiene un fondo azul solido y el texto Cargando Kayros Enterprise -- mantene
   el concepto de carga pero saca el fondo azul, usa las imagenes existentes
   de dark/light"). Antes PreAuthGate.razor tenia un fondo #002b5c fijo y un
   <img src="images/splash-logo.png"> que ni siquiera existe en el repo (ruta
   rota, 404 silencioso). Ahora reusa EXACTAMENTE los mismos assets que
   .kayros-login-page (fondodark2.png/fondolight.png) y el mismo logo
   dark/light de Kayros -- consistencia visual con el login, sin inventar
   assets nuevos. Reacciona a [data-theme-mode] igual que el resto del tema. */
.kayros-splash-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url('/_content/KayrosShared/assets/fondodark2.png');
    color: #F5F7FA;
}

[data-theme-mode="light"] .kayros-splash-page {
    background-image: url('/_content/KayrosShared/assets/fondolight.png');
    color: #14161F;
}

.kayros-splash-logo {
    height: 64px;
    margin-bottom: 24px;
    display: block;
}

.kayros-splash-logo-light { display: none; }
.kayros-splash-logo-dark { display: block; }

[data-theme-mode="light"] .kayros-splash-logo-dark { display: none; }
[data-theme-mode="light"] .kayros-splash-logo-light { display: block; }

.kayros-login-title {
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

.kayros-login-subtitle {
    opacity: .65;
    margin-bottom: 30px !important;
}

.kayros-login-title, .kayros-login-subtitle {
    color: #F5F7FA;
}

[data-theme-mode="light"] .kayros-login-title,
[data-theme-mode="light"] .kayros-login-subtitle {
    color: #14161F;
}

.sticky-toolbar .kr-compact-breadcrumbs {
    min-width: 0;
    margin: 0;
    padding: 4px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
}

.sticky-toolbar .kr-compact-breadcrumbs::-webkit-scrollbar {
    display: none;
}

.sticky-toolbar .kr-compact-breadcrumbs .mud-breadcrumb-item {
    font-size: .88rem;
}

.sticky-toolbar .kr-compact-breadcrumbs .mud-icon-root {
    font-size: 1.2rem;
}

.sticky-toolbar > .mud-icon-button {
    flex: 0 0 auto;
}

.sticky-toolbar.kr-document-toolbar {
    height: 58px;
    min-height: 58px;
    gap: 2px;
    padding-right: 4px;
}

.kr-document-toolbar-icon {
    flex: 0 0 auto;
}

.kr-document-toolbar-icon {
    margin: 0 6px 0 4px;
    font-size: 1.65rem !important;
}

.kr-document-toolbar-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.kr-document-toolbar-title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kr-document-toolbar-subtitle {
    max-width: min(42vw, 620px);
    margin-top: 2px;
    opacity: .72;
    line-height: 1.1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kr-document-toolbar-company-shell {
    width: 240px !important;
    min-width: 0 !important;
    max-width: 240px !important;
    flex: 0 0 240px !important;
    margin-left: auto;
    margin-right: 16px;
}

.kr-document-toolbar-company {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

@media (max-width: 1050px), (max-height: 760px) {
    .sticky-toolbar.kr-document-toolbar {
        height: 48px;
        min-height: 48px;
    }

    .kr-document-toolbar-subtitle {
        display: none;
    }

    .kr-document-toolbar-title {
        font-size: .95rem !important;
    }

    .kr-document-toolbar-company-shell {
        width: 230px !important;
        max-width: 230px !important;
        flex-basis: 230px !important;
    }
}

@media (max-width: 700px) {
    .kr-document-toolbar-icon {
        display: none !important;
    }

    .kr-document-toolbar-company-shell {
        width: 210px !important;
        max-width: 210px !important;
        flex-basis: 210px !important;
        margin-right: 8px;
    }
}

@media (max-width: 560px) {
    .sticky-toolbar:not(.kr-document-toolbar) {
        height: 44px;
        min-height: 44px;
    }

    .sticky-toolbar .kr-compact-breadcrumbs {
        padding-left: 2px;
        padding-right: 2px;
    }

}