/* ============================================================================
   Cabaña Mucarzel · admin-motion.css — MOVIMIENTO del SO de gestión
   Se carga DESPUÉS de admin.css. Prefijo `mk-`. Criterio de panel de trabajo:
   rápido (150–300ms), con propósito, nunca estorba. Nada bloquea la lectura.
   ============================================================================ */
:root{
  --e-snappy:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}

/* ── MARCA DE AGUA · el mismo escudo que en la web pública ───────────────── */
body.admin::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("assets/logo-mucarzel.jpg") 62% 52% / min(58vmin,560px) no-repeat;
  opacity:.05;mix-blend-mode:screen;filter:contrast(1.15) saturate(1.2)}
@media(max-width:820px){body.admin::before{background-size:min(80vmin,380px);background-position:center 40%}}

/* misma idea que en la web: con la ficha abierta el backdrop tapa el escudo, así
   que vuelve sobre el fondo y dentro de la tarjeta. Acá un punto más tenue: el
   panel es herramienta de trabajo, no vidriera. */
/* grande a propósito: si fuera chico quedaría entero detrás de la tarjeta */
.modal-backdrop::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("assets/logo-mucarzel.jpg") center 46% / min(110vmin,1000px) no-repeat;
  opacity:.06;mix-blend-mode:screen;filter:contrast(1.15) saturate(1.2)}
.modal-card{
  background:
    linear-gradient(180deg,rgba(27,24,19,.95),rgba(20,19,16,.95)),
    url("assets/logo-mucarzel.jpg") right -40px bottom -38px / min(280px,60%) no-repeat,
    linear-gradient(180deg,var(--panel-2),var(--panel));
  background-blend-mode:normal,screen,normal}
@media(max-width:560px){.modal-card{background-size:auto,min(220px,64%),auto}}

/* ── LOGIN ───────────────────────────────────────────────────────────────── */
.login-screen{position:relative;overflow:hidden}
.mk-login-dust{position:absolute;inset:0;pointer-events:none}
.login-card{position:relative;z-index:1;animation:mk-cardup .8s var(--e-out)}
@keyframes mk-cardup{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.login-logo{animation:mk-logoin 1.1s var(--e-spring) .1s backwards}
@keyframes mk-logoin{from{opacity:0;transform:scale(.7) rotate(-14deg)}to{opacity:1;transform:none}}
.login-card input{transition:border-color .22s ease,box-shadow .22s ease,background .22s ease}
.login-card input:focus{box-shadow:0 0 0 3px rgba(201,162,75,.14)}
.login-card.mk-shake{animation:mk-shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes mk-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.btn.mk-busy{pointer-events:none;position:relative;color:transparent!important}
.btn.mk-busy::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(34,26,9,.35);border-top-color:#221a09;border-radius:50%;animation:mk-spin .7s linear infinite}
@keyframes mk-spin{to{transform:rotate(360deg)}}

/* ── SHELL ───────────────────────────────────────────────────────────────── */
.shell:not(.hidden){animation:mk-fade .4s ease}
@keyframes mk-fade{from{opacity:0}to{opacity:1}}
.side-nav{position:relative}
.mk-ind{position:absolute;left:.8rem;right:.8rem;height:38px;border-radius:10px;pointer-events:none;
  background:rgba(201,162,75,.12);border-left:2px solid var(--dorado);opacity:0;
  transition:transform .38s var(--e-out),opacity .3s ease,height .3s var(--e-out)}
.side-nav a{position:relative;z-index:1;background:transparent!important;
  transition:color .2s ease,transform .25s var(--e-out),padding-left .25s var(--e-out)}
.side-nav a:hover{transform:translateX(2px)}
.side-nav a svg{transition:transform .35s var(--e-spring),opacity .2s}
.side-nav a:hover svg,.side-nav a.on svg{transform:scale(1.12)}
.side-brand img{transition:transform .6s var(--e-spring)}
.side-brand:hover img{transform:rotate(-8deg) scale(1.06)}

/* backdrop del menú lateral en móvil */
.mk-side-back{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .28s ease}
.mk-side-back.on{opacity:1;pointer-events:auto}

/* ── TRANSICIÓN DE VISTA ─────────────────────────────────────────────────── */
@keyframes mk-viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view.mk-in{animation:mk-viewin .34s var(--e-out)}
/* el título entra con la vista. Va por keyframes (no por opacity + timeout) para que
   nunca pueda quedarse invisible si algo interrumpe el temporizador. */
@keyframes mk-titlein{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.topbar.mk-swap #tb-title{animation:mk-titlein .3s var(--e-out)}
.topbar.mk-swap #tb-sub{animation:mk-titlein .3s var(--e-out) .04s backwards}

/* entrada escalonada de bloques dentro de la vista */
@keyframes mk-blockin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.view.mk-in .kpi{animation:mk-blockin .42s var(--e-out) backwards}
.view.mk-in .kpi:nth-child(1){animation-delay:.02s}
.view.mk-in .kpi:nth-child(2){animation-delay:.07s}
.view.mk-in .kpi:nth-child(3){animation-delay:.12s}
.view.mk-in .kpi:nth-child(4){animation-delay:.17s}
.view.mk-in .panel,.view.mk-in .ai-hero,.view.mk-in .copilot{animation:mk-blockin .45s var(--e-out) .06s backwards}

/* ── KPIs ────────────────────────────────────────────────────────────────── */
.kpi{position:relative;overflow:hidden;transition:transform .3s var(--e-out),border-color .3s ease,box-shadow .3s ease}
.kpi:hover{transform:translateY(-3px);border-color:var(--linea-2);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.kpi::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(201,162,75,.14) 50%,transparent 65%);
  transform:translateX(-110%);transition:transform .9s var(--e-out)}
.kpi:hover::after{transform:translateX(110%)}
/* cifras alineadas y en versalitas modernas: en el panel se leen mejor que las
   antiguas (old-style) de la Cormorant, donde el 1 parece una I */
.kpi .v,.bar .bv,.rankrow-top b{font-variant-numeric:lining-nums tabular-nums}
.sdot{position:relative}
.sdot.warn::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--warn);
  animation:mk-pulse 1.9s var(--e-out) infinite}
