/*
 * MAEW Motion 2.12 — capa de movimiento y respuesta compartida por toda la intranet.
 * Se carga después de los estilos de cada módulo.
 *
 * Dos niveles:
 *  1. Respuesta suave (siempre): cambios de color, sombra, borde y opacidad. No mueve nada en pantalla,
 *     por eso se conserva aunque Windows tenga desactivados los efectos de animación.
 *  2. Movimiento (#maew-app.maew-motion): desplazamientos, escalas, entradas escalonadas y cifras que cuentan.
 *     motion.js agrega la clase según la preferencia de la persona: Automático (sigue a Windows),
 *     Activadas o Reducidas. Si el script no carga, la interfaz se ve completa y quieta.
 */
#maew-app {
    --mx-ease: cubic-bezier(.22,1,.36,1);
    --mx-spring: cubic-bezier(.34,1.56,.64,1);
    --mx-fast: .16s;
    --mx-base: .28s;
    --mx-slow: .62s;
    --mx-lift: 0 14px 34px rgba(32,35,34,.10), 0 3px 8px rgba(32,35,34,.05);
    --mx-ring: 0 0 0 4px rgba(200,16,46,.14);
}

/* =====================================================================
 * 1. RESPUESTA SUAVE — siempre activa
 * ===================================================================== */

/* Barra de progreso superior (navegación, envíos y consultas). */
.mx-progress { position:fixed; top:0; left:0; right:0; z-index:100000; height:3px; pointer-events:none; opacity:0; transition:opacity .3s ease .1s; }
.mx-progress::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#c8102e,#ff4d6a); transform-origin:left; transform:scaleX(var(--mx-p,0)); transition:transform .4s cubic-bezier(.22,1,.36,1); box-shadow:0 0 10px rgba(200,16,46,.55); }
.mx-progress.is-active { opacity:1; transition-delay:0s; }

/* Botones, pestañas y accesos: color y sombra con transición. */
#maew-app :is(.maew-btn,.eg-button,.maew-icon-button,.maew-link-button,.maew-menu-button,.maew-focus-button,.maew-notification-button,.maew-sidebar-close,.maew-topbar__actions>a,.maew-view-switch button,.maew-pending-filters button,.maew-ops-tabs button,.maew-pc-tabs button,.maew-admin-tabs a,.maew-context-tabs a,.maew-home-shortcuts a,.maew-mobile-nav>*,.mx-prefs__button,button[type=submit],input[type=submit]) {
    transition:transform var(--mx-fast) var(--mx-ease), box-shadow var(--mx-base) var(--mx-ease), background-color var(--mx-base) ease, border-color var(--mx-base) ease, color var(--mx-base) ease, opacity var(--mx-base) ease;
    -webkit-tap-highlight-color:transparent;
}
#maew-app :is(.maew-btn,.eg-button) { position:relative; overflow:hidden; isolation:isolate; }
#maew-app :is(.maew-btn--primary,.eg-button):not(:disabled):hover { box-shadow:0 8px 20px rgba(200,16,46,.24); }
#maew-app .maew-btn--secondary:not(:disabled):hover { box-shadow:0 6px 16px rgba(32,35,34,.08); }

/* Botón ocupado mientras se envía un formulario. */
#maew-app .is-busy { pointer-events:none; cursor:progress; }
#maew-app :is(.maew-btn,.eg-button,button).is-busy { opacity:.86; }
#maew-app :is(.maew-btn,.eg-button,button).is-busy::after { content:""; width:15px; height:15px; flex-shrink:0; margin-left:2px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:mx-spin .7s linear infinite!important; }
@keyframes mx-spin { to { transform:rotate(360deg); } }

/* Campos de formulario. */
#maew-app :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea) { transition:border-color var(--mx-base) ease, box-shadow var(--mx-base) var(--mx-ease), background-color var(--mx-base) ease; }
#maew-app :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea):focus { box-shadow:var(--mx-ring); }
#maew-app .maew-global-search input:focus { box-shadow:0 0 0 4px rgba(255,255,255,.12); }
#maew-app :is(input,select,textarea).mx-invalid { border-color:#c8102e!important; box-shadow:0 0 0 4px rgba(200,16,46,.16)!important; }

