/* Dimensiones del avatar tambien bajo CSP sin estilos en linea. */ #IH .nav-cuenta-boton .avatar-iniciales { width: 28px; height: 28px; font-size: 11px; } #IH .nav-cuenta-panel .avatar-iniciales { width: 56px; height: 56px; font-size: 21px; } #IH img.rounded-circle { object-fit: cover; } .divider {width:100%;height:3rem;background-color:rgba(0,0,0,.1);border:solid rgba(0,0,0,.15);border-width:1px 0;box-shadow:inset 0 .5em 1.5em rgba(0,0,0,.1),inset 0 .125em .5em rgba(0,0,0,.15);} .ajax-action.is-loading, form.ajax-send [type="submit"].is-loading {pointer-events: none;opacity: 0.7;} /* Menu de cuenta: un boton con el logo de la empresa y el avatar, fuera del colapso, compartiendo fila con la marca y la hamburguesa. En movil el ancho es lo escaso -- un logo apaisado a 22 px de alto puede medir 110 y empujar la hamburguesa fuera de la pantalla-; en pantalla grande sobra. Ver menu_cuenta_html() en site-lib.php. */ /* El boton NO cambia de fondo al pasar el raton. Con un logo PNG con transparencia, el relleno solido de `btn-outline-*` se cuela por las zonas transparentes y el logotipo se ve sucio. La respuesta visual va en el BORDE, y el resalte fuerte se reserva para cuando el menu esta abierto (`.show`, que pone Bootstrap) o hay foco de teclado. Se usan variables de Bootstrap y no colores fijos porque el sitio tiene tema claro y oscuro. */ .nav-cuenta-boton {background-color:transparent;color:var(--bs-body-color); border:1px solid var(--bs-border-color);} .nav-cuenta-boton:hover {background-color:transparent;color:var(--bs-body-color); border-color:var(--bs-secondary-color);} .nav-cuenta-boton:focus-visible, .nav-cuenta-boton.show {background-color:transparent;color:var(--bs-body-color); border-color:rgba(var(--bs-primary-rgb),.85); box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.25);} /* AVISOS FLOTANTES -- derecha arriba en escritorio, centro arriba en movil. El sitio se usa mucho desde el telefono y una esquina de 350 px anclada a la derecha en una pantalla de 375 deja dos margenes ridiculos y el texto partido. Centrado y casi a ancho completo se lee de una vez. BAJAN POR DEBAJO DE LA BARRA, EN LAS DOS VISTAS. La barra es `sticky-top` y el contenedor va por encima (z-index 1090), asi que con `top:0` el aviso se le monta -- y en escritorio cae justo sobre el avatar y el menu de cuenta, que es la esquina mas ocupada de la barra. Se tapaba el menu con el mensaje de que la accion habia salido bien. La altura NO se pone a ojo: `--inveo-barra` la mide mensajes.js sobre la barra real. La barra es `py-0` y su alto depende de lo que lleve dentro -- con sesion iniciada crece por el avatar-, asi que cualquier numero fijo acierta en un caso y falla en el otro. El 56px es solo el respaldo por si el JS no llega a correr. */ #inveo-toasts {top:var(--inveo-barra, 56px); right:0; z-index:1090;} @media (max-width:575.98px) { #inveo-toasts { left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:100%; } #inveo-toasts .toast {width:auto; max-width:100%;} } .nav-cuenta-panel {min-width:17rem;} .inveo-marca {position:relative;display:block;width:9.3rem;height:2.25rem;} .inveo-logo,.inveo-logo-motivo {display:block;width:100%;height:100%;object-fit:contain;} .inveo-logo {filter:grayscale(1) brightness(0);} html[data-bs-theme="dark"] .inveo-logo {filter:grayscale(1) brightness(0) invert(1);} .inveo-logo-motivo {position:absolute;inset:0;pointer-events:none;} @media (min-width:992px) {.inveo-marca {width:10.35rem;height:2.5rem;}} .nav-empresa-logo {height:22px;max-width:5rem;object-fit:contain;} /* Sin logo el boton muestra el nombre, asi que necesita su propio tope: un `text-truncate` sin ancho maximo no trunca nada. */ .nav-empresa-nombre {max-width:6rem;display:inline-block;vertical-align:middle;} @media (min-width:992px) { .nav-empresa-logo {max-width:9rem;} .nav-empresa-nombre {max-width:12rem;} } /* LA BARRA EN UN TELEFONO: UNA FILA, NO DOS ----------------------------------------- Con sesion iniciada, lo que va SIEMPRE visible --campana, boton de reporte, empresa + avatar-- mas el logotipo y la hamburguesa suman mas que el ancho de un telefono, asi que la marca se quedaba sola arriba y todo lo demas caia a una segunda fila. Medido en un banco con esta misma barra: a 375 px hacian falta 476 px, o sea 101 de mas. NO SE ESCONDE NADA. Que la empresa activa y el avatar se vean sin abrir ningun menu es una decision de esta barra --esta escrita ahi arriba-- y esconderlas en el telefono la desharia justo donde mas cuesta abrir un menu. Lo que se hace es encoger: el logotipo, el de la empresa y los margenes entre botones. `clamp()` Y NO UN VALOR FIJO POR BREAKPOINT: entre 320 y 575 px hay telefonos de todos los anchos, y un solo numero acierta en uno y falla en el vecino. Con `25vw` la marca se adapta sola; los extremos del `clamp` son el minimo legible y el tamano de siempre. Comprobado en 320, 360, 375, 414 y 768: una fila en todos. De 576 px en adelante no se toca nada, y el escritorio sigue igual. */ @media (max-width:575.98px) { .inveo-marca {width:clamp(4.5rem,25vw,6.5rem);height:1.75rem;} #IH .navbar-brand {margin-right:.25rem!important;} #IH .order-lg-last > .btn, #IH .order-lg-last > .dropdown {margin-left:.125rem!important;margin-right:.125rem!important;} .nav-empresa-logo {max-width:clamp(1.75rem,11vw,2.75rem);} .nav-empresa-nombre {max-width:clamp(3rem,18vw,4.5rem);} #IH .navbar-toggler {padding-left:.375rem;padding-right:.375rem;} } /* LA BANDA DE LOS ACCESOS DIRECTOS Y «Apps» (r52, r54). Ver menu_apps_html() en site-lib.php, que pone `menu-grupo-apps`. SOLO DE 992 px PARA ARRIBA. Por debajo la barra se colapsa, los accesos se ocultan con `d-none d-lg-block` y la banda dejaria una caja suelta alrededor de «Apps» dentro del menu desplegado. Bootstrap no tiene fondos por punto de ruptura, asi que esto no se puede hacer con clases. EL MARGEN Y EL RELLENO SE COMPENSAN, y esa es la parte que hay que respetar al tocarlo: la altura de la barra la fijan estos enlaces --la marca solo mide 40 px de 64--, asi que un margen la haria crecer. Los .25rem que se ganan de aire arriba y abajo son exactamente los .25rem que se le quitan al relleno del enlace (.5rem de Bootstrap -> .25rem). Suma cero: la barra sigue midiendo lo mismo y la banda ya no toca sus bordes. Si se cambia uno de los dos numeros, hay que cambiar el otro. */ @media (min-width: 992px) { #IH .menu-grupo-apps {background-color:var(--bs-secondary-bg); margin-top:.25rem;margin-bottom:.25rem;} #IH .menu-grupo-apps > .nav-link {padding-top:.25rem;padding-bottom:.25rem;} /* EL MISMO REDONDEO QUE EL BOTON DE CUENTA, que es `rounded-pill` --medido en la barra: 179x38 px resolviendo a 19 de radio--. Pasa por la VARIABLE y no por el numero: si Bootstrap o el sitio cambian esa escala, el grupo y el boton siguen coincidiendo en vez de separarse sin que nadie lo note. Es el mismo motivo por el que el fondo usa `var(--bs-secondary-bg)` en vez de un color escrito. Con la banda a 56 px de alto, `50rem` lo recorta el navegador a la mitad de la altura: los extremos quedan semicirculares. LOS EXTREMOS LOS MARCA `menu-grupo-ini` / `menu-grupo-fin` y NO `rounded-start` / `rounded-end`. Las utilidades de Bootstrap se generan con `!important` --comprobado en la hoja que sirve el sitio-- asi que ganaban a esta regla por mucha especificidad que tuviera: la banda se quedaba en los 6 px por defecto mientras el CSS decia otra cosa. Un conflicto que no da error y que una prueba de «existe la propiedad» no ve. */ #IH .menu-grupo-apps.menu-grupo-ini { border-top-left-radius:var(--bs-border-radius-pill); border-bottom-left-radius:var(--bs-border-radius-pill);} #IH .menu-grupo-apps.menu-grupo-fin { border-top-right-radius:var(--bs-border-radius-pill); border-bottom-right-radius:var(--bs-border-radius-pill);} /* Y UN POCO MAS DE AIRE EN LOS EXTREMOS. Con las puntas semicirculares el fondo se retira justo donde estaba el texto, y «GIS» y «Apps» quedaban pegados a la curva. Solo en el borde de fuera: por dentro los elementos siguen contiguos y separarlos partiria la banda. */ #IH .menu-grupo-apps.menu-grupo-ini > .nav-link {padding-left:.75rem;} #IH .menu-grupo-apps.menu-grupo-fin > .nav-link {padding-right:.75rem;} } /* Avatar sin foto: las iniciales del nombre. Ver avatar_html() en function.v6.php. */ .avatar-iniciales {display:inline-flex;align-items:center;justify-content:center; background-color:var(--bs-secondary-bg);color:var(--bs-secondary-color); font-weight:600;line-height:1;letter-spacing:.02em;user-select:none; border:1px solid var(--bs-border-color);vertical-align:middle;}