@keyframes mk-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.6);opacity:0}}

/* ── PANELES / TABLAS ────────────────────────────────────────────────────── */
.panel{transition:border-color .3s ease}
.panel:hover{border-color:var(--linea-2)}
@keyframes mk-rowin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.tbl tbody tr.mk-row{animation:mk-rowin .3s var(--e-out) backwards}
.tbl tbody tr{transition:background .16s ease}
.tbl tbody tr:hover td{background:rgba(201,162,75,.05)}
.row-animal,.row-emp,.row-ins{position:relative}
.row-animal:hover td:first-child::before,.row-emp:hover td:first-child::before,
.row-ins:hover td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--dorado)}
.tbl .row-actions .btn{opacity:.55;transition:opacity .2s ease,transform .2s var(--e-out)}
tr:hover .row-actions .btn{opacity:1}
.btn{transition:transform .2s var(--e-out),filter .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn:active{transform:scale(.96)}
.fchip{transition:transform .2s var(--e-spring),background .25s var(--e-out),color .2s,border-color .2s}
.fchip:hover{color:var(--crema);border-color:var(--dorado)}
.fchip:active{transform:scale(.95)}
.search{transition:border-color .2s ease,box-shadow .2s ease,min-width .3s var(--e-out)}
.search:focus{box-shadow:0 0 0 3px rgba(201,162,75,.12)}

/* barras animadas (distribución del hato / rubros).
   min-width:0 + corte de palabra: sin esto las etiquetas ("Reproductor") le ponen
   un ancho mínimo a cada barra y el panel desborda en móvil. */
.bars,.bar{min-width:0}
.bar .bl{overflow-wrap:anywhere;line-height:1.2}
@media(max-width:560px){.bar .bl{font-size:.6rem}.bars{gap:.4rem}}
.bar .col{transition:height .9s var(--e-out)}
.bar{transition:transform .25s var(--e-out)}
.bar:hover{transform:translateY(-3px)}
.bar:hover .col{filter:brightness(1.15)}
.barmini i{transition:width 1s var(--e-out)}
.rankrow{transition:background .2s ease;border-radius:8px}
.rankrow:hover{background:rgba(201,162,75,.04)}
.evt{transition:background .2s ease,padding-left .25s var(--e-out);border-radius:8px}
.evt:hover{background:rgba(201,162,75,.04);padding-left:.4rem}
.alert,.reco,.inf-row{transition:background .2s ease,transform .25s var(--e-out);border-radius:9px}
.alert:hover,.reco:hover{background:rgba(255,255,255,.035)}
.inf-row:hover{background:rgba(201,162,75,.04)}

/* ── SKELETONS (mientras carga la vista) ─────────────────────────────────── */
.sk-wrap{animation:mk-fade .2s ease}
.sk{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--linea);
  background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.07),transparent);
  animation:mk-shimmer 1.25s infinite}
@keyframes mk-shimmer{to{transform:translateX(100%)}}
.sk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.4rem;
  background:none;border:0;overflow:visible}
.sk-kpis::after{display:none}
.sk-kpis i{display:block;height:98px;border-radius:14px;border:1px solid var(--linea);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));position:relative;overflow:hidden}
.sk-kpis i::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.07),transparent);
  animation:mk-shimmer 1.25s infinite}
.sk-kpis i:nth-child(2)::after{animation-delay:.1s}
.sk-kpis i:nth-child(3)::after{animation-delay:.2s}
.sk-kpis i:nth-child(4)::after{animation-delay:.3s}
.sk-panel{height:240px;margin-bottom:1.2rem}
.sk-panel.sk-sm{height:150px}
@media(max-width:820px){.sk-kpis{grid-template-columns:repeat(2,1fr)}}

