/* ========================================================================== UPN Menu Sign Language GP — Estilos frontend ========================================================================== */ /* -------------------------------------------------------------------------- Tooltips GIF (navbar) -------------------------------------------------------------------------- */ /* Wrapper del item de menú necesita position relative para anclar el tooltip */ .sign-language-tooltip { position: absolute; padding: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); pointer-events: none; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease; } .sign-language-tooltip.is-visible { opacity: 1; visibility: visible; } .sign-language-gif { display: block; max-width: 200px; max-height: 160px; border-radius: 4px; } /* Flechita superior del tooltip (apunta hacia el navbar) */ .sign-language-tooltip::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #fff; } .sign-language-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-bottom-color: #e2e8f0; margin-bottom: 1px; } /* Dark mode — si el tema aplica clase .dark en */ .dark .sign-language-tooltip { background: #1e293b; border-color: #334155; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .dark .sign-language-tooltip::after { border-top-color: #1e293b; } .dark .sign-language-tooltip::before { border-top-color: #334155; } /* -------------------------------------------------------------------------- Menú acordeón -------------------------------------------------------------------------- */ .upn-accordion-nav { width: 100%; } .upn-accordion-menu { list-style: none; margin: 0; padding: 0; } /* Item base */ .upn-accordion-item { border-bottom: 1px solid #e2e8f0; } .upn-accordion-item:last-child { border-bottom: none; } /* Toggle (item padre) */ .upn-accordion-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; background: transparent; border: none; cursor: pointer; font-size: 0.95rem; font-weight: 600; color: #1e293b; text-align: left; transition: background 0.15s ease, color 0.15s ease; } .upn-accordion-toggle:hover, .upn-accordion-toggle:focus-visible { background: #f1f5f9; outline: none; } .upn-accordion-toggle--active { color: #001c7c; } /* Icono chevron */ .upn-accordion-icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; transition: transform 0.2s ease; } .upn-accordion-toggle[aria-expanded="true"] .upn-accordion-icon { transform: rotate(180deg); } /* Link (item hoja) */ .upn-accordion-link { display: block; padding: 12px 16px; font-size: 0.95rem; color: #1e293b; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .upn-accordion-link:hover, .upn-accordion-link:focus-visible { background: #f1f5f9; color: #001c7c; outline: none; } .upn-accordion-link--active { color: #001c7c; font-weight: 600; } /* Submenu (hijos) */ .upn-accordion-submenu { list-style: none; margin: 0; padding: 0; background: #f8fafc; border-top: 1px solid #e2e8f0; overflow: hidden; } .upn-accordion-submenu .upn-accordion-item { border-bottom: 1px solid #e8edf2; } .upn-accordion-submenu .upn-accordion-item:last-child { border-bottom: none; } .upn-accordion-submenu .upn-accordion-link { padding-left: 28px; font-size: 0.9rem; font-weight: 400; color: #475569; } .upn-accordion-submenu .upn-accordion-link:hover, .upn-accordion-submenu .upn-accordion-link:focus-visible { background: #eff6ff; color: #001c7c; } .upn-accordion-submenu .upn-accordion-link--active { color: #001c7c; font-weight: 600; } /* Animación de apertura/cierre */ .upn-accordion-submenu[hidden] { display: block !important; /* sobrescribe hidden para animar */ max-height: 0; visibility: hidden; transition: max-height 0.25s ease, visibility 0.25s ease; } .upn-accordion-submenu.is-open { max-height: 600px; visibility: visible; transition: max-height 0.3s ease, visibility 0.3s ease; } /* Dark mode */ .dark .upn-accordion-toggle { color: #e2e8f0; } .dark .upn-accordion-toggle:hover, .dark .upn-accordion-toggle:focus-visible { background: #1e293b; } .dark .upn-accordion-toggle--active { color: #93c5fd; } .dark .upn-accordion-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E"); } .dark .upn-accordion-link { color: #e2e8f0; } .dark .upn-accordion-link:hover, .dark .upn-accordion-link:focus-visible { background: #1e293b; color: #93c5fd; } .dark .upn-accordion-link--active { color: #93c5fd; } .dark .upn-accordion-submenu { background: #0f172a; border-top-color: #334155; } .dark .upn-accordion-item { border-bottom-color: #334155; } .dark .upn-accordion-submenu .upn-accordion-link { color: #94a3b8; } .dark .upn-accordion-submenu .upn-accordion-link:hover, .dark .upn-accordion-submenu .upn-accordion-link:focus-visible { background: #1e293b; color: #93c5fd; }