/* EGStrategy · notificaciones, progreso y microanimaciones (09-oct-2026). Si el sistema pide menos movimiento,
   las animaciones se reducen al mínimo (ver el final). */

/* ── Barra de carga superior ── */
.carga{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none;opacity:0;transition:opacity .3s}
.carga.is-on{opacity:1}
.carga.is-fin{opacity:0;transition:opacity .35s .15s}
.carga i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);transition:transform .25s ease-out;
  background:linear-gradient(90deg,#1fa897,#2bc4b2 60%,#7fe3d4);box-shadow:0 0 10px rgba(43,196,178,.7),0 0 4px rgba(43,196,178,.6)}
.carga i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:carga-brillo 1.1s linear infinite}
@keyframes carga-brillo{from{background-position:-40% 0}to{background-position:140% 0}}

/* ── Avisos (toasts) ── */
.ntfs{position:fixed;right:18px;bottom:18px;z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;width:min(400px,calc(100vw - 32px))}
.ntf{--ntf:#2bc4b2;position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:12px 12px 14px 12px;border-radius:14px;overflow:hidden;pointer-events:auto;
  background:#132328;color:#e7eeec;border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--ntf);
  box-shadow:0 14px 38px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.25);backdrop-filter:blur(10px);font-size:14px;line-height:1.4;
  animation:ntf-entra .38s cubic-bezier(.2,.9,.3,1.25) both}
.ntf.is-saliendo{animation:ntf-sale .26s ease-in both}
.ntf--ok{--ntf:#2bc48a}.ntf--error{--ntf:#ef5b60}.ntf--aviso{--ntf:#e0a43b}.ntf--info{--ntf:#2bc4b2}.ntf--progreso{--ntf:#4f8ff0}
.ntf__ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ntf);
  background:color-mix(in srgb,var(--ntf) 18%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--ntf) 7%,transparent)}
