/* Capa de movimiento: entradas escalonadas, ondas en botones, barra de progreso de desplazamiento y microinteracciones.
 * Todo respeta «reducir movimiento» (al final) y no cambia el diseño: solo añade transiciones. Lo activa motion.js. */
@keyframes mIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes mRow{from{opacity:0;transform:translateX(-8px)}}
@keyframes mRipple{to{transform:scale(1);opacity:0}}
@keyframes mPop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:none}}

#view .m-in{animation:mIn .55s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--m, 0) * 55ms + 60ms)}
#view table.dg tbody tr.m-row{animation:mRow .4s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--m, 0) * 22ms + 120ms)}

/* barra de progreso de desplazamiento */
#scrollBar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:80;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);opacity:0;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#8b5cf6));transition:opacity .25s}
#scrollBar.on{opacity:1}

/* botones: pulsación, elevación y onda */
.btn,.chip,.seg button,.adm-fchip{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background-color .2s,border-color .2s,color .2s,opacity .2s}
.btn{position:relative;overflow:hidden}
@media (hover:hover){.btn:not(:disabled):hover{transform:translateY(-1px)}.btn.primary:not(:disabled):hover{box-shadow:0 8px 20px -8px var(--accent)}}
.btn:not(:disabled):active,.chip:active,.seg button:active{transform:translateY(0) scale(.96)}
.m-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:mRipple .6s ease-out forwards}

/* paneles: elevación suave al pasar el cursor (no en los que contienen tablas con desplazamiento) */
@media (hover:hover){
  #view .panel{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
  #view .panel:not(:has(.grid-wrap)):hover{transform:translateY(-2px);box-shadow:0 18px 38px -22px rgba(15,30,70,.4)}
}
/* filas de tabla y pestañas: respuesta inmediata */
table.dg tbody tr{transition:background-color .15s}
.chip.on,.chip[aria-pressed=true],.seg button[aria-pressed=true]{animation:mPop .3s cubic-bezier(.2,.9,.3,1.2)}
/* toast y diálogos: entrada con rebote corto */
.toast.show{animation:mPop .35s cubic-bezier(.2,.9,.3,1.2)}
:focus-visible{transition:outline-offset .15s}

@media (prefers-reduced-motion:reduce){
  #view .m-in,#view table.dg tbody tr.m-row,.m-ripple,.toast.show,.chip.on,.seg button[aria-pressed=true]{animation:none}
  #scrollBar{display:none}
  .btn:hover,#view .panel:hover{transform:none}
}

/* ---- esqueletos de carga ---- */
.m-skel{height:96px;border-radius:var(--r-lg,18px);margin:0 0 14px;background:linear-gradient(90deg,var(--rule-2) 20%,var(--glass-strong) 50%,var(--rule-2) 80%);background-size:220% 100%;animation:mSkel 1.3s linear infinite}
.m-skel.short{height:44px;width:55%}
@keyframes mSkel{to{background-position:-220% 0}}
@keyframes mBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes mFloat{from{opacity:0;transform:translateY(-10px)}}

/* ---- estados vacíos y avisos con vida ---- */
.empty::before,.adm-empty::before{content:"🔍";display:block;font-size:30px;margin-bottom:8px;animation:mBob 2.4s ease-in-out infinite}
.toast:not(.err) .toast-msg::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;font-size:12px;font-weight:800;color:#fff;background:var(--ok,#12a371);animation:mPop .4s cubic-bezier(.2,.9,.3,1.3)}
.toast.err .toast-msg::before{content:"⚠";margin-right:8px;color:var(--warn)}

