/* * contextual-help.css * ============================================================ * Cargado por: templates/base.html (bloque de la plantilla base, * con cache-bust "?v=20260801-uxh-p1"), por lo que se aplica en TODAS * las páginas del panel que extienden base.html. * Componente que estiliza: el widget de "ayuda contextual" -- un botón * circular con "?" que, al pasar el cursor o enfocarlo, muestra un * globo/tooltip flotante con una explicación breve del control o * sección junto al que aparece. También incluye estilos para el * encabezado combinado con este botón (.heading-with-help) y para el * aviso de "consecuencia de la acción" (.action-consequence) que * advierte sobre efectos irreversibles antes de una operación. * ============================================================ */ /* Contenedor del widget completo: se posiciona en línea junto al texto al que acompaña, y sirve de referencia ("position: relative") para posicionar el globo flotante mediante variables CSS calculadas en JS (--help-left / --help-top, ver más abajo). */ .contextual-help { display: inline-flex; flex: 0 0 auto; position: relative; vertical-align: middle; } /* Botón circular "?" que dispara la ayuda. cursor: help indica al usuario que es un disparador de información, no una acción. */ .contextual-help-trigger { align-items: center; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); cursor: help; display: inline-flex; font: 800 10px/1 system-ui, sans-serif; height: 23px; justify-content: center; margin: 0; min-height: 23px; min-width: 23px; padding: 0; width: 23px; } /* Estado activo del botón: se resalta en verde cuando el usuario pasa el cursor, lo enfoca por teclado, o cuando el globo ya está abierto (atributo data-open="true" puesto por JS) -- así el botón permanece "encendido" mientras el tooltip sigue visible, no solo en :hover. */ .contextual-help-trigger:hover, .contextual-help-trigger:focus-visible, .contextual-help[data-open="true"] .contextual-help-trigger { background: color-mix(in srgb, var(--green) 12%, var(--surface)); border-color: var(--green); color: var(--green); outline: none; } /* Anillo de foco accesible (solo navegación por teclado) alrededor del botón, además del cambio de color de arriba. */ .contextual-help-trigger:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); } /* Globo/tooltip con el texto de ayuda. Usa position: fixed y variables CSS (--help-left/--help-top) porque JS calcula su posición en pantalla dinámicamente (para no desbordar la ventana ni quedar recortado por un contenedor con overflow). Empieza invisible (opacity 0 + visibility hidden + pointer-events none) y se revela solo cuando el contenedor tiene data-open="true". */ .contextual-help-content { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow); color: var(--text); font-size: 11px; font-weight: 500; left: var(--help-left, 0); line-height: 1.45; max-width: min(320px, calc(100vw - 24px)); opacity: 0; padding: 10px 12px; pointer-events: none; position: fixed; text-align: left; top: var(--help-top, 0); transform: translateY(3px); visibility: hidden; width: max-content; z-index: 60; } /* Estado visible del globo: aparece con un ligero desplazamiento hacia arriba (translateY 3px -> 0), lo que produce el efecto de "entrada suave" combinado con la transición definida más abajo. */ .contextual-help[data-open="true"] .contextual-help-content { opacity: 1; transform: translateY(0); visibility: visible; } /* En pantallas pequeñas el botón crece un poco (mejor objetivo táctil) y el globo usa casi todo el ancho de la ventana con más tamaño de fuente para facilitar la lectura en móvil. */ @media (max-width: 600px) { .contextual-help-trigger { height: 28px; min-height: 28px; min-width: 28px; width: 28px; } .contextual-help-content { font-size: 12px; max-width: calc(100vw - 20px); } } /* Animación de aparición/desaparición del globo, solo si el usuario no pidió reducir el movimiento en su sistema operativo. */ @media (prefers-reduced-motion: no-preference) { .contextual-help-content { transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; } } /* Si el usuario prefiere movimiento reducido, se elimina la transición y el desplazamiento -- el globo aparece/desaparece de golpe, sin deslizamiento. */ @media (prefers-reduced-motion: reduce) { .contextual-help-content { transform: none; transition: none; } } /* Envoltorio para un título (h2/h3, etc.) seguido del botón de ayuda, de modo que ambos queden alineados en la misma línea y puedan envolver (wrap) juntos en pantallas angostas. */ .heading-with-help { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 5px; } /* Aviso de "consecuencia de la acción": franja con fondo rojo muy suave y borde izquierdo rojo sólido, usada para advertir sobre efectos irreversibles o de alto impacto de un botón/formulario cercano (p. ej. antes de una restauración de producción). */ .action-consequence { background: color-mix(in srgb, var(--red) 8%, var(--surface)); border-left: 3px solid var(--red); color: var(--text); font-size: 11px; line-height: 1.5; margin: 0; padding: 10px 12px; } /* Enlace dentro del aviso de consecuencia (p. ej. "ver detalles"): se resalta en verde en vez de rojo para diferenciarlo del texto de advertencia y mantenerlo con el color de acción/enlace estándar. */ .action-consequence a { color: var(--green); font-weight: 800; }