/** * css/guias.css — el ESCENARIO de los recorridos + la entrada del menú. * ===================================================================== * Componente global (no es de una vista): lo linkean los shells que * pueden mostrar un recorrido. La vista del Centro de Aprendizaje tiene * su propia hoja en css/views/tutorial.css. * * Los valores viven en tokens.css (--guia-*), acá no hay colores ni * medidas mágicas: el tema claro y el oscuro salen solos. * ===================================================================== */ /* ===================================================================== * LA CAPA * --------------------------------------------------------------------- * Hija directa de : contexto de apilamiento raíz, así que el * sticky de la Planilla y el z-index de cualquier panel le quedan por * debajo sin tener que tocar nada de esas vistas. * * pointer-events: la capa NO intercepta; el fondo oscuro sí (bloquea la * interfaz de atrás) y la tarjeta también. El hueco del queda sin * pintar, y un área sin pintar no recibe eventos: los clicks sobre el * elemento resaltado pasan de largo hacia la app. Es gratis hoy y es lo * que va a permitir pasos del tipo "probalo vos" más adelante. * ===================================================================== */ .guia-capa{ position:fixed; inset:0; z-index:var(--guia-z-dim); pointer-events:none; opacity:0; visibility:hidden; transition:opacity var(--guia-dur) ease, visibility var(--guia-dur) ease; } .guia-capa.visible{ opacity:1; visibility:visible; } .guia-dim{ position:absolute; inset:0; width:100%; height:100%; pointer-events:auto; } .guia-dim-path{ fill:var(--guia-dim); } /* El anillo del hueco. El recorte del SVG ya abre la ventana; esto le pone identidad: un halo del color de marca que hace que el elemento señalado se lea como iluminado y no como un agujero. */ .guia-halo{ position:absolute; top:0; left:0; width:0; height:0; border-radius:var(--guia-radio-hueco); border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 26px -4px color-mix(in srgb, var(--accent) 55%, transparent); opacity:0; pointer-events:none; transition:opacity .18s ease; } .guia-halo.visible{ opacity:1; } /* ===================================================================== * LA TARJETA * ===================================================================== */ .guia-tarjeta{ position:fixed; left:0; top:0; width:var(--guia-tarjeta-w); max-width:calc(100vw - 24px); background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 24px 60px -20px rgba(0,0,0,.65), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); padding:16px 18px 14px; pointer-events:auto; z-index:var(--guia-z-tarjeta); } .guia-tarjeta.centrada{ left:50%; top:50%; transform:translate(-50%, -50%); } .guia-flecha{ position:absolute; width:11px; height:11px; background:var(--card); border:1px solid var(--line); transform:rotate(45deg); } .guia-tarjeta.centrada .guia-flecha{ display:none; } .guia-tarjeta[data-pos="bottom"] .guia-flecha{ top:-6px; margin-left:-6px; border-right:none; border-bottom:none; } .guia-tarjeta[data-pos="top"] .guia-flecha{ bottom:-6px; margin-left:-6px; border-left:none; border-top:none; } .guia-tarjeta[data-pos="right"] .guia-flecha{ left:-6px; margin-top:-6px; border-right:none; border-top:none; } .guia-tarjeta[data-pos="left"] .guia-flecha{ right:-6px; margin-top:-6px; border-left:none; border-bottom:none; } .guia-cab{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .guia-rotulo{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); } .guia-x{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--faint); transition:color .15s, background .15s; } .guia-x:hover{ color:var(--text); background:var(--card-2); } .guia-titulo{ font-family:var(--font-d); font-size:1rem; font-weight:700; line-height:1.3; margin-bottom:6px; } .guia-cuerpo{ font-size:.84rem; color:var(--muted); line-height:1.55; } .guia-pie{ display:flex; align-items:center; gap:10px; margin-top:16px; } .guia-puntos{ display:flex; align-items:center; gap:4px; flex:0 0 auto; } .guia-punto{ width:5px; height:5px; border-radius:50%; background:var(--line); transition:background .18s, width .18s; } .guia-punto.on{ width:14px; border-radius:3px; background:var(--accent); } .guia-contador{ font-size:.68rem; color:var(--faint); white-space:nowrap; } .guia-botones{ display:flex; align-items:center; gap:7px; margin-left:auto; } .guia-btn{ height:32px; padding:0 13px; border-radius:9px; font-size:.78rem; font-weight:700; background:var(--card-2); border:1px solid var(--line); color:var(--text); transition:filter .15s, border-color .15s, opacity .15s; } .guia-btn:hover{ border-color:var(--muted); } .guia-btn:disabled{ opacity:.4; cursor:default; } .guia-btn-primario{ background:var(--accent); border-color:transparent; color:#0B1020; } .guia-btn-primario:hover{ filter:brightness(1.08); } /* En celular la tarjeta deja de flotar y se apoya sobre el borde inferior, arriba de la barra de navegación: en una pantalla angosta una tarjeta al lado de un botón de 40px no entra en ningún lado. Los !important son contra los estilos en línea que escribe el posicionador, que en este viewport no corresponde aplicar. */ @media (max-width:720px){ .guia-tarjeta{ left:12px !important; right:12px; top:auto !important; bottom:calc(var(--tabbar-h) + 12px); width:auto; max-width:none; transform:none !important; } .guia-flecha{ display:none; } .guia-contador{ display:none; } } @media (prefers-reduced-motion: reduce){ .guia-capa, .guia-halo, .guia-punto{ transition:none; } } /* ===================================================================== * LA ENTRADA DEL MENÚ — pie del sidebar (escritorio) * --------------------------------------------------------------------- * Va en .tabbar-foot y no entre los cinco módulos a propósito: el * Tutorial no es un destino de trabajo, y sumarlo a .tabbar-inner * apretaría la navegación primaria en celular (seis columnas en 375px). * * Pero tampoco se ve como el "Cerrar sesión" que tiene al lado: es el * único elemento del menú con color de marca en reposo. Ese contraste es * deliberado — invita a entrar sin competir con la navegación. * * Estas reglas viven fuera de un @media porque .tabbar-foot ya está * oculto en celular por components.css; acá alcanza con vestir el item. * * SOBRE LA ESPECIFICIDAD (esto se rompió una vez y vale documentarlo): * el bloque de escritorio de components.css pinta los items con * `body:has(.tabbar) .tab { color:var(--muted) }`, que suma 0-2-1 — * :has() aporta la especificidad de su argumento. Un `.tabbar-foot * .tab-guias` (0-2-0) PIERDE por más que llegue después: el orden de la * cascada solo desempata a igual especificidad. De ahí el prefijo * `body:has(.tabbar)` acá también. * * Y el `:not(.on)` no es adorno: sin él, estas reglas empatarían con * `body:has(.tabbar) .tab.on` y —al venir después— le ganarían, dejando * al Tutorial sin estado activo cuando es la vista abierta. Con el * :not(), el estado activo del router sigue mandando. * ===================================================================== */ body:has(.tabbar) .tabbar-foot .tab-guias{ position:relative; width:100%; } body:has(.tabbar) .tabbar-foot .tab-guias:not(.on){ color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); transition:background .15s, border-color .15s, color .15s; } body:has(.tabbar) .tabbar-foot .tab-guias:not(.on):hover{ color:var(--accent-2); background:color-mix(in srgb, var(--accent) 13%, transparent); border-color:color-mix(in srgb, var(--accent) 34%, transparent); } body:has(.tabbar) .tabbar-foot .tab-guias svg{ width:18px; height:18px; } /* Separador entre el Tutorial y el cierre de sesión: pertenecen a familias distintas (producto vs. salida) y no deben leerse como una lista de dos opciones equivalentes. */ .tabbar-foot-sep{ height:1px; margin:10px 2px; background:var(--line-soft); } /* El atajo del encabezado: el gemelo del item para celular, donde el pie del sidebar no existe. En escritorio se esconde (mismo criterio que #btnSalir, que vive en el pie allá y en el encabezado acá). */ .guia-atajo{ position:relative; } .guia-atajo svg{ width:18px; height:18px; } @media (min-width:920px){ body:has(.tabbar) .guia-atajo{ display:none; } } /* La insignia de novedades. Su número lo pinta vista-tutorial.js; acá solo se la viste. El override de [hidden] es obligatorio porque la clase fija un display propio (misma disciplina que .icon-btn[hidden] y .visor-barra[hidden] — la suite lo vigila en la sección 54/58). */ .guia-insignia{ position:absolute; top:4px; right:6px; min-width:15px; height:15px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:var(--accent); color:#0B1020; font-family:var(--font-d); font-size:.58rem; font-weight:700; line-height:1; box-shadow:0 0 0 2px var(--surface); } .guia-insignia[hidden]{ display:none; } /* Plegado: el ícono se centra y la insignia se corre al borde, igual que hace el resto del sidebar con sus etiquetas. */ body:has(.tabbar).sidebar-collapsed .tabbar-foot .tab-guias{ justify-content:center; } body:has(.tabbar).sidebar-collapsed .guia-insignia{ top:2px; right:12px; }