/* /Components/Controls/Configuracion/Terceros/EditFormTerceros.razor.rz.scp.css */
.legendCss[b-vglzc32mx7] {
    font-size: 18px !important;
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Fondo: tonos sacados de la acuarela del logo (indigo #304890, ceruleo #3090c0,
   turquesa #60a8c0 y azul cielo #90c0d8) sobre una base clara, y tres manchas
   difuminadas que se mueven despacio. Las manchas van con pointer-events: none
   para no tapar nada. */
.auth-page[b-cw8kqqgbgx] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(48, 144, 192, .45), transparent 42%),
        radial-gradient(circle at 88% 15%, rgba(48, 72, 144, .30), transparent 40%),
        radial-gradient(circle at 80% 85%, rgba(96, 168, 192, .45), transparent 45%),
        radial-gradient(circle at 20% 90%, rgba(24, 120, 192, .25), transparent 40%),
        linear-gradient(135deg, #90c0d8 0%, #b4d4ea 50%, #d6e8f5 100%);
}

    /* Rejilla de puntos muy suave encima del degradado. */
    .auth-page[b-cw8kqqgbgx]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
        background-size: 22px 22px;
        pointer-events: none;
    }

.auth-shape[b-cw8kqqgbgx] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    pointer-events: none;
    animation: auth-float-b-cw8kqqgbgx 18s ease-in-out infinite alternate;
}

.auth-shape-1[b-cw8kqqgbgx] {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: #3090c0;
}

.auth-shape-2[b-cw8kqqgbgx] {
    width: 360px;
    height: 360px;
    bottom: -140px;
    right: -80px;
    background: #60a8c0;
    animation-delay: -6s;
}

.auth-shape-3[b-cw8kqqgbgx] {
    width: 300px;
    height: 300px;
    top: 10%;
    left: 65%;
    background: #304890;
    opacity: .25;
    animation-delay: -12s;
}

@keyframes auth-float-b-cw8kqqgbgx {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(40px, 30px) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-shape[b-cw8kqqgbgx] {
        animation: none;
    }
}

.auth-container[b-cw8kqqgbgx] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* El backdrop-filter hace de bloque contenedor para los hijos fixed, así que el
   TelerikLoaderContainer de la página queda dentro de la tarjeta y no tapa el fondo. */
.auth-card[b-cw8kqqgbgx] {
    position: relative;
    width: 100%;
    padding: 2.25rem 2rem 2rem;
    border-radius: var(--u-radius-lg);
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: var(--u-shadow-lg);
    backdrop-filter: blur(8px);
    overflow: hidden;
}

    /* Franja de color en el borde superior de la tarjeta. */
    .auth-card[b-cw8kqqgbgx]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #304890, #1878c0, #3090c0, #60a8c0);
    }

.auth-brand[b-cw8kqqgbgx] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

    .auth-brand img[b-cw8kqqgbgx] {
        max-height: 11rem;
        max-width: 100%;
    }

.auth-footer[b-cw8kqqgbgx] {
    margin: 1.25rem 0 0;
    font-size: .8rem;
    color: rgba(0, 51, 92, .7);
}

/* Contenido de las páginas (viene por @Body, de ahí el ::deep). */
.auth-card[b-cw8kqqgbgx]  .auth-title {
    margin: 0 0 .35rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--u-blue-900);
}

.auth-card[b-cw8kqqgbgx]  label {
    margin-bottom: .3rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--u-text);
}

.auth-card[b-cw8kqqgbgx]  .form-control {
    height: 42px;
    border-radius: var(--u-radius-sm);
    border-color: var(--u-border-strong);
    background-color: var(--u-surface-alt);
    transition: border-color var(--u-transition), box-shadow var(--u-transition), background-color var(--u-transition);
}

    .auth-card[b-cw8kqqgbgx]  .form-control:focus {
        background-color: #ffffff;
        border-color: var(--u-blue-500);
        box-shadow: 0 0 0 .2rem rgba(43, 140, 224, .2);
    }

/* Etiquetas flotantes (login): se bajan de los 3.5rem de Bootstrap a 3rem, así que hay
   que recolocar los paddings y el desplazamiento del label para que sigan cuadrando. */
.auth-card[b-cw8kqqgbgx]  .form-floating > .form-control {
    height: 3rem;
    min-height: 3rem;
    padding: .75rem .75rem;
}

    .auth-card[b-cw8kqqgbgx]  .form-floating > .form-control:focus,
    .auth-card[b-cw8kqqgbgx]  .form-floating > .form-control:not(:placeholder-shown) {
        padding-top: 1.35rem;
        padding-bottom: .35rem;
    }

