/* ============================================================================
 * Archivo : app/movil/dock_fx.css
 * Función : Efectos del dock de CIMA Móvil (votación 002), por .cm-dock[data-fx="sN"]. 'm-gota' y 'm-liquido'
 *           siguen en shell.css. Solo variables de la paleta activa (--primary, --primary-ink, --surface-2,
 *           --line, --text); cero animaciones con el dock quieto (solo transiciones al cambiar de pestaña).
 *           El botón CIMA central (.cm-cima), el dock de acciones (.cm-dock2) y la insignia no cambian.
 * ========================================================================== */
/* Barra común de los efectos sN: la dibuja el propio dock (la gota SVG solo se usa en s5). */
.cm-dock[data-fx^="s"] { border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.cm-dock[data-fx^="s"] .cm-gota { display: none; }
.cm-dock[data-fx="s4"], .cm-dock[data-fx="s5"] { background: none; border: 0; box-shadow: none; border-radius: 0; }
.cm-dock[data-fx="s4"] .cm-gota, .cm-dock[data-fx="s5"] .cm-gota { display: block; }
/* Sin elevar el ícono ni esconder el nombre, salvo s4/s5/s10 (que levantan al activo). */
.cm-dock[data-fx^="s"] .cm-tab.active .bi, .cm-dock[data-fx^="s"] .cm-tab.active .cm-dock-avatar { transform: none; color: var(--text); }
.cm-dock[data-fx^="s"] .cm-tab.active .cm-lbl { opacity: 1; }
.cm-dock[data-fx^="s"] .cm-tab.active .cm-badge { top: 5px; left: calc(50% + 6px); }
.cm-dock[data-fx^="s"] .cm-tab.active .cm-dock-avatar { border-color: var(--text); }
.cm-dock[data-fx^="s"] .cm-util.cm-rot .bi { animation-name: cm-urot-fx; }
@keyframes cm-urot-fx { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(.8); } 100% { transform: rotateY(0); } }
/* Cuadro indicador movido por CSS (shell.js solo le pone ancho y translateX). */
.cm-dock[data-fx^="s"] .cm-ind { top: 4px; height: 52px; border-radius: var(--dock-shape-r, 16px); box-shadow: none; transition: transform .5s cubic-bezier(.35,1.45,.45,1), width .5s cubic-bezier(.35,1.45,.45,1), scale .3s; }
.cm-dock[data-fx^="s"] .cm-ind::after { display: none; }
.cm-dock.cm-stretch .cm-ind { animation: cm-fx-stretch .5s cubic-bezier(.3,.7,.4,1); }
@keyframes cm-fx-stretch { 30% { scale: 1.3 .88; } 65% { scale: .95 1.05; } }

