/* ============================================================ Asesoría Contable — 05-dock.css Dock flotante "Agendar o contactar" (WhatsApp + Cal.com). Espacio de nombres propio (.dock*) y archivo aparte a propósito: - No reutiliza .fab / .btn, así ninguna regla de otra hoja puede pisarlo. - Al ser un archivo nuevo, su URL nunca estuvo en la caché "immutable" del navegador, así que los estilos llegan frescos en el primer deploy. - No depende de la clase .js del : el estado cerrado se controla con el atributo data-open del propio componente. ============================================================ */ .dock { --dock-inset: clamp(0.85rem, 2vw, 1.5rem); --dock-h: 3.4rem; /* alto aproximado del disparador + su separación */ position: fixed; right: var(--dock-inset); bottom: var(--dock-inset); z-index: var(--z-float, 400); display: grid; gap: 0.6rem; justify-items: end; } /* El botón "volver arriba" (.floating-actions, en 03-components.css) vive en la misma esquina: se sube por encima del dock para que no se solapen. Esta hoja se carga de última, así que gana sin necesidad de !important. */ .floating-actions { bottom: calc(clamp(0.85rem, 2vw, 1.5rem) + 3.4rem); } /* ---------- Botones del dock (base común) ---------- */ .dock__btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.55rem; margin: 0; padding: 0.8rem 1.05rem; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--font-display, system-ui, sans-serif); font-weight: 700; font-size: 0.9rem; line-height: 1.15; text-align: left; text-decoration: none; white-space: nowrap; /* Red de seguridad: en pantallas muy estrechas el rótulo se recorta en vez de empujar la píldora fuera del borde de la ventana. */ max-width: calc(100vw - (var(--dock-inset, 1rem) * 2)); overflow: hidden; box-shadow: 0 12px 28px -10px rgba(4, 22, 47, 0.45), 0 4px 10px -6px rgba(4, 22, 47, 0.3); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), filter 200ms cubic-bezier(0.22, 1, 0.36, 1); } .dock__btn:hover { transform: translateY(-2px); filter: brightness(1.06); } .dock__btn:focus-visible { outline: 3px solid #3f86ec; outline-offset: 2px; } .dock__btn svg { width: 1.25rem; height: 1.25rem; flex: none; display: block; } /* ---------- Variantes ---------- */ .dock__btn--wa { background: #25d366; color: #04331a; } .dock__btn--cal { background: #1565d8; color: #ffffff; } .dock__btn--trigger { background: linear-gradient(160deg, #04162f 0%, #0a2a5e 60%, #0e3a7e 100%); color: #ffffff; padding-right: 0.9rem; } .dock__chev { width: 0.85rem !important; height: 0.85rem !important; opacity: 0.85; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Panel desplegable ---------- */ /* El estado CERRADO es el de partida, escrito directamente en el CSS. Antes dependía de que el JS pusiera data-dock-ready, y eso causaba dos fallos: el panel se veía abierto durante el primer paint (parpadeo), y si el JS no llegaba a ejecutarse el disparador quedaba oculto para siempre. Ahora el CSS manda y el JS solo alterna data-open. */ .dock__panel { display: grid; gap: 0.6rem; justify-items: end; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(0.5rem) scale(0.95); transform-origin: bottom right; transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 200ms; } .dock[data-open="true"] .dock__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; } .dock[data-open="true"] .dock__chev { transform: rotate(180deg); } /* El disparador siempre está presente: no depende de ninguna clase que tenga que añadir el JS. Sin JS lo oculta el