/* Loader de marca Flex (ver /flex-loader.js). Colores fijos de la marca (no de la paleta de UI): el logo se dibuja con
   un trazo, se rellena y aparece el punto; ciclo de 2,6 s. Con prefers-reduced-motion el logo queda fijo y sólo late. */
.flex-loader{--loader-size:44px;display:inline-grid;place-items:center;width:var(--loader-size);height:var(--loader-size);flex:0 0 auto;vertical-align:middle}
.flex-loader svg{display:block;width:100%;height:100%;overflow:visible}
.flex-loader path{stroke:#1abcba;stroke-width:7;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
.flex-loader-top{animation:flex-loader-top 2.6s ease-in-out infinite}
.flex-loader-bottom{animation:flex-loader-bottom 2.6s ease-in-out infinite}
.flex-loader-dot{fill:#5cc5c0;transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;animation:flex-loader-dot 2.6s ease-out infinite}
@keyframes flex-loader-top{0%{stroke-dashoffset:1;fill-opacity:0;stroke-opacity:1}38%{stroke-dashoffset:0;fill-opacity:0}56%{fill-opacity:1;stroke-opacity:1}86%{fill-opacity:1;stroke-opacity:1;stroke-dashoffset:0}100%{fill-opacity:0;stroke-opacity:0;stroke-dashoffset:0}}
@keyframes flex-loader-bottom{0%,22%{stroke-dashoffset:1;fill-opacity:0;stroke-opacity:1}58%{stroke-dashoffset:0;fill-opacity:0}70%{fill-opacity:1}86%{fill-opacity:1;stroke-opacity:1;stroke-dashoffset:0}100%{fill-opacity:0;stroke-opacity:0;stroke-dashoffset:0}}
@keyframes flex-loader-dot{0%,62%{transform:scale(0);opacity:0}74%{transform:scale(1.25);opacity:1}80%{transform:scale(1)}86%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes flex-loader-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){
  .flex-loader path,.flex-loader-dot{animation:none;stroke-width:0;stroke-dashoffset:0;fill-opacity:1;transform:none;opacity:1}
  .flex-loader svg{animation:flex-loader-pulse 2s ease-in-out infinite}
}