/* =========================================================================== nv-totop — botón flotante "volver arriba" del área pública y de cliente. El panel admin ya tenía el suyo (#back-to-top en admin_nova); el tema nova no tenía ninguno, ni para visitante ni para cliente. ORDEN de la pila (esquina inferior derecha, tema nova): 1º (esquina) el chat de IA ........ 22px (ai-widget.css) — PERMANENTE 2º accesibilidad .................. 92px (nv-a11y.css) — PERMANENTE 3º volver arriba .................. 162px ← aquí — TRANSITORIO Los dos permanentes (chat + accesibilidad) quedan pegados abajo y no se mueven. Este botón es transitorio (sólo con scroll) y va ENCIMA de ambos, en el último slot — no intercalado en el medio. Al no estar visible, simplemente no ocupa el 3er slot (la pila fija termina en accesibilidad, sin hueco huérfano). Si la IA está deshabilitada no hay chat: accesibilidad baja a la esquina (22) y éste al 2º slot (92) — lo señala `nv-ai-present`, que pone ai-widget.js al revelar la burbuja. =========================================================================== */ .nv-totop { position: fixed; inset-inline-end: 22px; inset-block-end: 92px; /* 3er slot: encima de accesibilidad (sin IA, ésta en la esquina) */ z-index: 1039; /* justo bajo la burbuja de IA (1040) */ width: 56px; height: 56px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; /* Mismo lenguaje visual que los otros dos FABs de la pila (Salomé y accesibilidad): círculo relleno con el gradiente de marca + sombra compartida, para que los tres lean como un set unificado. */ /* Solid cyan marketing (fallback fijo #0891B2 = igual en guest y cliente, donde --color-cyan puede no estar definido) → widgets consistentes en todas las vistas, mismo tono que los botones .btn-primary del sitio. */ background: var(--color-cyan, #0891B2); color: #fff; box-shadow: var(--nvm-shadow-lg, 0 12px 28px rgba(18, 38, 63, .28)); /* Oculto hasta que haya scroll: el JS quita [hidden]. La transición se aplica igual para que la aparición no sea un salto. */ opacity: 1; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; } /* Con el chat presente: chat 22 + accesibilidad 92 debajo → este va en el 3er y último slot, por encima de ambos. Es transitorio (sólo con scroll); al no estar, simplemente no ocupa nada arriba (no deja hueco, la pila fija termina en a11y). */ html.nv-ai-present .nv-totop { inset-block-end: 162px; } .nv-totop[hidden] { display: none; } .nv-totop:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(18, 38, 63, .26); } .nv-totop:focus-visible { outline: 3px solid var(--nv-cyan, #2bb3c0); outline-offset: 3px; } .nv-totop svg { width: 24px; height: 24px; } /* Mientras el chat de IA está abierto se aparta, igual que hace el FAB de accesibilidad (nv-a11y.css), para no tapar la conversación. */ html.nv-ai-panel-open .nv-totop { display: none; } @media (prefers-reduced-motion: reduce) { .nv-totop { transition: none; } .nv-totop:hover { transform: none; } } /* Modo oscuro: el tema conmuta con data-bs-theme (Bootstrap) sobre y — ver layout_default.html.twig. Es el mismo selector que usa el resto del tema (ai-widget.css, custom-nv-profile.css…). */ [data-bs-theme="dark"] .nv-totop { /* Conserva el gradiente de marca (igual que los otros FABs); sólo refuerza la sombra en oscuro. */ box-shadow: 0 12px 28px rgba(0, 0, 0, .5); }