/* ════════════════════════════════════════════════════════ */
/*                 TRANSICIONES GLOBALES                    */
/* ════════════════════════════════════════════════════════ */

*{transition:
background-color .18s ease,
border-color .18s ease,
color .18s ease,
box-shadow .18s ease,
transform .18s ease,
opacity .18s ease;}

/* ════════════════════════════════════════════════════════ */
/*                  EFECTO HOVER SUAVE                      */
/* ════════════════════════════════════════════════════════ */
button,.btn,.card,.cc,.metric,.tab,input,select,textarea{will-change:transform;}

/* ════════════════════════════════════════════════════════ */
/*                   EFECTO PRESION BOTON                   */
/* ════════════════════════════════════════════════════════ */
button:active,.btn:active{transform:scale(.97);}

/* ════════════════════════════════════════════════════════ */
/*                  ENTRADA SUAVE TARJETAS                  */
/* ════════════════════════════════════════════════════════ */
.card,.cc,.metric{animation:fadeUp .28s ease;}

/* ════════════════════════════════════════════════════════ */
/*                 ANIMACION MODALES                        */
/* ════════════════════════════════════════════════════════ */
.modal,.modal-box,.popup,.user-popup{animation:modalEnter .22s ease;}

/* ════════════════════════════════════════════════════════ */
/*                  INPUT FOCUS PREMIUM                     */
/* ════════════════════════════════════════════════════════ */
input:focus,textarea:focus,select:focus{transform:translateY(-1px);}

/* ════════════════════════════════════════════════════════ */
/*                     KEYFRAMES                            */
/* ════════════════════════════════════════════════════════ */

@keyframes fadeUp{
from{opacity:0;transform:translateY(8px);}
to{opacity:1; transform:translateY(0);}}

@keyframes modalEnter{
from{opacity:0;transform:translateY(10px) scale(.98);}
to{opacity:1;transform:translateY(0) scale(1);}}