/* JH Technology Motion System 1.5.5
 * Movimiento global configurable para navegación SPA, scroll reveal, modales y pestañas.
 */
:root{
  --jht-motion-route-ms:680ms;
  --jht-motion-reveal-ms:900ms;
  --jht-motion-modal-ms:420ms;
  --jht-motion-ease:cubic-bezier(.16,1,.3,1);
  --jht-motion-soft-ease:cubic-bezier(.22,.61,.36,1);
  --jht-motion-tab-ms:560ms;
  --jht-reveal-x:0px;
  --jht-reveal-y:20px;
  --jht-reveal-scale:1;
}

html.jht-motion-enabled{scroll-behavior:auto}

/* Navegación: la vista actual baja apenas mientras llega la siguiente. */
.jht-motion-pending{
  opacity:.965;
  transform:translate3d(0,-2px,0);
  transition:opacity 260ms ease,transform 340ms var(--jht-motion-soft-ease)!important;
}

.jht-motion-route-in{
  animation:jhtMotionRouteSoft var(--jht-motion-route-ms) var(--jht-motion-ease) both!important;
  will-change:opacity,transform;
}
html[data-jht-route-effect="fade"] .jht-motion-route-in{animation-name:jhtMotionFade!important}
html[data-jht-route-effect="slide"] .jht-motion-route-in{animation-name:jhtMotionRouteSlide!important}
html[data-jht-route-effect="zoom"] .jht-motion-route-in{animation-name:jhtMotionRouteZoom!important}
@keyframes jhtMotionRouteSoft{0%{opacity:0;transform:translate3d(0,12px,0) scale(.997)}55%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes jhtMotionFade{0%{opacity:0}100%{opacity:1}}
@keyframes jhtMotionRouteSlide{0%{opacity:0;transform:translate3d(24px,0,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes jhtMotionRouteZoom{0%{opacity:0;transform:scale(.965)}100%{opacity:1;transform:scale(1)}}

/* Aparición progresiva al hacer scroll. */
html[data-jht-reveal-effect="fade"]{--jht-reveal-x:0px;--jht-reveal-y:0px;--jht-reveal-scale:1}
html[data-jht-reveal-effect="slide"]{--jht-reveal-x:24px;--jht-reveal-y:0px;--jht-reveal-scale:1}
html[data-jht-reveal-effect="zoom"]{--jht-reveal-x:0px;--jht-reveal-y:0px;--jht-reveal-scale:.96}
.jht-motion-reveal{
  opacity:0;
  transform:translate3d(var(--jht-reveal-x),var(--jht-reveal-y),0) scale(var(--jht-reveal-scale));
  transition:
    opacity var(--jht-motion-reveal-ms) var(--jht-motion-soft-ease),
    transform var(--jht-motion-reveal-ms) var(--jht-motion-ease);
  transition-delay:var(--jht-motion-delay,0ms);
  will-change:opacity,transform;
}
.jht-motion-reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}

/* Modales / dialogs — 1.4.3
 * Las entradas de modal se ejecutan con Web Animations API desde JS.
 * No se aplica animation/transition CSS sobre la superficie del modal para
 * evitar animationend/transitionend ajenos que algunos plugins usan para
 * desmontar, ocultar o intercambiar su contenido interno. */
.jht-motion-modal-surface-in,
.jht-motion-modal-backdrop-in{
  animation:none!important;
}

/* 1.4.3 — Scrollbar seguro. Solo cambia la apariencia de elementos que YA son
 * desplazables por su propio plugin. El Runtime no cambia overflow, alturas ni
 * estructura del modal; asi evita interferir con Access, Equipos, Rewards, etc. */
html.jht-motion-enabled .modal::-webkit-scrollbar,
html.jht-motion-enabled .jht-modal::-webkit-scrollbar,
html.jht-motion-enabled [role="dialog"]::-webkit-scrollbar,
html.jht-motion-enabled [aria-modal="true"]::-webkit-scrollbar,
html.jht-motion-enabled .modal-body::-webkit-scrollbar,
html.jht-motion-enabled .jht-modal-body::-webkit-scrollbar,
html.jht-motion-enabled .jht-modal__body::-webkit-scrollbar{width:7px;height:7px}
html.jht-motion-enabled .modal::-webkit-scrollbar-track,
html.jht-motion-enabled .jht-modal::-webkit-scrollbar-track,
html.jht-motion-enabled [role="dialog"]::-webkit-scrollbar-track,
html.jht-motion-enabled [aria-modal="true"]::-webkit-scrollbar-track,
html.jht-motion-enabled .modal-body::-webkit-scrollbar-track,
html.jht-motion-enabled .jht-modal-body::-webkit-scrollbar-track,
html.jht-motion-enabled .jht-modal__body::-webkit-scrollbar-track{background:transparent}
html.jht-motion-enabled .modal::-webkit-scrollbar-thumb,
html.jht-motion-enabled .jht-modal::-webkit-scrollbar-thumb,
html.jht-motion-enabled [role="dialog"]::-webkit-scrollbar-thumb,
html.jht-motion-enabled [aria-modal="true"]::-webkit-scrollbar-thumb,
html.jht-motion-enabled .modal-body::-webkit-scrollbar-thumb,
html.jht-motion-enabled .jht-modal-body::-webkit-scrollbar-thumb,
html.jht-motion-enabled .jht-modal__body::-webkit-scrollbar-thumb{
  background:rgba(100,116,139,.34);
  border:2px solid transparent;
  background-clip:content-box;
  border-radius:999px;
}
html.jht-motion-enabled .modal,
html.jht-motion-enabled .jht-modal,
html.jht-motion-enabled [role="dialog"],
html.jht-motion-enabled [aria-modal="true"],
html.jht-motion-enabled .modal-body,
html.jht-motion-enabled .jht-modal-body,
html.jht-motion-enabled .jht-modal__body{
  scrollbar-width:thin;
  scrollbar-color:rgba(100,116,139,.38) transparent;
}

/* Botones y controles: respuesta táctil/hover sin cambiar el diseño. */
html.jht-motion-enabled button,html.jht-motion-enabled .btn,html.jht-motion-enabled .button,html.jht-motion-enabled .jht-btn,html.jht-motion-enabled [role="button"],html.jht-motion-enabled a.jht-button,html.jht-motion-enabled a[class*="jht-btn"]{
  transition-property:translate,scale,box-shadow,filter,opacity,background-color,border-color,color;
  transition-duration:240ms;
  transition-timing-function:var(--jht-motion-soft-ease);
}
@media (hover:hover) and (pointer:fine){
  html.jht-motion-enabled button:not(:disabled):hover,html.jht-motion-enabled .btn:not(.disabled):hover,html.jht-motion-enabled .button:not(.disabled):hover,html.jht-motion-enabled .jht-btn:not(.disabled):hover,html.jht-motion-enabled [role="button"]:not([aria-disabled="true"]):hover,html.jht-motion-enabled a.jht-button:hover,html.jht-motion-enabled a[class*="jht-btn"]:hover{translate:0 -1px}
}
html.jht-motion-enabled button:not(:disabled):active,html.jht-motion-enabled .btn:not(.disabled):active,html.jht-motion-enabled .button:not(.disabled):active,html.jht-motion-enabled .jht-btn:not(.disabled):active,html.jht-motion-enabled [role="button"]:not([aria-disabled="true"]):active,html.jht-motion-enabled a.jht-button:active,html.jht-motion-enabled a[class*="jht-btn"]:active{translate:0 0;scale:.985;transition-duration:90ms}

/* Pestañas y secciones internas de panel. El motor principal usa WAAPI; estas
 * reglas quedan como fallback seguro para navegadores sin element.animate(). */
.jht-motion-tab-in{
  animation:jhtMotionTabSoft var(--jht-motion-tab-ms) var(--jht-motion-ease) both!important;
  will-change:opacity,translate,scale;
}
html[data-jht-tab-effect="fade"] .jht-motion-tab-in{animation-name:jhtMotionFade!important}
html[data-jht-tab-effect="slide"] .jht-motion-tab-in{animation-name:jhtMotionTabSlide!important}
html[data-jht-tab-effect="zoom"] .jht-motion-tab-in{animation-name:jhtMotionTabZoom!important}
@keyframes jhtMotionTabSoft{0%{opacity:0;translate:0 10px;scale:.998}45%{opacity:.82;translate:0 2px;scale:.9995}100%{opacity:1;translate:0 0;scale:1}}
@keyframes jhtMotionTabSlide{0%{opacity:0;translate:18px 0}100%{opacity:1;translate:0 0}}
@keyframes jhtMotionTabZoom{0%{opacity:0;scale:.97}100%{opacity:1;scale:1}}

html.jht-motion-enabled [role="tab"],html.jht-motion-enabled .nav-tabs a,html.jht-motion-enabled .nav-tabs button,html.jht-motion-enabled .tabs a,html.jht-motion-enabled .tabs button,html.jht-motion-enabled .jht-tabs a,html.jht-motion-enabled .jht-tabs button,html.jht-motion-enabled .jht-tab,html.jht-motion-enabled [data-jht-tab],html.jht-motion-enabled [data-tab],html.jht-motion-enabled [data-bs-toggle="tab"],html.jht-motion-enabled [data-toggle="tab"]{
  transition:color 300ms var(--jht-motion-soft-ease),background-color 300ms var(--jht-motion-soft-ease),border-color 300ms var(--jht-motion-soft-ease),transform 300ms var(--jht-motion-soft-ease),opacity 300ms ease;
}

[data-jht-motion="off"],[data-jht-motion="off"] *{animation:none!important;transition:none!important}

@media (prefers-reduced-motion:reduce){
  html.jht-motion-enabled{scroll-behavior:auto}
  .jht-motion-pending,.jht-motion-route-in,.jht-motion-tab-in,.jht-motion-reveal,.jht-motion-reveal.is-visible,
  .jht-motion-modal-surface-in,.jht-motion-modal-backdrop-in{animation:none!important;transition:none!important;opacity:1!important;translate:none!important;scale:none!important}
}

/* Geometría compacta de acciones dentro del Centro de Diseño.
 * Conserva colores, bordes, sombras y estados de las clases nativas detectadas.
 * Sólo neutraliza dimensiones heredadas de tarjetas/acciones grandes para mantener
 * el formato compacto de botón del Design System. */
.jht-motion-design-settings .jht-motion-action{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  padding:0 12px!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  gap:6px!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:12px!important;
  text-align:center!important;
  vertical-align:middle!important;
}
.jht-motion-design-settings .jht-motion-action *{
  white-space:nowrap!important;
}
.jht-motion-design-settings form[method="post"] > .jht-motion-action{
  align-self:flex-start!important;
}
@media (max-width:640px){
  .jht-motion-design-settings .jht-motion-action{
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding-inline:11px!important;
  }
}