/* Tema SSO - publicacion 75 - 2026-10-23 17:23:33 - por admin */
:root {
    --gl-base: #F4F6F9;
    --gl-mancha-a: 52, 152, 219;
    --gl-mancha-b: 44, 62, 80;
    --gl-fondo-a: 0.27;
    --gl-fondo-b: 0.35;
    --gl-tinte: 255, 255, 255;
    --gl-blur: 14px;
    --gl-op-borde: 0.65;
    --gl-op-sombra: 0.16;
    --gl-tinte-nav: 0, 107, 214;
    --gl-op-nav: 0.72;
    --gl-texto-nav: 255, 255, 255;
    --gl-blur-nav: 14px;
    --gl-op: 0.41;
    --gl-blur-tarjeta: 14px;
    --gl-tinte-menu: 255, 255, 255;
    --gl-op-menu: 0.00;
    --gl-blur-menu: 38px;
    --gl-tinte-desplegable: 255, 255, 255;
    --gl-op-desplegable: 0.42;
    --gl-blur-desplegable: 27px;
    --gl-tinte-modal: 255, 255, 255;
    --gl-op-modal: 1.00;
    --gl-blur-modal: 11px;
    --gl-texto: 33, 37, 41;
    --gl-tenue: #1D2734;
}

[data-bs-theme="dark"] {
    --gl-base: #0F1419;
    --gl-mancha-a: 93, 173, 226;
    --gl-mancha-b: 74, 111, 165;
    --gl-fondo-a: 0.27;
    --gl-fondo-b: 0.35;
    --gl-tinte: 40, 54, 74;
    --gl-blur: 14px;
    --gl-op-borde: 0.16;
    --gl-op-sombra: 0.16;
    --gl-tinte-nav: 26, 35, 50;
    --gl-op-nav: 0.72;
    --gl-texto-nav: 255, 255, 255;
    --gl-blur-nav: 14px;
    --gl-op: 0.12;
    --gl-blur-tarjeta: 14px;
    --gl-tinte-menu: 40, 54, 74;
    --gl-op-menu: 0.00;
    --gl-blur-menu: 38px;
    --gl-tinte-desplegable: 40, 54, 74;
    --gl-op-desplegable: 0.00;
    --gl-blur-desplegable: 38px;
    --gl-tinte-modal: 40, 54, 74;
    --gl-op-modal: 0.53;
    --gl-blur-modal: 14px;
    --gl-texto: 233, 236, 239;
    --gl-tenue: #E5E8EC;
}

/* Estructura del vidrio del SSO: las reglas, SIN los valores del catálogo.

   Los valores (desenfoque, tintes, opacidades, colores del fondo) los
   configura el super-admin en Estilos y los emite TemaCss delante de este
   archivo. Aquí solo se usan con var(--gl-*).

   Borde y sombra: el color es fijo (un brillo blanco y una sombra negra) y lo
   que se configura es su intensidad, con op_borde y op_sombra. La geometría de
   la sombra tampoco se toca: mover desplazamiento y radio desde el panel es
   ruido, y la intensidad es lo que de verdad cambia el aspecto. */

:root {
    --gl-borde:  rgba(255, 255, 255, var(--gl-op-borde));
    --gl-sombra: 0 12px 36px rgba(0, 0, 0, var(--gl-op-sombra));
}

/* ============================================================
   Fondo de marca
   ============================================================
   En un pseudo-elemento fijo, no con background-attachment: fixed —
   iOS Safari lo ignora y, junto a backdrop-filter, fuerza repintados
   del area completa. */
body {
    background-color: var(--gl-base) !important;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* rgba() con tripleta, no color-mix(): esta forma esta verificada
       renderizada en el laboratorio de ajuste, y no depende del soporte
       de color-mix ni de aceptar una variable como porcentaje. */
    background:
        radial-gradient(60% 55% at 12% 8%,
            rgba(var(--gl-mancha-a), var(--gl-fondo-a)), transparent 62%),
        radial-gradient(55% 55% at 88% 94%,
            rgba(var(--gl-mancha-b), var(--gl-fondo-b)), transparent 62%);
}

/* ============================================================
   Superficies de vidrio
   ============================================================
   `bg-white` de Bootstrap lleva !important, asi que pisarlo exige
   !important tambien. Es el mismo motivo que ya documenta theme.css. */

