/* Selector de idioma Vivethink v5. Minimalista y fluido (una sola curva suave, sin rebotes).
   Cerrado: solo la perilla con la bandera circular. Hover/clic: el ovalo se abre mostrando el acronimo y aparece un recuadro glass+neumorfico
   (mas pequeno que el principal) con el titulo y los otros idiomas. Marca: Fredoka, tinta #2E3A40, rosa #ED3A96 (focus y carga). */
.vt-ls{--vt-ink:#2E3A40;--vt-pink:#ED3A96;--d:1;--w:84px;--h:52px;--k:44px;--ease:cubic-bezier(.22,1,.36,1);
  position:fixed;right:20px;bottom:20px;z-index:99990;display:flex;flex-direction:column;align-items:flex-end;gap:12px;transform-origin:bottom right;
  font:700 14px/1 Fredoka,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.05em;color:var(--vt-ink);-webkit-tap-highlight-color:transparent;
  transition:transform .45s var(--ease),opacity .35s ease}
.vt-ls[dir=rtl]{--d:-1;right:auto;left:20px;align-items:flex-start;transform-origin:bottom left}
.vt-ls *{box-sizing:border-box}
.vt-ls.is-scrolled:not(.is-open){transform:scale(.82)}

/* ---- toggle (neumorfico hundido) ---- */
.vt-ls__sw{position:relative;display:block;flex:none;width:var(--w);height:var(--h);margin:0;padding:0;border:0;border-radius:calc(var(--h)/2);cursor:pointer;color:inherit;text-decoration:none;
  background:linear-gradient(145deg,#e4e7ed,#eef0f4);
  box-shadow:inset 4px 4px 9px rgba(150,163,184,.55),inset -4px -4px 9px rgba(255,255,255,.95),0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(28,37,41,.12);
  transition:width .42s var(--ease)}
.vt-ls__sw:focus-visible{outline:3px solid var(--vt-pink);outline-offset:4px}
.vt-ls__track{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.vt-ls__txt{position:absolute;top:0;left:0;width:calc(var(--w) - var(--k) - 8px);height:100%;display:grid;place-items:center;
  color:rgba(46,58,64,.5);text-shadow:0 1px 0 rgba(255,255,255,.9);
  transform:translateX(calc(var(--d) * (var(--k) + 4px)));transition:transform .42s var(--ease),opacity .28s ease}
.vt-ls[dir=rtl] .vt-ls__txt{left:auto;right:0}
.vt-ls__sw.is-on .vt-ls__txt{transform:translateX(calc(var(--d) * 4px))}
.vt-ls__sw:not(.is-on) .vt-ls__txt{color:rgba(46,58,64,.32)}

/* perilla: bandera circular plana (aro blanco + sombra suave) */
.vt-ls__knob{--ring:3px;position:absolute;top:calc((var(--h) - var(--k))/2);inset-inline-start:4px;width:var(--k);height:var(--k);border-radius:50%;
  box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(46,58,64,.1),0 3px 8px rgba(28,37,41,.2);
  transition:inset-inline-start .42s var(--ease)}
.vt-ls__knob svg{display:block;width:100%;height:100%}
.vt-ls__flag{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.vt-ls__sw.is-on .vt-ls__knob{inset-inline-start:calc(100% - var(--k) - 4px)}
/* Solo las opciones inactivas se apagan; la principal conserva siempre su color. */
.vt-ls__list .vt-ls__sw:not(.is-on) .vt-ls__knob{filter:grayscale(.55) saturate(.7);opacity:.6}
.vt-ls__list .vt-ls__sw:hover .vt-ls__knob,.vt-ls__list .vt-ls__sw:focus .vt-ls__knob{filter:none;opacity:1}
.vt-ls__main .vt-ls__knob,.vt-ls__list .is-on .vt-ls__knob{filter:none;opacity:1}

/* El arco ocupa solo la banda del aro blanco; el recorte circular vive en la bandera. */
.vt-ls__knob .vt-ls__load{display:none;position:absolute;top:calc(-1 * var(--ring));left:calc(-1 * var(--ring));width:calc(100% + 2 * var(--ring));height:calc(100% + 2 * var(--ring));pointer-events:none}
.vt-ls__load circle{r:calc(50% - var(--ring)/2);fill:none;stroke:var(--vt-pink);stroke-width:2px;stroke-dasharray:110 250;stroke-linecap:round}
.vt-ls__sw.is-loading .vt-ls__load{display:block;animation:vt-ls-load .9s linear infinite}
@keyframes vt-ls-load{to{transform:rotate(360deg)}}

/* ---- cerrado (por defecto): ovalo = solo la perilla; abierto: se despliega con el acronimo ---- */
.vt-ls__main{width:var(--h)}
.vt-ls__main .vt-ls__txt{opacity:0}
.vt-ls.is-open .vt-ls__main{width:var(--w)}
.vt-ls.is-open .vt-ls__main .vt-ls__txt{opacity:1;transition-delay:.06s}

/* ---- recuadro de opciones: mas pequeno que el principal; glassmorphism + neumorfismo ---- */
.vt-ls__panel{--w:66px;--h:38px;--k:30px;position:relative;width:92px;padding:10px 10px 11px;border-radius:22px;transform-origin:bottom right;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(236,239,246,.42));
  -webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:9px 11px 24px rgba(28,37,41,.16),-6px -6px 18px rgba(255,255,255,.8),inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(150,163,184,.22);
  animation:vt-ls-panel .34s var(--ease) both}
.vt-ls[dir=rtl] .vt-ls__panel{transform-origin:bottom left}
.vt-ls__panel[hidden]{display:none}
.vt-ls__main[hidden]{display:none}
.vt-ls__panel{max-height:calc(100vh - 110px);max-block-size:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(46,58,64,.25) transparent}
.vt-ls__panel::-webkit-scrollbar{width:3px}
.vt-ls__panel::-webkit-scrollbar-thumb{background:rgba(46,58,64,.25);border-radius:3px}
.vt-ls__txt{direction:ltr;unicode-bidi:isolate}
.vt-ls__panel .vt-ls__sw{box-shadow:inset 3px 3px 7px rgba(150,163,184,.5),inset -3px -3px 7px rgba(255,255,255,.95),0 5px 12px rgba(28,37,41,.1)}
.vt-ls__panel .vt-ls__txt{font-size:12px}
.vt-ls__panel .vt-ls__knob{--ring:2.5px;box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px rgba(46,58,64,.1),0 2px 6px rgba(28,37,41,.18)}
.vt-ls__hint{margin:0 0 10px;padding:0 2px;font:600 10.5px/1.25 Fredoka,-apple-system,"Segoe UI",sans-serif;letter-spacing:.03em;text-align:center;color:rgba(46,58,64,.62)}
.vt-ls__list{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
.vt-ls__list li{margin:0;padding:0;animation:vt-ls-in .34s var(--ease) both;animation-delay:calc(40ms + var(--i,0) * 40ms)}
@keyframes vt-ls-panel{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes vt-ls-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:600px){.vt-ls{right:12px;bottom:14px}.vt-ls[dir=rtl]{left:12px;right:auto}}
@media (prefers-reduced-motion:reduce){.vt-ls,.vt-ls__sw,.vt-ls__knob,.vt-ls__txt{transition:none}.vt-ls__panel,.vt-ls__list li,.vt-ls__sw.is-loading .vt-ls__load{animation:none}}
.vt-ls__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}