/* ==========================================================================
   EdiPort — el único CSS propio de la aplicación.

   La interfaz es Fluent UI Blazor + Bootstrap 5.3. Aquí sólo va lo que
   ninguno de los dos cubre, cada regla con su porqué:
     - los colores de la marca en las variables de Bootstrap;
     - preloader, bloque del usuario y margen del encabezado (marco);
     - panel desplazable de las tablas, con los bordes que avisan que continúan.
   No hay JavaScript propio: nada aquí depende de clases que ponga un script.
   ========================================================================== */

/* ==========================================================================
   Marca en Bootstrap: "primary" es el azul claro del logo (#009BDE) y su
   versión enfática el oscuro (#002E6D), los mismos de Core/AppTheme.cs. Así
   text-bg-primary, bg-primary-subtle, border-primary, text-primary y los
   radios / listas activas de Bootstrap salen en los azules de la empresa. Es la
   personalización por variables CSS que documenta Bootstrap 5.3; en oscuro se
   redefinen las variantes suaves, como hace el propio Bootstrap.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    --bs-primary: #009bde;
    --bs-primary-rgb: 0, 155, 222;
    --bs-primary-text-emphasis: #002e6d;
    --bs-primary-bg-subtle: #cceaf8;
    --bs-primary-border-subtle: #99d7f2;
    --bs-link-color: #0077ab;
    --bs-link-color-rgb: 0, 119, 171;
    --bs-link-hover-color: #002e6d;
    --bs-link-hover-color-rgb: 0, 46, 109;
}

[data-bs-theme="dark"] {
    --bs-primary-text-emphasis: #66c3eb;
    --bs-primary-bg-subtle: #001f2c;
    --bs-primary-border-subtle: #005d85;
    --bs-link-color: #66c3eb;
    --bs-link-color-rgb: 102, 195, 235;
    --bs-link-hover-color: #99d7f2;
    --bs-link-hover-color-rgb: 153, 215, 242;
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ==========================================================================
   Preloader (index.html + Shared/LoadingPanel.razor)
   Réplica del preloader del portal original: fondo azul Hutchison y el logo
   "vacío" (contorno) que se va llenando con el logo "lleno". Ni Fluent UI ni
   Bootstrap tienen una barra de progreso con forma de imagen, por eso es CSS
   propio; la posición y el centrado son utilidades de Bootstrap.

   Sin JavaScript:
     - la barra avanza con una animación que frena cerca del final (el runtime
       no informa progreso real, como tampoco lo hacía el contador original);
     - el preloader se ve mientras #app esté vacío (baja el runtime) o haya un
       LoadingPanel (.ediport-loading) en la página, y se desvanece en cuanto
       no queda ninguno: marco pintado, o página sin marco con contenido. El
       LoadingPanel no muestra texto: los mensajes de cada paso describían el
       flujo de autenticación;
     - si Blazor muestra su aviso de error, el preloader se retira para no
       taparlo.
   ========================================================================== */