.card,
.alert {
    background-color: rgba(var(--gl-tinte), var(--gl-op)) !important;
    -webkit-backdrop-filter: blur(var(--gl-blur-tarjeta)) saturate(170%);
    backdrop-filter: blur(var(--gl-blur-tarjeta)) saturate(170%);
    border: 1px solid var(--gl-borde);
    box-shadow: var(--gl-sombra);
}

/* El header de la card comparte el vidrio del contenedor en vez de
   pintar el suyo: dos capas translucidas apiladas se ven sucias. */
.card-header,
.card-body,
.card-footer {
    background-color: transparent !important;
}

/* La tabla vive dentro de una card que ya pone el vidrio. Si la tabla
   pintara su propio fondo lo taparia. Las filas alternas de Bootstrap
   dejan de marcarse sobre vidrio; la linea inferior las sustituye. */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-accent-bg: transparent;
}

/* Modales: el .modal-backdrop de Bootstrap oscurece el fondo al 50%, asi
   que aqui el tinte es mayor. Medido: con --gl-op el texto tenue caia a
   2,52:1 en tema claro. */
.modal-content {
    background-color: rgba(var(--gl-tinte-modal), var(--gl-op-modal)) !important;
    -webkit-backdrop-filter: blur(var(--gl-blur-modal)) saturate(170%);
    backdrop-filter: blur(var(--gl-blur-modal)) saturate(170%);
    border: 1px solid var(--gl-borde);
}

/* Campos y selects. La lista que despliega un <select> la dibuja el
   sistema operativo y CSS no la alcanza: esto solo afecta a la caja. */
.form-control,
.form-select {
    background-color: rgba(var(--gl-tinte-menu), var(--gl-op-menu));
    -webkit-backdrop-filter: blur(var(--gl-blur-menu));
    backdrop-filter: blur(var(--gl-blur-menu));
}

/* El texto base de la interfaz. Lo fijaba Bootstrap y no habia forma de
   aclararlo cuando el vidrio salia oscuro. Se declara la tripleta ademas del
   color porque varios componentes de Bootstrap derivan de --bs-body-color-rgb.
   Va en :root para que el bloque oscuro del tema, que redefine --gl-texto en el
   mismo elemento y se emite despues, lo arrastre sin repetir la regla. */
:root {
    --bs-body-color: rgb(var(--gl-texto));
    --bs-body-color-rgb: var(--gl-texto);
}

/* El texto tenue corregido. Solo aqui: extenderlo a todo el panel es
   otra decision, con su propia revision (ver spec, punto 8). */
.text-muted {
    color: var(--gl-tenue) !important;
}

/* Los lienzos de las graficas y el QR del 2FA quedan opacos: el fondo
   translucido les resta definicion. El QR se inyecta por JS como SVG
   dentro de #qrBox (ver admin_2fa_setup.php:101), no como <img>. */
canvas,
#qrBox svg {
    background-color: var(--gl-base);
}

/* ============================================================
   La navbar
   ============================================================
   Su gradiente lo pone la clase .panel-nav de theme.css, que en oscuro lleva
   !important. Un gradiente es background-image y se pinta ENCIMA del
   background-color, asi que hay que retirarlo o el vidrio no se ve por mucho
   background-color que se declare.

   Lleva tinte propio y oscuro en los dos temas: ver --gl-tinte-nav. */
.navbar,
[data-bs-theme="dark"] .panel-nav {
    background-image: none !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--gl-borde);
    box-shadow: var(--gl-sombra);
    /* Contexto de apilamiento para el ::before de abajo, que va con
       z-index: -1. Tiene que ser con isolation: declarar position o z-index
       aqui romperia .sticky-top, que Bootstrap define sin !important y esta
       hoja se emite despues. isolation NO crea backdrop root (comprobado en
       produccion), asi que el desplegable sigue desenfocando. */
    isolation: isolate;
}

/* El vidrio de la barra se pinta en el pseudoelemento, no en la barra.
   Un elemento con backdrop-filter se convierte en «backdrop root»: sus
   descendientes solo pueden desenfocar lo que haya dentro de el. Con el filtro
   en .navbar, el .dropdown-menu que cuelga de ella no desenfocaba nada — el
   mismo menu colgado del body si lo hacia (comprobado el 2026-09-25). El
   ::before no es antecesor del menu, asi que la barra conserva su vidrio y el
   desplegable recupera el suyo. */