/* s1 · Dock de macOS: sin indicador; el elegido rebota al tocar (en el teléfono no hay mouse que agrande). */
.cm-dock[data-fx="s1"] .cm-ind { display: none; }
.cm-dock[data-fx="s1"] .cm-tab .bi { padding: 7px; border-radius: 13px; font-size: 1.25rem; background: color-mix(in srgb, var(--text) 10%, transparent); }
.cm-dock[data-fx="s1"] .cm-tab.active .bi { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.cm-dock[data-fx="s1"] .cm-tab.active::after { content: ''; position: absolute; bottom: 2px; left: 50%; margin-left: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }
.cm-dock[data-fx="s1"] .cm-tab.cm-bounce .bi, .cm-dock[data-fx="s1"] .cm-tab.cm-bounce .cm-dock-avatar { animation: cm-fx-bounce .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes cm-fx-bounce { 30% { translate: 0 -14px; } 60% { translate: 0 0; } 80% { translate: 0 -4px; } }

/* s2 · Liquid Glass */
.cm-dock[data-fx="s2"] { border-radius: 30px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 18%, transparent), 0 10px 26px rgba(0,0,0,.25); transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.cm-dock[data-fx="s2"].cm-press { transform: scale(1.03,.97); }
.cm-dock[data-fx="s2"] .cm-ind { background: color-mix(in srgb, var(--primary) 30%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 30%, transparent); }

/* s3 · Material 3: un óvalo se expande detrás del ícono (uno por botón, sin indicador viajero). */
.cm-dock[data-fx="s3"] { border-radius: 26px; }
.cm-dock[data-fx="s3"] .cm-ind { display: none; }
.cm-dock[data-fx="s3"] .cm-tab::before { content: ''; position: absolute; top: 9px; left: 50%; width: 56px; max-width: 90%; height: 32px; margin-left: -28px; border-radius: 16px; background: color-mix(in srgb, var(--primary) 26%, var(--surface-2)); transform: scaleX(.3); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s; z-index: -1; }
.cm-dock[data-fx="s3"] .cm-tab.active::before { transform: none; opacity: 1; }
.cm-dock[data-fx="s3"] .cm-tab.active .cm-lbl { font-weight: 800; }
.cm-dock[data-fx="s3"] .cm-tab { padding-top: 8px; }

/* s4 · Gota que se desliza: la barra (SVG de shell.js) forma una gota bajo el cuadro; sin filtro «goo» (en Safari iOS deja restos). */
.cm-dock[data-fx="s4"] .cm-ind { top: -22px; width: 50px; height: 50px; box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 45%, transparent); transition: scale .3s; }
.cm-dock[data-fx="s4"] .cm-tab.active .bi, .cm-dock[data-fx="s4"] .cm-tab.active .cm-dock-avatar { transform: translateY(-26px); color: var(--primary-ink); }
.cm-dock[data-fx="s4"] .cm-tab.active .cm-dock-avatar { border-color: var(--primary-ink); }
.cm-dock[data-fx="s4"] .cm-tab.active .cm-lbl { opacity: 0; }
.cm-dock[data-fx="s4"] .cm-tab.active .cm-badge { top: -30px; left: calc(50% + 10px); }
.cm-dock[data-fx="s4"] .cm-util.cm-rot .bi { animation-name: cm-urot; }

/* s5 · Muesca y botón flotante: la barra (SVG de shell.js) se curva bajo el cuadro. */
.cm-dock[data-fx="s5"] .cm-ind { top: -26px; width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 40%, transparent); transition: scale .3s; }
.cm-dock[data-fx="s5"] .cm-tab.active .bi, .cm-dock[data-fx="s5"] .cm-tab.active .cm-dock-avatar { transform: translateY(-27px); color: var(--primary-ink); }
.cm-dock[data-fx="s5"] .cm-tab.active .cm-dock-avatar { border-color: var(--primary-ink); }
.cm-dock[data-fx="s5"] .cm-tab.active .cm-lbl { color: var(--text); }
.cm-dock[data-fx="s5"] .cm-tab.active .cm-badge { top: -30px; left: calc(50% + 12px); }
.cm-dock[data-fx="s5"] .cm-util.cm-rot .bi { animation-name: cm-urot; }

/* s6 · Píldora compacta: el activo se ensancha (solo al tocar) y muestra su nombre. */
.cm-dock[data-fx="s6"] { left: 22px; right: 22px; border-radius: 999px; padding: 0 6px; }
@media (min-width: 640px) { .cm-dock[data-fx="s6"] { left: max(22px, calc(50% - 280px)); right: max(22px, calc(50% - 280px)); } }
.cm-dock[data-fx="s6"] .cm-tab { flex: 1 1 0; flex-direction: row; gap: 5px; transition: flex .45s cubic-bezier(.35,1.4,.45,1), color .3s; }
.cm-dock[data-fx="s6"] .cm-tab.active { flex: 2.4 1 0; }
.cm-dock[data-fx="s6"] .cm-tab .cm-lbl { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .45s cubic-bezier(.35,1.4,.45,1), opacity .2s; }
.cm-dock[data-fx="s6"] .cm-tab.active .cm-lbl { max-width: 80px; opacity: 1; color: var(--primary-ink); }
.cm-dock[data-fx="s6"] .cm-cima { flex: 0 0 52px; }
.cm-dock[data-fx="s6"] .cm-tab.active .bi, .cm-dock[data-fx="s6"] .cm-tab.active .cm-dock-avatar { color: var(--primary-ink); }
.cm-dock[data-fx="s6"] .cm-tab.active .cm-dock-avatar { border-color: var(--primary-ink); }
.cm-dock[data-fx="s6"] .cm-ind { top: 7px; height: 44px; border-radius: 999px; background: var(--primary); }
.cm-dock[data-fx="s6"] .cm-udots { display: none; }

/* s7 · Tubelight: luz en el borde superior del activo. */
.cm-dock[data-fx="s7"] { border-radius: 20px; }
.cm-dock[data-fx="s7"] .cm-ind { top: 0; height: 100%; border-radius: 0; background: none; }
.cm-dock[data-fx="s7"] .cm-ind::before { content: ''; position: absolute; top: -1px; left: 50%; width: 34px; height: 4px; margin-left: -17px; border-radius: 0 0 6px 6px; background: var(--primary); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--primary) 70%, transparent); }
.cm-dock[data-fx="s7"] .cm-ind::after { display: block; content: ''; position: absolute; top: 2px; left: 50%; width: 60px; height: 46px; margin-left: -30px; background: radial-gradient(60% 100% at 50% 0, color-mix(in srgb, var(--primary) 35%, transparent), transparent 75%); opacity: 1; }
.cm-dock[data-fx="s7"] .cm-tab.active .bi, .cm-dock[data-fx="s7"] .cm-tab.active .cm-dock-avatar { color: var(--primary); }
.cm-dock[data-fx="s7"] .cm-tab.active .cm-dock-avatar { border-color: var(--primary); }