.auth-card[b-cw8kqqgbgx]  .form-floating > label {
    margin: 0;
    padding: .75rem .75rem;
    font-weight: 400;
    color: var(--u-text-muted);
}

.auth-card[b-cw8kqqgbgx]  .form-floating > .form-control:focus ~ label,
.auth-card[b-cw8kqqgbgx]  .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--u-blue-700);
    transform: scale(.85) translateY(-.55rem) translateX(.15rem);
}

/* Botón del ojo pegado al campo de contraseña. */
.auth-card[b-cw8kqqgbgx]  .auth-password .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.auth-card[b-cw8kqqgbgx]  .auth-password-toggle {
    display: flex;
    align-items: center;
    padding: 0 .85rem;
    border: 1px solid var(--u-border-strong);
    border-left: 0;
    border-radius: 0 var(--u-radius-sm) var(--u-radius-sm) 0;
    background-color: var(--u-surface-alt);
    color: var(--u-text-muted);
    cursor: pointer;
    transition: color var(--u-transition);
}

    .auth-card[b-cw8kqqgbgx]  .auth-password-toggle:hover {
        color: var(--u-blue-700);
    }

.auth-card[b-cw8kqqgbgx]  .auth-submit {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: var(--u-radius-sm);
    font-weight: 600;
    background: linear-gradient(90deg, var(--u-blue-700), var(--u-blue-600));
    box-shadow: var(--u-shadow-md);
    transition: transform var(--u-transition), box-shadow var(--u-transition), filter var(--u-transition);
}

    .auth-card[b-cw8kqqgbgx]  .auth-submit:hover:not(:disabled) {
        transform: translateY(-1px);
        filter: brightness(1.08);
        box-shadow: 0 8px 20px rgba(0, 90, 163, .25);
    }

.auth-card[b-cw8kqqgbgx]  .auth-links {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    font-size: .875rem;
}

.auth-card[b-cw8kqqgbgx]  .auth-link {
    font-size: .85rem;
    text-decoration: none;
}

    .auth-card[b-cw8kqqgbgx]  .auth-link:hover {
        text-decoration: underline;
    }

.auth-card[b-cw8kqqgbgx]  .alert {
    margin: 1rem 0 0;
    border-radius: var(--u-radius-sm);
    font-size: .875rem;
}

/* Responsive: la card se estrecha y se compacta (padding, logo y título) según baja el
   ancho de pantalla. También por alto, para portátiles pequeños donde con el logo
   grande la card no cabía sin scroll. */
@media (max-width: 991.98px) {
    .auth-container[b-cw8kqqgbgx] {
        max-width: 420px;
    }

    .auth-brand img[b-cw8kqqgbgx] {
        max-height: 9.5rem;
    }
}

@media (max-width: 575.98px) {
    .auth-page[b-cw8kqqgbgx] {
        padding: 1.25rem .75rem;
    }

    .auth-container[b-cw8kqqgbgx] {
        max-width: 360px;
    }

    .auth-card[b-cw8kqqgbgx] {
        padding: 1.75rem 1.25rem 1.5rem;
    }

    .auth-brand[b-cw8kqqgbgx] {
        margin-bottom: 1rem;
    }

        .auth-brand img[b-cw8kqqgbgx] {
            max-height: 7.5rem;
        }

    .auth-card[b-cw8kqqgbgx]  .auth-title {
        font-size: 1.25rem;
    }
}

@media (max-height: 760px) {
    .auth-card[b-cw8kqqgbgx] {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .auth-brand[b-cw8kqqgbgx] {
        margin-bottom: 1rem;
    }

        .auth-brand img[b-cw8kqqgbgx] {
            max-height: 7.5rem;
        }

    .auth-footer[b-cw8kqqgbgx] {
        margin-top: .75rem;
    }
}

/* Va la última para que en móviles pequeños gane también a la regla por alto. */
@media (max-width: 380px) {
    .auth-card[b-cw8kqqgbgx] {
        padding: 1.5rem 1rem 1.25rem;
    }

    .auth-brand img[b-cw8kqqgbgx] {
        max-height: 6.5rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-oxiohjpz9j] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-oxiohjpz9j] {
    flex: 1;
    min-width: 0;
}

.sidebar[b-oxiohjpz9j] {
    background-color: #ffffff;
    width: 200px !important;
    border-right: 1px solid var(--u-border);
}

/* Franja superior: no se pinta, solo reserva el hueco y tapa el contenido que
   pasa por debajo al hacer scroll (es sticky). El panel blanco lo pinta TopRow,
   que va con sus propios margenes para quedar despegado de los bordes. */
.top-row[b-oxiohjpz9j] {
    height: auto;
    display: flex;
    align-items: center;
    padding-top: .75rem !important;
    background-color: var(--u-blue-50);
    border: 0;
}

    .top-row[b-oxiohjpz9j]  a, .top-row[b-oxiohjpz9j]  .btn-link {
        white-space: nowrap;
        text-decoration: none;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-oxiohjpz9j] {
        display: none;
    }

    .top-row.auth[b-oxiohjpz9j] {
        justify-content: space-between;
    }

    .top-row[b-oxiohjpz9j]  a, .top-row[b-oxiohjpz9j]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-oxiohjpz9j] {
        flex-direction: row;
    }

    .sidebar[b-oxiohjpz9j] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-oxiohjpz9j] {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .top-row.auth[b-oxiohjpz9j]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-oxiohjpz9j], article[b-oxiohjpz9j] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Components/Layout/SideBar.razor.rz.scp.css */
