/* prettier-ignore */

/* SPA Container Anchor (Limpiado) */

/* SPA Top Progress Bar (Azul Primario - Sticky exacto) */
#sgr-top-progress {
    display: block;
    position: sticky;
    top: var(--phoenix-navbar-top-height, 60px);
    margin-top: calc(-1 * var(--phoenix-navbar-top-height, 60px));
    margin-bottom: calc(var(--phoenix-navbar-top-height, 60px) - 5px);
    margin-left: -2.5rem;
    /* Neutraliza el padding-left de .content */
    width: 0%;
    height: 5px;
    background-color: var(--phoenix-primary, #3874ff);
    z-index: 1050;
    transition: width 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    opacity: 0;
}

#sgr-top-progress.sgr-loading {
    opacity: 1;
    width: 75%;
    transition: width 10s cubic-bezier(0.1, 0.5, 0.5, 1), opacity 0.1s ease;
}

#sgr-top-progress.sgr-done {
    opacity: 0;
    width: calc(100% + 5rem);
    /* Cubre el padding izquierdo y derecho de 2.5rem */
    transition: width 0.3s ease, opacity 0.4s ease 0.2s;
}

/* SPA Overlay Attenuation */
.spa-content-blur {
    filter: blur(1px) grayscale(10%);
    opacity: 0.7;
    pointer-events: none;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Pagination Hover Enhancement for Phoenix List.js */
.pagination .page:not([disabled]):hover {
    background-color: rgba(148, 158, 171, 0.15);
    color: var(--phoenix-primary, #3874ff);
}

.pagination li.active .page:hover {
    background-color: var(--phoenix-primary, #3874ff);
    color: #fff;
}

/* Ocultar el "ojo" nativo de revelar contraseña que inyecta Edge/IE (::-ms-reveal)
   y el botón de limpiar (::-ms-clear). NO viene del HTML del proyecto: lo agrega el
   navegador en cada input[type=password], y como nosotros ya tenemos nuestro propio
   toggle (#togglePassword), aparecía DUPLICADO. Aplica a login, reset/cambio de
   contraseña, perfil, etc. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* ==========================================================================
   TIPOGRAFÍA Y LEGIBILIDAD (Igualar a SGR 1rem = 16px)
   ========================================================================== */

/* 1. Reescalar la clase de utilidad fs-9 (usada masivamente en tablas y UI) de 0.8rem a 1rem */
/* .fs-9 {
    font-size: 1rem !important;
} */

/* 2. Igualar los enlaces del sidebar vertical (navbar-vertical) a 1rem */
.navbar-vertical .navbar-vertical-content .navbar-nav {
    /* font-size: 1rem !important;
} */

    /* 3. Reescalar fs-10 (textos muy diminutos) a algo más legible (ej. 0.875rem = 14px) */
    /* .fs-10 {
    font-size: 0.875rem !important;
} */

    /* 4. Asegurar que las etiquetas del sidebar sean legibles */
    /* .navbar-vertical .navbar-vertical-content .navbar-vertical-label {
    font-size: 0.75rem !important;
} */

    /* 5. Inputs y Textos de Formulario (incluyendo form-floating) */
    /* .form-control,
.form-select {
    font-size: 1rem !important;
} */

    .form-floating>label {
        font-size: 0.9rem !important;
        font-weight: 400 !important;
        color: var(--phoenix-tertiary-color, #8a94ad) !important;
    }

    .form-label {
        font-size: 0.875rem !important;
    }

    /* 6. Reescalar el contenedor form-floating para que no aplaste el texto */
    .form-floating>.form-control,
    .form-floating>.form-control-plaintext,
    .form-floating>.form-select {
        height: calc(3.5rem + 2px) !important;
        min-height: calc(3.5rem + 2px) !important;
        font-weight: 600 !important;
        /* Resaltar el texto ingresado por el usuario */
    }

    /* 7. Ajustar la posición de la etiqueta flotante cuando hay texto */
    .form-floating>.form-control:focus~label,
    .form-floating>.form-control:not(:placeholder-shown)~label,
    .form-floating>.form-control-plaintext~label,
    .form-floating>.form-select~label {
        transform: scale(0.75) translateY(-0.6rem) translateX(0.15rem) !important;
        color: var(--phoenix-tertiary-color, #8a94ad) !important;
    }