/* Tarjetas, indicadores y elementos navegables. */
#maew-app :is(.mx-card,.maew-pending-card,.maew-home-metrics>a,.maew-document-card,.maew-task-card,.maew-team-card,.maew-device-card,.maew-crm-card,.maew-brain-card,.maew-module-card,.maew-booking,.maew-training,.maew-notice,.maew-list-item,.maew-quote-item,.eg-account-card,.eg-kpi,.maew-compact-docs>a,.maew-home-news-grid>article,.maew-notification-item,:is(.maew-crm-kpis,.maew-orders-kpis,.maew-project-kpis,.maew-workforce-kpis,.maew-security-kpis)>article) {
    transition:transform var(--mx-base) var(--mx-ease), box-shadow var(--mx-base) var(--mx-ease), border-color var(--mx-base) ease, background-color var(--mx-base) ease, color var(--mx-base) ease;
}
@media (hover:hover) {
    #maew-app :is(.mx-card,.maew-pending-card,.maew-home-metrics>a,.maew-document-card,.maew-task-card,.maew-team-card,.maew-device-card,.maew-crm-card,.maew-brain-card,.maew-module-card,.maew-booking,.maew-training,.maew-compact-docs>a,.maew-home-news-grid>article,.eg-account-card):hover { box-shadow:var(--mx-lift); }
    #maew-app :is(.eg-kpi,:is(.maew-crm-kpis,.maew-orders-kpis,.maew-project-kpis,.maew-workforce-kpis,.maew-security-kpis)>article):hover { box-shadow:0 10px 24px rgba(32,35,34,.07); }
}
#maew-app .maew-home-metrics .maew-metric__open,
#maew-app .maew-pending-card__arrow,
#maew-app .maew-metric__label>.maew-icon,
#maew-app :is(.maew-btn,.eg-button) .maew-icon { transition:transform var(--mx-base) var(--mx-spring), background-color var(--mx-base) ease, border-color var(--mx-base) ease, color var(--mx-base) ease; }
#maew-app .maew-home-metrics>a:hover .maew-metric__open { background:var(--mi-red,#c8102e); border-color:var(--mi-red,#c8102e); color:#fff; }

/* Barras de avance de Pedidos: el relleno es un <span> en línea y sin display:block no toma su ancho (no se veía). */
#maew-app .maew-progress>span { display:block; border-radius:inherit; }

