/* Iconos SVG de dos estados. El color se hereda y la interacción sigue en el control nativo. */
.morph-icon {
    width:1em;
    height:1em;
    display:inline-block;
    flex:0 0 auto;
    overflow:visible;
    color:inherit;
    vertical-align:-.125em;
}
.morph-icon [data-morph-from],
.morph-icon [data-morph-to] {
    transform-box:fill-box;
    transform-origin:center;
}
.morph-icon [data-morph-to] { opacity:0; transform:translateY(2px) rotate(-8deg) scale(.88); }
.morph-icon.is-active [data-morph-from] { opacity:0; transform:translateY(-2px) rotate(8deg) scale(.88); }
.morph-icon.is-active [data-morph-to] { opacity:1; transform:none; }
.morph-icon.morph-icon-ready [data-morph-from],
.morph-icon.morph-icon-ready [data-morph-to] {
    transition:opacity .22s ease,transform .26s cubic-bezier(.2,.72,.25,1);
}
.morph-icon.is-morphing { animation:morphIconSettle .26s cubic-bezier(.2,.72,.25,1); }
@keyframes morphIconSettle {
    45% { transform:scale(.94); }
    100% { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
    .morph-icon,.morph-icon * { animation:none !important; transition:none !important; }
}