/* =====================================================================
   ANIMACIONES Y MICROINTERACCIONES
   Sutiles y rápidas (150–350 ms). Se desactivan con "reducir movimiento".
   ===================================================================== */

:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Barra de progreso superior ---------- */
#progreso {
  position: fixed; top: 0; left: 0; z-index: 1000; height: 2.5px; width: 0;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #a78bfa));
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 60%, transparent);
  opacity: 0; pointer-events: none;
  transition: width .4s var(--ease-out), opacity .3s ease;
}
#progreso.activo { opacity: 1; }

/* ---------- Entrada de página (solo al cambiar de sección) ---------- */
@keyframes paginaEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

.main.entrando > .page { animation: paginaEntra .34s var(--ease-out) both; }
/* Tarjetas y bloques escalonados */
.main.entrando .kpis > *,
.main.entrando .cards > *,
.main.entrando .fact-tabs > *,
.main.entrando .page > .card,
.main.entrando .page > .section,
.main.entrando .page > .grid-2 > * { animation: aparece .38s var(--ease-out) both; }
.main.entrando .kpis > :nth-child(2), .main.entrando .cards > :nth-child(2), .main.entrando .fact-tabs > :nth-child(2) { animation-delay: .04s; }
.main.entrando .kpis > :nth-child(3), .main.entrando .cards > :nth-child(3), .main.entrando .fact-tabs > :nth-child(3) { animation-delay: .08s; }
.main.entrando .kpis > :nth-child(4), .main.entrando .cards > :nth-child(4) { animation-delay: .12s; }
.main.entrando .cards > :nth-child(n+5) { animation-delay: .16s; }
.main.entrando .page > :nth-child(3) { animation-delay: .06s; }
.main.entrando .page > :nth-child(4) { animation-delay: .1s; }
.main.entrando .page > :nth-child(n+5) { animation-delay: .14s; }
/* Filas de tablas y listas */
.main.entrando .table tbody tr { animation: paginaEntra .3s var(--ease-out) both; }
.main.entrando .table tbody tr:nth-child(2) { animation-delay: .02s; }
.main.entrando .table tbody tr:nth-child(3) { animation-delay: .04s; }
.main.entrando .table tbody tr:nth-child(4) { animation-delay: .06s; }
.main.entrando .table tbody tr:nth-child(5) { animation-delay: .08s; }
.main.entrando .table tbody tr:nth-child(n+6) { animation-delay: .1s; }

/* ---------- Botones: elevación, pulsado y onda ---------- */
.btn, .icon-btn, .pal-btn, .as-b, .seg button, .fact-tab, .nav a, .tab, .kpi-link, .q-card, .hoy-ev, .ev-card, .list-link {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .18s var(--ease-out), opacity .18s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--text) 25%, transparent); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent); }
.btn:active:not(:disabled), .icon-btn:active, .pal-btn:active, .seg button:active, .as-b:active { transform: translateY(0) scale(.96); transition-duration: .08s; }
.btn, .icon-btn, .pal-btn, .as-b, .seg button, .fact-tab, .nav a, .tab { position: relative; overflow: hidden; isolation: isolate; }

.onda {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: currentColor; opacity: .22; transform: scale(0);
  animation: onda .55s var(--ease-out) forwards;
}
.btn-primary .onda, .as-b.on .onda { background: #fff; opacity: .35; }
@keyframes onda { to { transform: scale(1); opacity: 0; } }

/* Tarjetas enlazadas: elevación suave */
.kpi-link:hover, .q-card:hover, .fact-tab:hover, .hoy-ev:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--text) 40%, transparent); }
.ev-card:hover, .list-link:hover { transform: translateX(2px); }
.nav a:hover { transform: translateX(2px); }
.nav a.active { transform: none; }

/* Foco visible y limpio con teclado */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ---------- Ventanas modales: entrada y salida ---------- */
@keyframes fondoEntra { from { opacity: 0; } }
@keyframes modalEntra { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes fondoSale { to { opacity: 0; } }
@keyframes modalSale { to { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-back { animation: fondoEntra .2s ease both; backdrop-filter: blur(2px); }
.modal { animation: modalEntra .26s var(--ease-out) both; }
.modal-back.cerrando { animation: fondoSale .16s ease forwards; pointer-events: none; }
.modal-back.cerrando .modal { animation: modalSale .16s ease forwards; }

/* Menú desplegable */
@keyframes menuEntra { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.dropdown { animation: menuEntra .16s var(--ease-out) both; transform-origin: top left; }

/* ---------- Avisos (toasts) ---------- */
@keyframes toastEntra { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.toast { animation: toastEntra .28s var(--ease-spring) both; }

/* ---------- Detalles ---------- */
/* Casilla del cuadrante recién pintada */
@keyframes latido { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.q-cell.recien { animation: latido .28s var(--ease-spring); }
/* Botón de asistencia recién marcado */
@keyframes rebote { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.as-b.on.recien { animation: rebote .3s var(--ease-spring); }
.as-fila { transition: background-color .25s ease, border-color .25s ease; }
/* Pestañas y segmentos */
.seg button.active { transition: background-color .2s ease, box-shadow .2s ease, color .2s ease; }
/* Barras de gráficos y ranking crecen al entrar */
@keyframes crece { from { transform: scaleX(0); } }
.main.entrando .rank-bar span { animation: crece .7s var(--ease-out) .15s both; transform-origin: left; }
@keyframes creceY { from { transform: scaleY(0); } }
.main.entrando .bar { animation: creceY .6s var(--ease-out) both; transform-box: fill-box; transform-origin: bottom; }
.main.entrando .bar-g:nth-child(n+3) .bar { animation-delay: .05s; }
.main.entrando .bar-g:nth-child(n+5) .bar { animation-delay: .1s; }
.main.entrando .bar-g:nth-child(n+7) .bar { animation-delay: .15s; }
/* Spinner de carga que aparece tras un instante (evita parpadeos) */
.loading { animation: fondoEntra .3s ease .15s both; }

/* ---------- Cambio de tema claro/oscuro suave ---------- */
html.cambiando-tema, html.cambiando-tema *, html.cambiando-tema *::before, html.cambiando-tema *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, box-shadow .35s ease !important;
}
.tema-toggle svg { transition: transform .45s var(--ease-spring); }
.tema-toggle:hover svg { transform: rotate(25deg); }

/* ---------- Acceso ---------- */
@keyframes loginEntra { from { opacity: 0; transform: translateY(14px); } }
.auth-card { animation: loginEntra .45s var(--ease-out) both; }
.auth-side > * { animation: loginEntra .5s var(--ease-out) both; }
.auth-side > :nth-child(2) { animation-delay: .06s; }
.auth-side > :nth-child(3) { animation-delay: .12s; }

/* ---------- Respeto a "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .onda { display: none; }
}

/* ---------- Aviso de autoría (discreto) ---------- */
.copy { margin: 10px 0 0; font-size: 10.5px; letter-spacing: .02em; color: var(--sidebar-muted, #94a3b8); opacity: .55; text-align: center; transition: opacity .2s ease; user-select: none; }
.copy:hover { opacity: .9; }
.auth-main { position: relative; }
.copy-auth { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; color: var(--muted, #94a3b8); }
@media print { .copy { display: none; } }