.ediport-preloader {
    z-index: 1070;
    background: linear-gradient(90deg, #002e6d 10%, #002353 90%);
    transition: opacity .65s ease, visibility 0s linear .65s;
}

.ediport-preloader-progress {
    width: 252px;
    height: 67px;
    background: url("../assets/img/preloader/preloader.empty.png") left center / 252px 67px no-repeat;
}

.ediport-preloader-bar {
    width: 0;
    background: url("../assets/img/preloader/preloader.full.png") left center / 252px 67px no-repeat;
    animation: ediport-preloader-fill 8s cubic-bezier(.15, .7, .3, 1) forwards;
}

@keyframes ediport-preloader-fill {
    to { width: 95%; }
}

body:not(:has(#app:empty)):not(:has(.ediport-loading)) .ediport-preloader,
body:has(#blazor-error-ui[style*="block"]) .ediport-preloader {
    opacity: 0;
    visibility: hidden;
}

/* ==========================================================================
   Bloque del usuario (AppShell): fondo del portal original en modo claro.
   En oscuro queda el bg-body-secondary de Bootstrap que trae el elemento.
   ========================================================================== */
[data-bs-theme="light"] .ediport-user-block {
    background: url("../assets/img/user-bg.jpg") left top / cover no-repeat;
}

/* ---- Foco tras navegar ----
   FocusOnNavigate (App.razor) enfoca el h1 de cada página para los lectores de
   pantalla; sin esta regla el navegador le dibuja un recuadro. Es la misma que
   trae la plantilla de Blazor. */
h1:focus {
    outline: none;
}

/* ==========================================================================
   Encabezado (Layout/HeaderComponent.razor): márgenes laterales
   FluentHeader envuelve su contenido en .header-gutters con margin: .5rem
   1.5rem. Ningún parámetro de Fluent ni utilidad de Bootstrap lo cubre
   (Bootstrap 5 no trae márgenes negativos).
     - Derecha: esos 24px dejaban un hueco detrás de los tres puntos.
     - Izquierda: .5rem SIEMPRE, con el menú expandido, colapsado o en móvil,
       para que el botón del menú no cambie de lugar y quede sobre la columna
       de iconos del menú lateral. La zona del logo lo descuenta
       (AppTheme.NavWidth - .5rem).
   La especificidad (elemento + dos clases) le gana a la regla con ámbito de
   Fluent, que se carga después que este archivo.
   ========================================================================== */
header.header.ediport-header .header-gutters {
    margin-left: .5rem;
    margin-right: .25rem;
}

/* Zona del logo con el menú expandido (o abierto en móvil): el ancho del menú
   menos el margen de .header-gutters, para que la búsqueda empiece donde
   termina el menú. La medida la pone HeaderComponent en --ediport-brand-width (a partir
   de AppTheme.NavWidth); !important le gana al width en línea de FluentStack.
   Con el menú colapsado (o cerrado en móvil) la zona se ajusta al botón y al
   logo mínimo, y le deja el espacio al término buscado. */
@media (max-width: 767.98px) {
    .ediport-brand-wide {
        width: var(--ediport-brand-width) !important;
    }
}

@media (min-width: 768px) {
    .ediport-brand-wide-md {
        width: var(--ediport-brand-width) !important;
    }
}

/* ==========================================================================
   Tablas de Liberaciones y Usuarios: panel desplazable (.ediport-table-pane)
   La tabla vive en su propio panel con alto acotado. Hace falta por dos cosas:
     - Virtualize toma como contenedor de desplazamiento el ancestro con
       overflow más cercano, que es este panel (table-responsive ya lo tiene en
       horizontal, y un eje con overflow arrastra al otro); sin alto acotado el
       panel crecería con la tabla y Virtualize creería que todo está a la
       vista;
     - así la barra de desplazamiento horizontal queda siempre al pie de la
       ventana, no miles de píxeles abajo, y el encabezado (sticky-top) fijo.
   El alto descuenta encabezado, barra de herramientas y pie de la aplicación.

   Desvanecido con flecha en el borde por el que la tabla continúa, sin
   JavaScript: técnica de "sombras de desplazamiento". Las dos primeras capas
   (attachment: local) viajan con el contenido y tapan la sombra y la flecha
   del lado en el que no queda nada; las demás (scroll) se quedan en el borde
   del panel. Para que se vean, el cuerpo de la tabla es transparente
   (--bs-table-bg); el encabezado conserva su fondo porque es fijo.
   ========================================================================== */
.ediport-table-pane {
    max-height: calc(100dvh - 12rem);
    min-height: 16rem;
    background:
        linear-gradient(to right, var(--bs-body-bg) 1.75rem, rgba(var(--bs-body-bg-rgb), 0)) left center / 3rem 100% no-repeat local,
        linear-gradient(to left, var(--bs-body-bg) 1.75rem, rgba(var(--bs-body-bg-rgb), 0)) right center / 3rem 100% no-repeat local,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%236c757d' d='M34.5 239L228.9 44.7c9.4-9.4 24.6-9.4 33.9 0l22.7 22.7c9.4 9.4 9.4 24.5 0 33.9L131.5 256l154 154.8c9.3 9.4 9.3 24.5 0 33.9l-22.7 22.7c-9.4 9.4-24.6 9.4-33.9 0L34.5 273c-9.4-9.4-9.4-24.6 0-34z'/%3E%3C/svg%3E") left .4rem center / .6rem no-repeat scroll,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%236c757d' d='M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 34z'/%3E%3C/svg%3E") right .4rem center / .6rem no-repeat scroll,
        linear-gradient(to right, rgba(var(--bs-body-color-rgb), .2), rgba(var(--bs-body-color-rgb), 0)) left center / 1.75rem 100% no-repeat scroll,
        linear-gradient(to left, rgba(var(--bs-body-color-rgb), .2), rgba(var(--bs-body-color-rgb), 0)) right center / 1.75rem 100% no-repeat scroll,
        var(--bs-body-bg);
}

/* En Liberaciones el desvanecido se aplica a la región desplazable de toda la
   página, que ya tiene su alto (el resto de la ventana): sin alto acotado. */
.ediport-table-pane.ediport-scroll-region {
    max-height: none;
    min-height: 0;
}

/* Encabezado fijo un píxel más arriba: con border-collapse (table-bordered) el
   borde superior de las celdas queda fuera de su fondo, y por esa franja de
   1 px se veían los renglones al desplazarse. */
.ediport-table-pane > .table > thead.sticky-top {
    top: -1px;
}

.ediport-table-pane > .table > tbody {
    --bs-table-bg: transparent;
}

/* Renglón bajo el mouse (table-hover) en un tono de la marca: el gris de
   Bootstrap (7.5 %) casi no se distingue de las franjas de table-striped. */
.ediport-table-pane > .table {
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .15);
}

/* ==========================================================================
   Tarjetas de Liberaciones: resaltado al pasar el mouse
   Bootstrap no trae estado :hover para .card (la tabla sí: table-hover). Se
   eleva la sombra (de shadow-sm a la normal) y el borde toma el azul de la
   marca. !important porque shadow-sm y border-* de Bootstrap también lo usan.
   ========================================================================== */
.ediport-reo-card {
    transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}

.ediport-reo-card:hover {
    box-shadow: var(--bs-box-shadow) !important;
    border-color: var(--bs-primary) !important;
}