﻿/**
* Estilos CSS para tooltips de lenguaje de señas en SharePoint
*
* INSTRUCCIONES DE USO:
* Agregar este CSS en el <head> del masterpage, dentro de un tag <style>
*/

/* Estilos para tooltips de lenguaje de señas */
.nav-item {
position: relative;
}

.nav-item .nav-link {
position: relative;
}

.sign-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
margin-bottom: 10px;
pointer-events: none;
z-index: 1000;
white-space: nowrap;
}

.sign-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #fff;
}

.sign-tooltip img {
max-width: 150px;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background: white;
padding: 4px;
display: block;
}

/* Mostrar tooltip solo en el ítem específico al hacer hover */
.nav-item.has-sign-tooltip:hover .nav-link .sign-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-5px);
}

/* Asegurar que dropdowns también funcionen */
.nav-item.has-sign-tooltip.dropdown:hover .nav-link .sign-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-5px);
}

/* Prevenir que otros tooltips se muestren accidentalmente */
.nav-item:not(:hover) .sign-tooltip {
opacity: 0 !important;
visibility: hidden !important;
}

/* Z-index muy alto para dropdowns y megamenús */
.navbar-nav .dropdown-menu,
.navbar-nav .megamenu-menu-govco,
.navbar-menu-govco .dropdown-menu,
.navbar-menu-govco .megamenu-menu-govco {
z-index: 999999 !important;
}

/* Para el navbar completo cuando hay dropdowns abiertos */
.navbar-menu-govco {
position: relative;
}