/* s8 · Subrayado que se estira */
.cm-dock[data-fx="s8"] { border-radius: 20px; }
.cm-dock[data-fx="s8"] .cm-ind { top: auto; bottom: 6px; height: 4px; border-radius: 4px; transition: transform .45s cubic-bezier(.65,0,.35,1), width .45s cubic-bezier(.65,0,.35,1), scale .3s; }
.cm-dock[data-fx="s8"] .cm-tab.active .bi, .cm-dock[data-fx="s8"] .cm-tab.active .cm-lbl { color: var(--primary); }
.cm-dock[data-fx="s8"] .cm-tab.active .cm-dock-avatar { border-color: var(--primary); }
.cm-dock[data-fx="s8"] .cm-udots { display: none; }

/* s9 · Segmentado magnético */
.cm-dock[data-fx="s9"] { padding: 0 2px; border-radius: 22px; }
.cm-dock[data-fx="s9"] .cm-ind { background: color-mix(in srgb, var(--primary) 24%, var(--surface)); box-shadow: 0 6px 14px rgba(0,0,0,.18); transition: transform .5s cubic-bezier(.5,1.7,.4,1), width .5s cubic-bezier(.5,1.7,.4,1), scale .3s; }
.cm-dock[data-fx="s9"] .cm-tab.active .bi { transform: scale(1.12); }

/* s10 · Isla que se eleva */
.cm-dock[data-fx="s10"] { border-radius: 24px; }
.cm-dock[data-fx="s10"] .cm-ind { top: -12px; height: 60px; background: var(--primary); box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 45%, transparent); }
.cm-dock[data-fx="s10"] .cm-tab.active .bi, .cm-dock[data-fx="s10"] .cm-tab.active .cm-dock-avatar { transform: translateY(-10px); color: var(--primary-ink); }
.cm-dock[data-fx="s10"] .cm-tab.active .cm-dock-avatar { border-color: var(--primary-ink); }
.cm-dock[data-fx="s10"] .cm-tab.active .cm-lbl { transform: translateY(-8px); color: var(--primary-ink); }
.cm-dock[data-fx="s10"] .cm-tab.active .cm-badge { top: -4px; }

/* —— Forma de la marca (BASE → dock.shape, Fase 3): cuadrado (hoy), círculo o Cápsula ——
   'sq' = el radio de hoy (16 px) → sin elección en BASE nada cambia. Los efectos con radio propio
   (s6/s7/s8/s4/s5) conservan su forma; s2, s9 y s10 (y la base) siguen --dock-shape-r. m-gota/m-liquido no usan .cm-ind sN. */
.cm-dock[data-shape="sq"] { --dock-shape-r: 16px; }
.cm-dock[data-shape="ci"] { --dock-shape-r: 50%; }
.cm-dock[data-shape="pi"] { --dock-shape-r: 999px; }

/* —— «Sin desplazamiento» (BASE → dock.move='none' → .cm-dock.cm-still): la marca (gota, líquido o cuadro)
   no viaja; salto con un fundido corto de 0,15 s (shell.js fundirMarca). Sin estirón, sin rebote de s1, sin cm-press. —— */
.cm-dock.cm-still .cm-ind, .cm-dock.cm-still .cm-gota { transition: opacity .15s ease !important; }
.cm-dock.cm-still.cm-stretch .cm-ind { animation: none !important; }
.cm-dock.cm-still .cm-tab.cm-bounce .bi, .cm-dock.cm-still .cm-tab.cm-bounce .cm-dock-avatar { animation: none !important; }
.cm-dock.cm-still.cm-press, .cm-dock.cm-still[data-fx="s2"].cm-press { transform: none !important; }

/* Con «reducir movimiento» todo salta sin transición ni rebotes. */
@media (prefers-reduced-motion: reduce) {
    .cm-dock[data-fx] .cm-ind, .cm-dock[data-fx] .cm-tab, .cm-dock[data-fx] .cm-tab::before, .cm-dock[data-fx] .cm-tab .cm-lbl, .cm-dock[data-fx] .cm-tab .bi { transition: none !important; }
    .cm-dock[data-fx] .cm-ind, .cm-dock[data-fx] .cm-tab .bi, .cm-dock[data-fx] .cm-tab .cm-dock-avatar { animation: none !important; }
    .cm-dock[data-fx="s2"].cm-press { transform: none; }
}