/* ---- cabeceras y entradas de las páginas de administración y legales ---- */
body:has(#adm-main) .shell>*,body:has(.legal-nav) .shell>*{animation:mFloat .6s cubic-bezier(.16,1,.3,1) backwards}
body:has(#adm-main) .shell>:nth-child(2),body:has(.legal-nav) .shell>:nth-child(2){animation-delay:.06s}
body:has(#adm-main) .shell>:nth-child(3),body:has(.legal-nav) .shell>:nth-child(3){animation-delay:.12s}
body:has(#adm-main) .shell>:nth-child(4),body:has(.legal-nav) .shell>:nth-child(4){animation-delay:.18s}
html:not(:has(#app)){scroll-behavior:smooth}
.brand-img,.brand-mark{transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}
.brand:hover .brand-img,.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.08)}
#adm-main .m-in{animation:mIn .5s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--m, 0) * 45ms)}

/* ---- botones y conmutadores: mismo comportamiento en todas las páginas ---- */
.theme-toggle button{transition:background .2s,color .2s,transform .18s}
@media (hover:hover){.theme-toggle button:hover{transform:scale(1.08)}.btn svg{transition:transform .22s cubic-bezier(.2,.7,.2,1),color .2s}.btn:hover:not(:disabled) svg{transform:scale(1.12);color:var(--accent)}}
.theme-toggle button[aria-pressed=true]{animation:mPop .3s cubic-bezier(.2,.9,.3,1.2)}

/* ---- menú de secciones (móvil): botones compactos que caben y la página de fondo no se desplaza ---- */
@media (max-width:980px){
  html .nav-fan .fan-list button{min-height:clamp(32px,calc((100dvh - 190px - var(--n) * 6px) / var(--n)),42px);font-size:13px;padding-right:14px}
  html .nav-fan .fan-list .fi{flex-basis:28px;width:28px;height:28px}
  html .nav-fan .fan-list .fi svg{width:16px;height:16px}
  html .nav-fan .fan-list{gap:6px}
  html.fan-open,html.fan-open body{overflow:hidden;overscroll-behavior:none}
  .nav-fan:not([hidden]){touch-action:none}.nav-fan .fan-list{touch-action:pan-y}
  /* la barra de énfasis de la página activa queda dentro del botón */
  html #nav button[aria-current=true]::before{left:5px;top:10px;bottom:10px}
  html #nav button[aria-current=true]{padding-left:16px}
}
@media (prefers-reduced-motion:reduce){
  .m-skel,.empty::before,.adm-empty::before,.toast .toast-msg::before,.theme-toggle button[aria-pressed=true],body:has(#adm-main) .shell>*,body:has(.legal-nav) .shell>*{animation:none}
  html{scroll-behavior:auto!important}
}

/* ---- Agente: conexión (con o sin clave) ---- */
.key-more{margin-top:10px}
.key-more>summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:14px;padding:6px 0;list-style:none;display:flex;align-items:center;gap:8px}
.key-more>summary::-webkit-details-marker{display:none}
.key-more>summary::before{content:"›";display:inline-block;font-size:18px;line-height:1;transition:transform .2s}
.key-more[open]>summary::before{transform:rotate(90deg)}
.key-cmp{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin:10px 0 14px}
.key-opt{position:relative;padding:12px 14px 12px;border-radius:var(--r-md,14px);background:var(--glass-soft);border:1px solid var(--rule-2);display:grid;gap:4px;align-content:start}
.key-opt.on{border-color:var(--accent);background:var(--tint-table);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.key-opt.on::after{content:"En uso";position:absolute;top:10px;right:12px;font-size:11px;font-weight:700;color:var(--accent)}
.key-opt-ico{font-size:20px;line-height:1}
.key-opt b{font-size:14px}
.key-opt p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}

/* ---- Agente: formato del chat ---- */
#msgsX{max-height:min(62vh,640px);overflow-y:auto;padding:4px 8px 4px 2px;margin-bottom:6px;scroll-behavior:smooth;overscroll-behavior:contain}
#view .msg{font-size:15px;margin-bottom:16px}
#view .msg.user{line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;padding:11px 16px}
#view .msg.bot{font-size:15px;line-height:1.7;overflow-wrap:anywhere;padding:14px 18px}
#view .msg.bot h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin:20px 0 8px;padding-bottom:6px}
#view .msg.bot h4{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:16px 0 6px}
#view .msg.bot>:first-child{margin-top:0}
#view .msg.bot p{margin:0 0 12px}
#view .msg.bot b{font-weight:650;color:var(--ink)}
#view .msg.bot ul,#view .msg.bot ol{margin:0 0 12px;padding-left:24px}
#view .msg.bot li{margin:5px 0;padding-left:2px}
#view .msg.bot code{font-family:var(--mono);font-size:.87em;padding:2px 6px;border:1px solid var(--rule-2)}
#view .msg.bot pre{margin:10px 0 14px;padding:14px 16px;font-size:13px;line-height:1.6;border-left:3px solid var(--accent)}
#view .msg.bot pre code{border:0;font-size:inherit}
#view .msg.bot blockquote{margin:0 0 12px;padding:8px 14px;border-left:3px solid var(--accent);background:var(--tint-table);border-radius:0 10px 10px 0;color:var(--ink-2)}
#view .msg.bot hr{border:0;border-top:1px solid var(--rule);margin:16px 0}
#view .msg.bot a{color:var(--accent);text-underline-offset:3px}
#view .msg.bot table{border-collapse:separate;border-spacing:0;border:1px solid var(--rule);border-radius:10px;overflow:hidden;font-size:13.5px;margin:6px 0 14px}
#view .msg.bot td,#view .msg.bot th{border:0;border-bottom:1px solid var(--rule-2);padding:7px 12px}
#view .msg.bot tr:last-child td{border-bottom:0}
#view .msg.bot tr:nth-child(even) td{background:var(--glass-soft)}
.pbi-chat .composer textarea{font-size:15px;line-height:1.5;padding:12px 14px}
.pbi-chat .panel-h{flex-wrap:wrap}

/* ---- separación entre contenedores consecutivos ---- */
#view>.panel+.panel,#view>.panel+.empty,#view>.panel+p{margin-top:24px}
.chg-done .panel-h{flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){#msgsX{scroll-behavior:auto}}