/* Cabecera de la barra lateral. El logo es practicamente cuadrado (400x376), asi
   que limitarlo por la altura de la barra superior lo dejaba diminuto: se le da
   un bloque propio y mas alto, sin tocar el ancho de la barra lateral. */
.sidebar-brand[b-8icnfwe32z] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--u-border);
    background-color: #ffffff;
}

.media-img-wrapper[b-8icnfwe32z] {
    max-width: 100%;
    text-align: center;
}

.media-img[b-8icnfwe32z] {
    max-height: 6rem;
    max-width: 100%;
}

.sidebar-nav[b-8icnfwe32z] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.5rem 1rem;
}

.sidebar-section[b-8icnfwe32z] {
    padding: 0 .5rem .25rem;
    color: var(--u-text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Enlaces planos con pastilla azul al pasar por encima, en vez de botones grises */
.sidebar-nav[b-8icnfwe32z]  a.sidebar-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.5rem;
    padding: 0 .75rem;
    border-radius: 10px;
    color: var(--u-text-muted);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

    .sidebar-nav[b-8icnfwe32z]  a.sidebar-link:hover,
    .sidebar-nav[b-8icnfwe32z]  a.sidebar-link.active {
        background-color: var(--u-blue-50);
        color: var(--u-blue-700);
    }

.sidebar-nav[b-8icnfwe32z]  .oi {
    width: 1.25rem;
    font-size: 1rem;
    text-align: center;
}

@media (min-width: 641px) {
    .collapse[b-8icnfwe32z] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* /Components/Layout/TopRow.razor.rz.scp.css */
/* Panel flotante: separado de la barra lateral, del borde superior y del derecho.
   Por abajo no lleva margen porque el espacio ya lo pone el titulo de la pagina. */
.topbar[b-i1rteu9mgr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 3rem;
    padding: .25rem .75rem;
    background-color: #ffffff;
    border: 1px solid var(--u-border);
    border-radius: 12px;
    box-shadow: var(--u-shadow-sm);
}

.topbar-crumbs[b-i1rteu9mgr] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.topbar-actions[b-i1rteu9mgr] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}
/* /Components/Layout/UserButton.razor.rz.scp.css */
.user-button[b-d68w4ofc8n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--u-border);
    border-radius: 50%;
    background-color: var(--u-blue-50);
    color: var(--u-blue-700);
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

    .user-button:hover[b-d68w4ofc8n],
    .user-button:focus[b-d68w4ofc8n] {
        background-color: var(--u-blue-600);
        border-color: var(--u-blue-600);
        color: #fff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 113, 206, .15);
    }

.show-menu[b-d68w4ofc8n] {
    display: block;
}

/* El menu se abre pegado al borde derecho de la pantalla: hay que anclarlo a la
   derecha del boton. La clase .dropdown-menu-end de Bootstrap no basta, porque
   solo hace efecto con el atributo data-bs-popper que anade su JS, y aqui el
   desplegable se abre desde Blazor. */
.dropdown-menu[b-d68w4ofc8n] {
    right: 0;
    left: auto;
    margin-top: .5rem;
    padding: .35rem;
    min-width: 190px;
    border: 1px solid var(--u-border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 51, 92, .16);
}

.user-name[b-d68w4ofc8n] {
    padding: .35rem .75rem .5rem;
    color: var(--u-text-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-menu hr[b-d68w4ofc8n] {
    margin: .35rem .5rem;
    border-color: var(--u-border);
}

.dropdown-item[b-d68w4ofc8n] {
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .92rem;
    color: var(--u-text);
}

    .dropdown-item:hover[b-d68w4ofc8n],
    .dropdown-item:focus[b-d68w4ofc8n] {
        background-color: var(--u-blue-50);
        color: var(--u-blue-800);
    }
/* /Components/Layout/VideoButton.razor.rz.scp.css */
.user-button[b-3ibvul3p9k] {
    margin-left: .5em;
    width: 54px;
}
/* /Components/Pages/Index.razor.rz.scp.css */