/* Tablas y navegación. */
#maew-app table tbody tr { transition:background-color var(--mx-fast) ease; }
@media (hover:hover) { #maew-app :is(.maew-suite-table,.maew-table,.eg-table,table.widefat) tbody tr:hover { background-color:rgba(200,16,46,.035); } }
#maew-app .maew-nav a { transition:transform var(--mx-base) var(--mx-ease), background-color var(--mx-base) ease, color var(--mx-base) ease; }
#maew-app .maew-nav a>.maew-icon { transition:transform var(--mx-base) var(--mx-spring), color var(--mx-base) ease; }
#maew-app details>summary { transition:color var(--mx-base) ease, background-color var(--mx-base) ease; }

/* Estados de carga: brillo sobre el texto y tarjetas fantasma. Es un cambio de luz, no un desplazamiento. */
#maew-app .mx-loading { display:inline-block; color:transparent!important; background:linear-gradient(90deg,#b7bdb9 0%,#e4e7e4 40%,#b7bdb9 80%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; animation:mx-shimmer 1.3s linear infinite!important; }
#maew-app .mx-skeleton { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); width:100%; grid-column:1/-1; }
#maew-app .mx-skeleton>i { display:block; height:118px; border-radius:20px; background:linear-gradient(90deg,#ececea 0%,#f7f7f5 45%,#ececea 90%); background-size:220% 100%; animation:mx-shimmer 1.3s linear infinite!important; }
#maew-app .mx-skeleton>i:nth-child(3) { animation-delay:.1s!important; } #maew-app .mx-skeleton>i:nth-child(4) { animation-delay:.2s!important; }
@keyframes mx-shimmer { from { background-position:120% 0; } to { background-position:-120% 0; } }

/* Preferencias: botón de engrane en la barra superior y su panel, con la misma forma que la campana y sus avisos. */
#maew-app .mx-prefs { position:relative; z-index:6; }
#maew-app .mx-prefs__button { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #4b534d; border-radius:50%; background:transparent; color:#fff; cursor:pointer; }
#maew-app .mx-prefs__button:hover,#maew-app .mx-prefs__button[aria-expanded=true] { background:#3a423b; }
#maew-app .mx-prefs__button svg { width:19px; height:19px; transition:transform .5s var(--mx-spring); }
#maew-app.maew-motion .mx-prefs__button[aria-expanded=true] svg { transform:rotate(60deg); }
#maew-app .mx-prefs__panel { position:absolute; top:calc(100% + 12px); right:0; z-index:180; width:min(330px,calc(100vw - 28px)); padding:18px; border:1px solid var(--mi-line,#e3e3e1); border-radius:22px; background:#fff; color:var(--mi-ink,#202322); box-shadow:0 16px 50px #151b2030; text-align:left; }
#maew-app .mx-prefs__panel[hidden] { display:none; }
#maew-app.maew-motion .mx-prefs__panel:not([hidden]) { transform-origin:top right; animation:mx-pop .26s var(--mx-ease); }
#maew-app .mx-prefs__panel header { margin-bottom:12px; }
#maew-app .mx-prefs__panel .maew-eyebrow { margin:0 0 4px; color:#6b746c; font-size:10px; letter-spacing:.08em; }
#maew-app .mx-prefs__panel h2 { margin:0; font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--mi-ink,#202322); }
#maew-app .mx-prefs__panel fieldset { margin:0; padding:0; border:0; display:grid; gap:6px; }
#maew-app .mx-prefs__panel legend { margin-bottom:8px; padding:0; font-size:12px; font-weight:650; color:var(--mi-muted,#626967); }
#maew-app .mx-prefs__option { font-weight:400; display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid #e4e8e1; border-radius:14px; cursor:pointer; transition:border-color var(--mx-base) ease, background-color var(--mx-base) ease; }
#maew-app .mx-prefs__option:hover { background:#f7f7f5; }
#maew-app .mx-prefs__option:has(input:checked) { border-color:var(--mi-red,#c8102e); background:#fdf3f5; }
#maew-app .mx-prefs__option input { margin:3px 0 0; accent-color:var(--mi-red,#c8102e); flex-shrink:0; }
#maew-app .mx-prefs__option strong { display:block; font-size:13px; font-weight:600; }
#maew-app .mx-prefs__option small { display:block; margin-top:2px; font-weight:400; color:var(--mi-muted,#626967); font-size:11px; line-height:1.4; }
#maew-app .mx-prefs__note { margin:10px 0 0; color:var(--mi-muted,#626967); font-size:11px; line-height:1.45; }
/* intranet.css oculta todo span de la barra superior por debajo de 900 px; el panel lo necesita visible. */
#maew-app .mx-prefs__option>span { display:block!important; }
/* En celular la barra superior es más alta: motion.js coloca el panel justo debajo (--mx-prefs-top). */
@media (max-width:760px) { #maew-app .mx-prefs__panel { position:fixed; top:var(--mx-prefs-top,76px); right:10px; left:10px; width:auto; max-height:calc(100vh - var(--mx-prefs-top,76px) - 16px); overflow:auto; } }

/* =====================================================================
 * 2. MOVIMIENTO — solo con #maew-app.maew-motion
 * ===================================================================== */
#maew-app.maew-motion :is(.maew-btn--primary,.maew-btn--secondary,.eg-button):not(:disabled):hover { transform:translateY(-1px); }
#maew-app.maew-motion :is(.maew-btn,.eg-button,.maew-icon-button,.maew-notification-button,.maew-menu-button,.maew-topbar__actions>a,.maew-view-switch button,.maew-pending-filters button,.maew-ops-tabs button,.maew-pc-tabs button,.maew-admin-tabs a,.maew-context-tabs a,.maew-home-shortcuts a,.maew-mobile-nav>*,.mx-prefs__button,button[type=submit]):not(:disabled):active { transform:scale(.965); transition-duration:.08s; }
#maew-app.maew-motion :is(.maew-btn,.eg-button):hover .maew-icon { transform:translateX(3px); }
#maew-app.maew-motion .maew-home-shortcuts a .maew-icon,
#maew-app.maew-motion .maew-topbar__actions>a .maew-icon { transition:transform var(--mx-base) var(--mx-spring); }
#maew-app.maew-motion .maew-home-shortcuts a:hover .maew-icon,
#maew-app.maew-motion .maew-topbar__actions>a:hover .maew-icon { transform:translate(2px,-2px); }
#maew-app.maew-motion .maew-home-shortcuts a:hover { transform:translateY(-2px); }

/* Onda al tocar: confirma el clic, también en la APK. */
#maew-app .mx-ripple { position:absolute; z-index:-1; border-radius:50%; pointer-events:none; background:currentColor; opacity:.22; transform:scale(0); animation:mx-ripple .6s var(--mx-ease) forwards; }
@keyframes mx-ripple { to { transform:scale(1); opacity:0; } }

#maew-app.maew-motion input[type=checkbox],#maew-app.maew-motion input[type=radio] { transition:transform var(--mx-fast) var(--mx-spring); }
#maew-app.maew-motion input[type=checkbox]:active,#maew-app.maew-motion input[type=radio]:active { transform:scale(.88); }
#maew-app.maew-motion .mx-shake { animation:mx-shake .42s var(--mx-ease); }
@keyframes mx-shake { 0%,100%{transform:none} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }

@media (hover:hover) {
    #maew-app.maew-motion :is(.mx-card,.maew-pending-card,.maew-home-metrics>a,.maew-document-card,.maew-task-card,.maew-team-card,.maew-device-card,.maew-crm-card,.maew-brain-card,.maew-module-card,.maew-booking,.maew-training,.maew-compact-docs>a,.maew-home-news-grid>article,.eg-account-card):hover { transform:translateY(-3px); }
    #maew-app.maew-motion :is(.eg-kpi,:is(.maew-crm-kpis,.maew-orders-kpis,.maew-project-kpis,.maew-workforce-kpis,.maew-security-kpis)>article):hover { transform:translateY(-2px); }
    #maew-app.maew-motion .maew-notification-item:hover { transform:translateX(3px); }
}
#maew-app.maew-motion :is(.mx-card,.maew-pending-card,.maew-home-metrics>a,.maew-document-card,.maew-compact-docs>a,.maew-training):active { transform:scale(.985); transition-duration:.1s; }
#maew-app.maew-motion .maew-home-metrics>a:hover .maew-metric__open { transform:rotate(-45deg) scale(1.08); }
#maew-app.maew-motion .maew-pending-card:hover .maew-pending-card__arrow { transform:translate(2px,-2px); }
#maew-app.maew-motion .maew-home-metrics>a:hover .maew-metric__label>.maew-icon { transform:scale(1.15) rotate(-6deg); }
#maew-app.maew-motion .maew-pending-card.is-selected { animation:mx-select .45s var(--mx-spring); }
@keyframes mx-select { 0%{transform:scale(.97)} 60%{transform:scale(1.015)} 100%{transform:none} }
#maew-app.maew-motion .mx-refresh { animation:mx-refresh .38s var(--mx-ease); }
@keyframes mx-refresh { from { opacity:.25; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Navegación lateral y móvil. */
#maew-app.maew-motion .maew-nav a:hover>.maew-icon { transform:scale(1.12); }
#maew-app.maew-motion .maew-nav a.is-active { animation:mx-nav-in .5s var(--mx-spring); }
@keyframes mx-nav-in { from { transform:scale(.94); opacity:.6; } to { transform:none; opacity:1; } }
#maew-app.maew-motion .maew-nav-area[open]>div>a { animation:mx-fade-up .32s var(--mx-ease) both; }
#maew-app.maew-motion .maew-nav-area[open]>div>a:nth-child(2) { animation-delay:.03s; }
#maew-app.maew-motion .maew-nav-area[open]>div>a:nth-child(3) { animation-delay:.06s; }
#maew-app.maew-motion .maew-nav-area[open]>div>a:nth-child(4) { animation-delay:.09s; }
#maew-app.maew-motion .maew-nav-area[open]>div>a:nth-child(n+5) { animation-delay:.12s; }
#maew-app.maew-motion .maew-mobile-nav a.is-active .maew-icon { animation:mx-pop-icon .45s var(--mx-spring); }
@keyframes mx-pop-icon { 0%{transform:scale(.7)} 70%{transform:scale(1.15)} 100%{transform:none} }

/* Pestañas, desplegables y paneles emergentes. */
#maew-app.maew-motion :is(.maew-ops-tabs,.maew-pc-tabs,.maew-admin-tabs,.maew-context-tabs) :is(button,a):is([aria-selected=true],[aria-current],.is-active) { animation:mx-tab-in .35s var(--mx-spring); }
@keyframes mx-tab-in { from { transform:scale(.92); } to { transform:none; } }
#maew-app.maew-motion :is([data-ops-panel],[data-pc-panel],[role=tabpanel]):not([hidden]) { animation:mx-fade-up .34s var(--mx-ease); }
#maew-app.maew-motion details:not(.maew-nav-area)[open]>:not(summary) { animation:mx-fade-up .3s var(--mx-ease) both; }
#maew-app.maew-motion [data-notification-panel]:not([hidden]) { transform-origin:top right; animation:mx-pop .26s var(--mx-ease); }
#maew-app.maew-motion [data-portal-results]:not([hidden]) { transform-origin:top center; animation:mx-pop .22s var(--mx-ease); }
#maew-app.maew-motion .maew-modal:not([hidden]) .maew-modal__backdrop { animation:mx-fade .25s ease; }
#maew-app.maew-motion .maew-modal:not([hidden]) .maew-modal__dialog { animation:mx-zoom .34s var(--mx-spring); }
#maew-app.maew-motion dialog[open]:not(.eg-dialog) { animation:mx-zoom .32s var(--mx-spring); }
#maew-app.maew-motion dialog[open]:not(.eg-dialog)::backdrop { animation:mx-fade .25s ease; }
@keyframes mx-pop { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes mx-zoom { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes mx-fade { from { opacity:0; } to { opacity:1; } }
@keyframes mx-fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Avisos, campana y contadores. */
#maew-app.maew-motion .maew-alert { animation:mx-alert .5s var(--mx-spring); }
@keyframes mx-alert { from { opacity:0; transform:translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }
#maew-app.maew-motion .mx-bump { animation:mx-bump .5s var(--mx-spring); }
@keyframes mx-bump { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
#maew-app.maew-motion .mx-ring svg { transform-origin:50% 10%; animation:mx-ring .9s var(--mx-ease); }
@keyframes mx-ring { 0%,100%{transform:rotate(0)} 15%{transform:rotate(14deg)} 30%{transform:rotate(-12deg)} 45%{transform:rotate(8deg)} 60%{transform:rotate(-5deg)} 75%{transform:rotate(2deg)} }
#maew-app.maew-motion .maew-notification-item.is-unread>span:first-child { animation:mx-dot 2.4s ease-in-out infinite; }
#maew-app.maew-motion .maew-status--new { animation:mx-glow 2.4s ease-in-out 3; }
@keyframes mx-dot { 0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.45)} 50%{box-shadow:0 0 0 5px rgba(200,16,46,0)} }
@keyframes mx-glow { 0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.3)} 50%{box-shadow:0 0 0 6px rgba(200,16,46,0)} }

/* Entrada al cargar y al desplazarse. */
#maew-app.maew-motion .maew-content { animation:mx-page-in .5s var(--mx-ease) both; }
@keyframes mx-page-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
#maew-app.maew-motion [data-mx-reveal] { opacity:0; transform:translateY(16px); animation:none!important; }
#maew-app.maew-motion [data-mx-reveal].is-in { opacity:1; transform:none; transition:opacity .55s var(--mx-ease), transform .65s var(--mx-ease)!important; }
/* Barras de avance: crecen desde la izquierda al quedar visibles. */
#maew-app.maew-motion [data-mx-bar] { transform-origin:left center; transform:scaleX(0); }
#maew-app.maew-motion [data-mx-bar].is-in { transform:scaleX(1); transition:transform 1s var(--mx-ease)!important; }
/* Cifras: ancho estable mientras cuentan, para que la tarjeta no salte. */
#maew-app [data-mx-counting] { font-variant-numeric:tabular-nums; }

/* Activadas por la persona aunque Windows pida reducir movimiento: anula la regla general de intranet.css. */
@media (prefers-reduced-motion:reduce) {
    #maew-app.mx-force-motion.maew-motion [data-mx-reveal].is-in,
    #maew-app.mx-force-motion.maew-motion [data-mx-bar].is-in { transition-duration:.55s!important; }
}

/* «Reducidas» elegido en la intranet: misma calma que pide Windows. */
#maew-app.mx-no-motion *, #maew-app.mx-no-motion *::before, #maew-app.mx-no-motion *::after { animation:none!important; transition-property:color,background-color,border-color,box-shadow,opacity,outline-color!important; scroll-behavior:auto!important; }
#maew-app.mx-no-motion :is(.mx-loading,.mx-skeleton>i) { animation:mx-shimmer 1.3s linear infinite!important; }
#maew-app.mx-no-motion .is-busy::after { animation:mx-spin .9s linear infinite!important; }

/* Cambio de página: fundido corto en Chrome, Edge y Safari recientes. Solo opacidad, sin desplazamiento. */
@view-transition { navigation:auto; }
#maew-app.maew-cockpit .maew-sidebar { view-transition-name:mx-sidebar; }
#maew-app.maew-cockpit .maew-topbar { view-transition-name:mx-topbar; }
::view-transition-old(root) { animation:mx-vt-out .16s ease both; }
::view-transition-new(root) { animation:mx-vt-in .28s ease both; }
@keyframes mx-vt-out { to { opacity:0; } }
@keyframes mx-vt-in { from { opacity:0; } }

@media print {
    #maew-app [data-mx-reveal],#maew-app [data-mx-bar] { opacity:1!important; transform:none!important; }
    .mx-progress,#maew-app .mx-prefs { display:none; }
}

/* El tema (Hello Elementor, reset.css) pinta de rosado #c36 todo botón en :hover y :focus. Los botones de la
   intranet conservan sus colores; antes, un botón secundario quedaba rosado después de pulsarlo. */
#maew-app .maew-btn--primary:focus:not(:hover) { background: var(--mi-red, #c8102e); border-color: var(--mi-red, #c8102e); color: #fff; }
#maew-app .maew-btn--secondary:focus:not(:hover) { background: #fff; color: var(--mi-ink, #202322); }
#maew-app .maew-btn--secondary:hover { color: var(--mi-ink, #202322); }
#maew-app .mx-prefs__button:is(:hover, :focus) { background: #3a423b; color: #fff; }
#maew-app .mx-prefs__option input:focus { background: transparent; }
#maew-app .mx-prefs__option { white-space: normal; }