/* ── COPILOTO ────────────────────────────────────────────────────────────── */
@keyframes mk-bubblein{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
.cop-msg{animation:mk-bubblein .32s var(--e-out)}
.copilot-av{position:relative}
.copilot-av::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(201,162,75,.5);animation:mk-halo 3.2s var(--e-out) infinite}
@keyframes mk-halo{0%{transform:scale(.92);opacity:.75}70%,100%{transform:scale(1.4);opacity:0}}
.mk-typing{display:inline-flex;gap:4px;align-items:center;padding:.15rem 0}
.mk-typing i{width:6px;height:6px;border-radius:50%;background:var(--dorado);opacity:.45;
  animation:mk-blink 1s infinite}
.mk-typing i:nth-child(2){animation-delay:.16s}
.mk-typing i:nth-child(3){animation-delay:.32s}
@keyframes mk-blink{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.chip-btn{transition:background .25s var(--e-out),color .2s,border-color .2s,transform .2s var(--e-spring)}
.chip-btn:active{transform:scale(.95)}
.copilot-form button{transition:transform .3s var(--e-spring),box-shadow .3s ease}
.copilot-form button:hover{transform:scale(1.08) rotate(6deg);box-shadow:0 0 20px rgba(201,162,75,.4)}

/* ── MODAL / TOAST ───────────────────────────────────────────────────────── */
@keyframes mk-modalin{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
.modal:not([hidden]) .modal-card{animation:mk-modalin .34s var(--e-out)}
.modal:not([hidden]) .modal-backdrop{animation:mk-fade .25s ease}
.toast{display:flex;align-items:center;gap:.5rem;opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(220%);
  transition:transform .42s var(--e-spring),opacity .25s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast::before{content:"";width:7px;height:7px;border-radius:50%;background:#221a09;flex:none}

/* ── PALETA DE COMANDOS (Ctrl/⌘ + K) ─────────────────────────────────────── */
.mk-kbtn{display:inline-flex;align-items:center;gap:.5rem;margin-right:.9rem;padding:.42rem .7rem;
  border-radius:9px;border:1px solid var(--linea-2);background:rgba(0,0,0,.3);color:var(--mut);
  font-size:.8rem;cursor:pointer;transition:.2s}
.mk-kbtn:hover{border-color:var(--dorado);color:var(--crema)}
.mk-kbtn kbd{font-family:var(--mono);font-size:.68rem;color:var(--dorado);
  border:1px solid var(--linea-2);border-radius:5px;padding:.05rem .3rem}
.mk-pal{position:fixed;inset:0;z-index:300;display:grid;place-items:start center;padding:12vh 1rem 1rem}
.mk-pal[hidden]{display:none}
.mk-pal-back{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(5px);
  animation:mk-fade .2s ease}
.mk-pal-card{position:relative;width:min(620px,100%);background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--linea-2);border-radius:16px;box-shadow:0 40px 90px rgba(0,0,0,.7);overflow:hidden;
  animation:mk-modalin .3s var(--e-out)}
.mk-pal-card input{width:100%;padding:1rem 1.2rem;border:0;border-bottom:1px solid var(--linea);
  background:transparent;color:var(--crema);font-size:1rem;font-family:var(--ui)}
.mk-pal-card input:focus{outline:none}
.mk-pal-card input::placeholder{color:var(--mut)}
.mk-pal-list{max-height:52vh;overflow-y:auto;padding:.4rem}
.mk-pal-list::-webkit-scrollbar{width:7px}
.mk-pal-list::-webkit-scrollbar-thumb{background:var(--linea-2);border-radius:4px}
.mk-pal-sec{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dorado);
  font-weight:700;padding:.7rem .8rem .3rem}
.mk-pal-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:10px;cursor:pointer;
  color:var(--texto);font-size:.92rem;transition:background .14s ease}
.mk-pal-item .mk-pal-tag{margin-left:auto;font-size:.7rem;color:var(--mut);font-family:var(--mono)}
.mk-pal-item.on{background:rgba(201,162,75,.14);color:var(--crema)}
.mk-pal-item.on .mk-pal-tag{color:var(--dorado-claro)}
.mk-pal-foot{display:flex;gap:1rem;padding:.6rem .9rem;border-top:1px solid var(--linea);
  color:var(--mut);font-size:.72rem}
.mk-pal-foot b{color:var(--dorado);font-weight:600}
.mk-pal-empty{padding:1.6rem;text-align:center;color:var(--mut);font-size:.88rem}
/* en pantallas chicas el buscador queda como ícono y el título se compacta,
   así la barra superior nunca desborda */
@media(max-width:820px){
  .mk-kbtn span,.mk-kbtn kbd{display:none}
  .mk-kbtn{padding:.45rem .55rem;margin-right:.4rem}
  .topbar{padding:.9rem 1rem;gap:.6rem}
  #tb-title{font-size:1.25rem}
  .topbar .sub{font-size:.76rem}
  .tb-web{font-size:.78rem;text-align:right}
  .view{padding:1.1rem}
}

/* ── movimiento reducido ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .mk-login-dust{display:none}
}