.ntf--ok .ntf__ic svg{animation:ntf-tick .5s .12s cubic-bezier(.3,1.6,.5,1) both}
.ntf--error .ntf__ic{animation:ntf-sacude .45s .1s both}
.ntf__cuerpo{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.ntf__txt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ntf__n{font-size:11.5px;font-weight:800;color:var(--ntf);background:color-mix(in srgb,var(--ntf) 16%,transparent);border-radius:20px;padding:1px 7px}
.ntf__accion{flex:0 0 auto;font:inherit;font-size:13px;font-weight:700;color:var(--ntf);background:none;border:1px solid color-mix(in srgb,var(--ntf) 45%,transparent);border-radius:8px;padding:5px 10px;cursor:pointer}
.ntf__accion:hover{background:color-mix(in srgb,var(--ntf) 14%,transparent)}
.ntf__x{flex:0 0 auto;align-self:flex-start;display:flex;padding:4px;border:0;border-radius:7px;background:none;color:inherit;opacity:.45;cursor:pointer}
.ntf__x:hover{opacity:1;background:rgba(255,255,255,.08)}
.ntf__t{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:0 50%;background:var(--ntf);opacity:.55;animation:ntf-tiempo linear both}
.ntf:hover .ntf__t{animation-play-state:paused}
.ntf__pct{font-size:12.5px;font-weight:700;color:var(--ntf);font-variant-numeric:tabular-nums}
.ntf__barra{flex:1 0 100%;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.ntf__barra i{display:block;height:100%;width:0;border-radius:6px;transition:width .3s ease;
  background:linear-gradient(90deg,var(--ntf),color-mix(in srgb,var(--ntf) 55%,#fff));background-size:200% 100%;animation:ntf-flujo 1.2s linear infinite}
@keyframes ntf-entra{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ntf-sale{to{opacity:0;transform:translateX(30px) scale(.97);margin-bottom:-60px}}
@keyframes ntf-tiempo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes ntf-tick{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
@keyframes ntf-sacude{0%,100%{transform:none}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes ntf-flujo{from{background-position:200% 0}to{background-position:0 0}}
@media (max-width:600px){.ntfs{right:12px;left:12px;bottom:12px;width:auto}}

/* ── Pop-up de avisos (arriba a la derecha) ── */
.npop{position:fixed;top:68px;right:18px;z-index:140;width:min(380px,calc(100vw - 32px));border-radius:16px;overflow:hidden;
  background:rgba(19,34,39,.97);color:#e7eeec;border:1px solid rgba(127,216,200,.22);box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset;backdrop-filter:blur(14px)}
.npop[hidden]{display:none}
.npop.is-entrando{animation:npop-entra .45s cubic-bezier(.2,.9,.3,1.2) both}
.npop.is-saliendo{animation:npop-sale .22s ease-in both}
.npop__head{display:flex;align-items:center;gap:11px;padding:14px 12px 8px 14px}
.npop__ic{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#2bc4b2;background:rgba(31,168,151,.16)}
.npop__ic.is-avatar{background:none}
.npop__ic.is-avatar .avatar{width:38px;height:38px;border-radius:12px;font-size:14px}
.npop__ic--mencion{color:#7fb0ff;background:rgba(79,143,240,.16)}
.npop__ic--tarea{color:#2bc48a;background:rgba(43,196,138,.16)}
.npop__ic--archivo{color:#e0a43b;background:rgba(224,164,59,.16)}
.npop__ic--evento{color:#d06fb0;background:rgba(208,111,176,.16)}
.npop__ic--asistente{color:#c5a7ff;background:linear-gradient(135deg,rgba(154,127,224,.22),rgba(31,168,151,.18))}
.npop__ic svg{animation:npop-ic .6s .15s cubic-bezier(.3,1.6,.5,1) both}
.npop__tt{flex:1;min-width:0;display:flex;flex-direction:column}
.npop__tt b{font-size:15px;line-height:1.25;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npop__tt small{font-size:12px;color:#9aaaab}
.npop__x{flex:0 0 auto;align-self:flex-start;display:flex;padding:6px;border:0;border-radius:8px;background:none;color:#9aaaab;cursor:pointer}
.npop__x:hover{background:rgba(255,255,255,.08);color:#fff}
.npop__body{padding:2px 16px 14px 16px;font-size:14px;max-height:50vh;overflow:auto;color:#d6e1df}
.npop__body p{margin:4px 0}
.npop__body ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.npop__body li{position:relative;padding-left:23px;font-size:13.5px}
.npop__body li > .ic{position:absolute;left:0;top:2px;color:#2bc4b2}
.npop__msg{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.npop__item{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid rgba(255,255,255,.06)}
.npop__item:first-child{border-top:0}
.npop__item p{margin:0;font-size:13.5px}
.npop__mini{flex:0 0 auto;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#2bc4b2;background:rgba(31,168,151,.14)}
.npop__mini .ic{width:13px;height:13px}
.npop__acc{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.npop__tiempo{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:0 50%;background:linear-gradient(90deg,#1fa897,#2bc4b2);opacity:.7;animation:ntf-tiempo 20s linear both}
.npop:hover .npop__tiempo{animation-play-state:paused}
@keyframes npop-entra{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes npop-sale{to{opacity:0;transform:translateY(-8px) scale(.97)}}
@keyframes npop-ic{from{transform:scale(.3) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}

/* ── Campana: se balancea al llegar algo y el contador salta ── */
.bell-btn.is-sacude svg{animation:campana .9s ease both;transform-origin:50% 3px}
.bell-btn.is-sacude .bell-badge{animation:salto .5s .1s cubic-bezier(.3,1.8,.5,1) both}
.bell-btn.has .bell-badge{box-shadow:0 0 0 0 rgba(224,164,59,.55);animation:latido 2.4s 1s ease-out infinite}
.bell-btn.is-sacude.has .bell-badge{animation:salto .5s .1s cubic-bezier(.3,1.8,.5,1) both,latido 2.4s 1.2s ease-out infinite}
@keyframes campana{0%,100%{transform:none}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}75%{transform:rotate(3deg)}}
@keyframes salto{from{transform:scale(.4)}to{transform:none}}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(224,164,59,.5)}70%{box-shadow:0 0 0 8px rgba(224,164,59,0)}100%{box-shadow:0 0 0 0 rgba(224,164,59,0)}}

/* ── Panel de la campana ── */
.bell-panel{width:min(400px,92vw);padding:0;overflow:hidden;border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.45);animation:npop-entra .25s ease-out both}
.bell-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.bell-head b{font-size:15px}
.bell-head__n{font-size:12px;font-weight:700;color:var(--gold);background:rgba(224,164,59,.14);border-radius:20px;padding:2px 8px}
.bell-head .link-btn{margin-left:auto}
.bell-lista{max-height:min(520px,70vh);overflow:auto;padding:4px 6px 8px}
.bell-sec{margin:10px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bell-item{display:flex;align-items:flex-start;gap:11px;width:100%;padding:10px;border:0;border-radius:12px;text-align:left;background:none;color:inherit;font:inherit;cursor:pointer;transition:background .15s}
.bell-item:hover{background:rgb(var(--tinte,255 255 255) / .05)}
.bell-item.unread{background:rgba(31,168,151,.07)}
.bell-item.unread:hover{background:rgba(31,168,151,.12)}
.bell-ic{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#2bc4b2;background:rgba(31,168,151,.14)}
.bell-ic--mencion{color:#7fb0ff;background:rgba(79,143,240,.15)}
.bell-ic--tarea{color:#2bc48a;background:rgba(43,196,138,.15)}
.bell-ic--archivo{color:#e0a43b;background:rgba(224,164,59,.15)}
.bell-ic--evento{color:#d06fb0;background:rgba(208,111,176,.15)}
.bell-item__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bell-item__top{display:flex;align-items:baseline;gap:4px;font-size:13px;color:var(--muted);margin:0}
.bell-item__top b{color:var(--ink)}
.bell-item__top time{margin-left:auto;font-size:11.5px;white-space:nowrap;padding-left:8px}
.bell-item__txt{font-size:13.5px;color:var(--ink-suave,#c9d6d3);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bell-dot{flex:0 0 auto;align-self:center;width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 3px rgba(43,196,178,.18)}
.bell-vacio{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 20px;text-align:center;color:var(--muted)}
.bell-vacio span{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent-2);background:rgba(31,168,151,.12);margin-bottom:4px}
.bell-vacio b{color:var(--ink);font-size:15px}
.bell-vacio small{font-size:13px;max-width:260px}

/* ── IA pensando ── */
.ia-pensando{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:14px;border-radius:12px;border:1px solid rgba(154,127,224,.3);background:linear-gradient(135deg,rgba(154,127,224,.1),rgba(31,168,151,.08))}
.ia-pensando__barra{position:relative;height:6px;border-radius:6px;overflow:hidden;background:rgba(154,127,224,.15)}
.ia-pensando__barra i{position:absolute;top:0;bottom:0;width:38%;border-radius:6px;background:linear-gradient(90deg,#9a7fe0,#2bc4b2);animation:ia-va 1.4s cubic-bezier(.6,.1,.4,.9) infinite}
.ia-pensando__txt{font-size:13.5px;font-weight:600;color:#c5a7ff}
.ia-pensando__txt.is-nuevo{animation:ia-txt .4s ease-out both}
@keyframes ia-va{0%{left:-38%}100%{left:100%}}
@keyframes ia-txt{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── Microanimaciones ── */
#tool-view.is-entrando > *{animation:vista-entra .28s ease-out both}
@keyframes vista-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pe-kpi,.pjc,.file-card,.pe-card,.doc-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pe-kpi:hover,.pjc:hover,.file-card:hover,.doc-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.btn,.pj-btn,.tema-btn,.icon-btn,.cmdk-btn{transition:transform .08s ease,background .15s,border-color .15s,color .15s}
.btn:active,.pj-btn:active,.tema-btn:active,.icon-btn:active,.cmdk-btn:active{transform:scale(.96)}
.pj-done[aria-pressed="true"] svg,.tarea.is-done .tarea__chk svg{animation:ntf-tick .35s cubic-bezier(.3,1.6,.5,1) both}
.chan .side-badge,.chan .cnt{animation:salto .4s cubic-bezier(.3,1.8,.5,1) both}

/* ── Tema claro ── */
[data-tema="claro"] .ntf{background:#fff;color:#15282c;border-color:#dde5e3;box-shadow:0 14px 38px rgba(16,40,44,.16),0 2px 6px rgba(16,40,44,.08)}
[data-tema="claro"] .ntf__x:hover{background:#eef3f2}
[data-tema="claro"] .ntf__barra{background:#e6eeec}
[data-tema="claro"] .ntf--ok{--ntf:#16935f}[data-tema="claro"] .ntf--error{--ntf:#d23c42}[data-tema="claro"] .ntf--aviso{--ntf:#b57a12}[data-tema="claro"] .ntf--info{--ntf:#0d8a7b}[data-tema="claro"] .ntf--progreso{--ntf:#2f6fd6}
[data-tema="claro"] .npop{background:rgba(255,255,255,.98);color:#15282c;border-color:#d7e0de;box-shadow:0 22px 60px rgba(16,40,44,.18)}
[data-tema="claro"] .npop__tt b{color:#0d1f22}
[data-tema="claro"] .npop__body{color:#2c4044}
[data-tema="claro"] .npop__msg{background:#f2f6f5;border-color:#e3eae8}
[data-tema="claro"] .npop__item{border-top-color:#e8eeec}
[data-tema="claro"] .npop__x:hover{background:#eef3f2;color:#15282c}
[data-tema="claro"] .bell-panel{box-shadow:0 22px 60px rgba(16,40,44,.18)}
[data-tema="claro"] .pe-kpi:hover,[data-tema="claro"] .pjc:hover,[data-tema="claro"] .file-card:hover,[data-tema="claro"] .doc-card:hover{box-shadow:0 10px 26px rgba(16,40,44,.12)}
[data-tema="claro"] .ia-pensando__txt{color:#6b46c1}

/* Menos movimiento si el sistema lo pide */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ntf__t,.npop__tiempo{animation-duration:6s!important}
}

/* La cabecera (y lo que se despliega de ella: la campana) siempre por encima del contenido de la sección */
.main__head{position:relative;z-index:30}
.bell-panel{z-index:60;background:var(--surface)}