.navbar::before,
[data-bs-theme="dark"] .panel-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: rgba(var(--gl-tinte-nav), var(--gl-op-nav));
    -webkit-backdrop-filter: blur(var(--gl-blur-nav)) saturate(170%);
    backdrop-filter: blur(var(--gl-blur-nav)) saturate(170%);
}

/* El texto de la barra. Bootstrap lo fija en blanco con navbar-dark, asi que
   aclarar el tinte dejaba el texto ilegible y sin arreglo posible. Ahora sale
   de --gl-texto-nav, por las propias variables de Bootstrap para que marca,
   enlaces, activo y toggler vayan juntos. La jerarquia se mantiene: marca y
   vista activa a plena intensidad, enlaces al 75%. */
.navbar {
    --bs-navbar-color: rgba(var(--gl-texto-nav), 0.75);
    --bs-navbar-hover-color: rgb(var(--gl-texto-nav));
    --bs-navbar-active-color: rgb(var(--gl-texto-nav));
    --bs-navbar-brand-color: rgb(var(--gl-texto-nav));
    --bs-navbar-brand-hover-color: rgb(var(--gl-texto-nav));
    --bs-navbar-toggler-border-color: rgba(var(--gl-texto-nav), 0.25);
    color: rgb(var(--gl-texto-nav));
}

/* El icono de la hamburguesa es un SVG blanco incrustado en el CSS de
   Bootstrap: con una barra clara desaparecia. Se pinta por mascara para que
   tome el color del token; el fondo deja de existir y el color lo da el
   background-color a traves del recorte. */
.navbar .navbar-toggler-icon {
    background-image: none;
    background-color: rgba(var(--gl-texto-nav), 0.75);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
}

/* Los desplegables. Compartieron los tokens de los campos mientras fueron el
   mismo mando; desde el 2026-09-25 tienen los suyos, que heredan de los de
   campos, asi que el aspecto no cambia hasta que se toquen. */
.dropdown-menu {
    background-color: rgba(var(--gl-tinte-desplegable), var(--gl-op-desplegable));
    -webkit-backdrop-filter: blur(var(--gl-blur-desplegable)) saturate(170%);
    backdrop-filter: blur(var(--gl-blur-desplegable)) saturate(170%);
    border: 1px solid var(--gl-borde);
    box-shadow: var(--gl-sombra);
}

/* ============================================================
   Recuperar el vidrio donde theme.css gana por especificidad
   ============================================================
   theme.css pinta el tema oscuro con selectores MAS especificos que los
   de arriba y con !important: `.card.bg-white`, `.bg-white.shadow-sm`,
   `.bg-light:not(.badge)`... La especificidad gana al orden de carga, asi
   que ir despues no basta: sin esto, en oscuro las tarjetas quedaban
   opacas (medido: rgb(28,36,52) en vez de translucidas) y el efecto
   sencillamente no aparecia. Se repiten aqui esos mismos selectores. */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card.bg-white,
[data-bs-theme="dark"] .bg-white.shadow-sm,
[data-bs-theme="dark"] .bg-white.rounded-4,
[data-bs-theme="dark"] .bg-white.p-4,
[data-bs-theme="dark"] .bg-light:not(.badge),
[data-bs-theme="dark"] .plat-card,
[data-bs-theme="dark"] .login-container .card,
[data-bs-theme="dark"] .alert {
    background-color: rgba(var(--gl-tinte), var(--gl-op)) !important;
}
[data-bs-theme="dark"] .card-header.bg-white {
    background-color: transparent !important;
}
[data-bs-theme="dark"] .modal-content {
    background-color: rgba(var(--gl-tinte-modal), var(--gl-op-modal)) !important;
}
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
}

/* ============================================================
   Degradacion
   ============================================================
   Cuando no hay desenfoque, se cae a fondo SOLIDO opaco, no a un
   translucido sin desenfocar: eso ultimo es justo lo que se ve mal.
   El gradiente del fondo se queda en ambos casos, no depende del blur. */

@supports not (backdrop-filter: blur(1px)) {
    .card, .navbar, .alert, .modal-content {
        background-color: var(--gl-base) !important;
    }
    .form-control, .form-select {
        background-color: var(--gl-base);
    }
}

/* Quien pide menos transparencia en su sistema suele tener un motivo
   medico: el efecto se desactiva entero, no se atenua. */
@media (prefers-reduced-transparency: reduce) {
    .card, .navbar, .alert, .modal-content {
        background-color: var(--gl-base) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .form-control, .form-select {
        background-color: var(--gl-base);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}