/* ==========================================================================
   NeithCore — Movimiento: logo animado, transiciones y microinteracciones
   Usa los tokens de theme.css. Todo se desactiva con "reducir movimiento".
   ========================================================================== */

:root {
  --nc-ease-out: cubic-bezier(.22, 1, .36, 1);
  --nc-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --nc-dur-fast: 140ms;
  --nc-dur: 260ms;
  --nc-dur-slow: 520ms;
  /* Luz de los pulsos: verde salvia de la marca y destello dorado del logo. */
  --nc-pulso: #8fd3a7;
  --nc-pulso-oro: #e3c56b;
}

/* Sin transiciones entre páginas ni animaciones de entrada del contenido: el
   contenido siempre se pinta visible desde el primer instante. Solo hay efectos
   que no ocultan nada (hover, logo, barra de progreso, indicadores de presencia). */

/* ---------- Barra de progreso al navegar ---------- */
.nc-progreso-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2000;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--nc-accent) 30%, var(--nc-pulso-oro) 50%, var(--nc-accent) 70%, transparent);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 8s cubic-bezier(.1, .7, .2, 1), opacity var(--nc-dur) ease;
}
.nc-progreso-nav.is-activo {
  opacity: 1;
  transform: scaleX(.92);
  animation: nc-progreso-brillo 1.1s linear infinite;
}
@keyframes nc-progreso-brillo { to { background-position: -200% 0; } }

/* ---------- Microinteracciones ---------- */
.nc-btn {
  transition: transform var(--nc-dur-fast) var(--nc-ease-out), filter var(--nc-dur-fast) ease,
              box-shadow var(--nc-dur) ease, background-color var(--nc-dur) ease, border-color var(--nc-dur) ease;
}
.nc-btn:hover { transform: translateY(-1px); }
.nc-btn:active { transform: translateY(0) scale(.98); }
.nc-btn-primary:hover { box-shadow: 0 6px 18px -8px rgba(36, 104, 74, .55); }

.nc-card {
  transition: box-shadow var(--nc-dur) ease, border-color var(--nc-dur) ease, transform var(--nc-dur) var(--nc-ease-out);
}
.nc-kpi:hover, a.nc-card:hover, .nc-feature-card:hover, .nc-plan-card:hover {
  border-color: var(--nc-border-strong);
  box-shadow: 0 10px 24px -14px rgba(16, 24, 20, .28);
  transform: translateY(-2px);
}
.nc-kpi-icon { transition: transform var(--nc-dur) var(--nc-ease-out), background-color var(--nc-dur) ease; }
.nc-kpi:hover .nc-kpi-icon { transform: scale(1.08) rotate(-4deg); }

.nc-table tbody tr { transition: background-color var(--nc-dur-fast) ease; }
.nc-table tbody tr:hover { background: rgba(42, 122, 82, .04); }

.nc-input { transition: border-color var(--nc-dur-fast) ease, box-shadow var(--nc-dur) ease, background-color var(--nc-dur) ease; }

.nc-nav-link { transition: background-color var(--nc-dur-fast) ease, color var(--nc-dur-fast) ease, padding-left var(--nc-dur) var(--nc-ease-out); }
.nc-nav-link:hover { padding-left: 13px; }
.nc-nav-link i { transition: transform var(--nc-dur) var(--nc-ease-out), color var(--nc-dur) ease; }
.nc-nav-link:hover i { transform: scale(1.1); }
.nc-nav-link.active i { color: var(--nc-accent); }
.nc-nav-link.active::after { animation: nc-latido-punto 2.4s ease-in-out infinite; }
@keyframes nc-latido-punto {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 174, 132, .55); }
  50% { box-shadow: 0 0 0 5px rgba(95, 174, 132, 0); }
}

.nc-pill { transition: background-color var(--nc-dur) ease, color var(--nc-dur) ease; }

/* Marca del menú: el hexágono gira un poco al pasar el mouse. */
.nc-sidebar-brand img, .nc-brand img, .nc-mobile-brand img { transition: transform var(--nc-dur-slow) var(--nc-ease-out), filter var(--nc-dur) ease; }
.nc-sidebar-brand:hover img, .nc-brand:hover img { transform: rotate(-8deg) scale(1.06); filter: drop-shadow(0 0 6px rgba(143, 211, 167, .45)); }

/* ---------- Presencia: En línea / Desconectado ---------- */
.nc-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--nc-border-strong);
  flex-shrink: 0;
  transition: background-color var(--nc-dur) ease;
}
.nc-dot-online { background: var(--nc-success); position: relative; }
.nc-dot-online::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--nc-success);
  animation: nc-onda 2s var(--nc-ease-out) infinite;
}
.nc-dot-offline { background: #b9b5a6; }
@keyframes nc-onda { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }

.nc-kpi-icon .nc-dot { width: 12px; height: 12px; }

.nc-presencia-lista { list-style: none; margin: 0; padding: 4px 0; }
.nc-presencia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--nc-border);
  transition: background-color var(--nc-dur-fast) ease;
}
.nc-presencia:last-child { border-bottom: none; }
.nc-presencia:hover { background: rgba(42, 122, 82, .04); }
.nc-presencia-datos { flex: 1; min-width: 0; }
.nc-avatar-presencia { position: relative; flex-shrink: 0; }
.nc-avatar-presencia .nc-avatar-sm { width: 36px; height: 36px; font-size: .78rem; }
.nc-avatar-presencia .nc-dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  box-shadow: 0 0 0 2px var(--nc-surface);
}

.nc-fecha-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nc-fecha-nav .nc-input { width: auto; }

/* ---------- Resumen diario: línea de 24 h por usuario ---------- */
.nc-timeline-eje, .nc-uso-fila {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr 90px;
  gap: 16px;
  align-items: center;
  padding: 0 20px;
}
.nc-timeline-horas { position: relative; height: 18px; font-size: .68rem; color: var(--nc-text-muted); }
.nc-timeline-horas span { position: absolute; transform: translateX(-50%); }
.nc-timeline-horas span:first-child { transform: none; }
.nc-timeline-horas span:last-child { transform: translateX(-100%); }

.nc-uso-lista { list-style: none; margin: 0; padding: 4px 0 8px; }
.nc-uso-fila { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--nc-border); }
.nc-uso-fila:last-child { border-bottom: none; }
.nc-uso-total { text-align: right; font-weight: 700; font-size: .84rem; }

.nc-uso-barra {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--nc-border) calc(25% - 1px) 25%),
    var(--nc-muted-bg);
  overflow: hidden;
}
.nc-uso-tramo {
  position: absolute;
  top: 2px; bottom: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nc-accent-strong), var(--nc-accent));
  transition: filter var(--nc-dur-fast) ease;
}
.nc-uso-tramo:hover { filter: brightness(1.15); }
.nc-uso-tramo.is-live {
  background: linear-gradient(90deg, var(--nc-accent-strong), var(--nc-accent), var(--nc-pulso));
  background-size: 200% 100%;
  animation: nc-flujo 2.2s linear infinite;
}
@keyframes nc-flujo { to { background-position: -200% 0; } }

@media (max-width: 720px) {
  .nc-timeline-eje { display: none; }
  .nc-uso-fila { grid-template-columns: 1fr auto; }
  .nc-uso-barra { grid-column: 1 / -1; grid-row: 2; }
}

/* ==========================================================================
   Logo animado (.nc-logo-anim) — ver Pages/Shared/_LogoAnimado.cshtml
   ========================================================================== */
.nc-logo-anim { width: 220px; aspect-ratio: 1; }
.nc-logo-anim svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* Halo que respira detrás del logo */
.nla-halo { transform-origin: 60px 60px; animation: nla-respirar 4s ease-in-out infinite; }
@keyframes nla-respirar { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }

/* Anillos HUD */
.nla-hud { transform-origin: 60px 60px; animation: nla-aparecer .9s .9s var(--nc-ease-out) both; }
.nla-anillo { fill: none; transform-origin: 60px 60px; }
.nla-anillo-1 {
  stroke: rgba(143, 211, 167, .45);
  stroke-width: 1.2;
  stroke-dasharray: 46 10 4 10;
  animation: nla-girar 28s linear infinite;
}
.nla-anillo-2 {
  stroke: rgba(201, 165, 74, .55);
  stroke-width: .8;
  stroke-dasharray: 2 6;
  animation: nla-girar 40s linear infinite reverse;
}
.nla-arco {
  fill: none;
  stroke: var(--nc-pulso);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .15;
  filter: url(#nla-glow);
  animation: nla-encender 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.2s + 1.6s);
}
.nla-arcos { transform-origin: 60px 60px; animation: nla-girar 18s linear infinite; }
@keyframes nla-girar { to { transform: rotate(360deg); } }
@keyframes nla-encender { 0%, 100% { opacity: .15; } 30%, 45% { opacity: 1; } }

/* Pistas y pulsos de luz */
.nla-pista { fill: none; stroke: rgba(143, 211, 167, .32); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: nla-trazar 1s var(--nc-ease-out) forwards; animation-delay: 1s; }
.nla-pulso {
  fill: none;
  stroke: var(--nc-pulso);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18 100;
  stroke-dashoffset: 18;
  filter: url(#nla-glow);
  opacity: 0;
  animation: nla-viajar 2.8s var(--nc-ease-in-out) infinite;
  animation-delay: calc(var(--i) * .35s + 1.8s);
}
.nla-pulso:nth-of-type(4n) { stroke: var(--nc-pulso-oro); }
@keyframes nla-viajar {
  0% { stroke-dashoffset: 18; opacity: 0; }
  10% { opacity: 1; }
  70% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
.nla-nodos circle {
  fill: var(--nc-pulso);
  opacity: .25;
  animation: nla-chispa 2.8s ease-out infinite;
  animation-delay: calc(var(--i) * .35s + 3.6s);
}
@keyframes nla-chispa { 0%, 100% { opacity: .25; } 8% { opacity: 1; } 30% { opacity: .25; } }

/* Intro de la marca: el marco se dibuja, luego aparece el panel y la N */
.nla-base { opacity: 0; animation: nla-aparecer .5s .1s ease both; }
.nla-marco polyline { stroke-dasharray: 100; stroke-dashoffset: 100; animation: nla-trazar .9s var(--nc-ease-out) forwards; }
.nla-marco polyline:nth-child(2) { animation-delay: .12s; }
.nla-marco polyline:nth-child(3) { animation-delay: .24s; }
.nla-marco polyline:nth-child(4) { animation-delay: .36s; }
.nla-marco polyline:nth-child(5) { animation-delay: .48s; }
.nla-conectores { opacity: 0; animation: nla-aparecer .4s .8s ease both; }
.nla-interior { transform-origin: 60px 60px; animation: nla-emerger .7s .45s var(--nc-ease-out) both; }
.nla-letra { transform-origin: 60px 60px; animation: nla-emerger .7s .7s var(--nc-ease-out) both; }
.nla-letra-linea { stroke-dasharray: 100; stroke-dashoffset: 100; animation: nla-trazar 1.2s 1s var(--nc-ease-out) forwards; }
.nla-chips rect { transform-box: fill-box; transform-origin: center; animation: nla-chip 4s ease-in-out infinite; animation-delay: calc(var(--i) * .45s + 2s); }
@keyframes nla-chip { 0%, 100% { fill: #6b5a2e; } 12% { fill: #c9a54a; } 30% { fill: #6b5a2e; } }

/* Destello que cruza la N cada pocos segundos */
.nla-destello { animation: nla-barrer 5s 2.2s var(--nc-ease-in-out) infinite; }
@keyframes nla-barrer { 0% { transform: skewX(-18deg) translateX(0); } 35%, 100% { transform: skewX(-18deg) translateX(140px); } }

@keyframes nla-trazar { to { stroke-dashoffset: 0; } }
@keyframes nla-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes nla-emerger { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }

/* Variante compacta (cargador): solo marca + anillo girando */
.nc-logo-anim.is-compacto .nla-pistas, .nc-logo-anim.is-compacto .nla-halo { display: none; }

/* ---------- Ubicaciones del logo animado ---------- */
.nc-auth-logo { display: flex; justify-content: center; margin: -20px 0 28px; }
.nc-auth-logo .nc-logo-anim { width: min(260px, 70%); }
.nc-hero-logo { display: flex; justify-content: center; margin: 8px 0 18px; }
.nc-hero-logo .nc-logo-anim { width: 200px; }

/* ==========================================================================
   Reducir movimiento: todo quieto, en su estado final
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .nla-pulso, .nla-destello { display: none; }
  .nc-btn:hover, .nc-card:hover, .nc-kpi:hover { transform: none !important; }
}

/* Con el logo animado en el panel de login/registro, la marca chica deja menos aire. */
.nc-auth-side .nc-sidebar-brand { padding-bottom: 12px; }
.nc-auth-side .nc-auth-logo { margin: 0 0 24px; }

/* ---------- Cargador de NeithCore (navegaciones lentas, ver js/nc-motion.js) ---------- */
.nc-cargador {
  position: fixed;
  inset: 0;
  z-index: 1999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(247, 245, 240, .72);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--nc-dur) ease, visibility 0s linear var(--nc-dur);
}
.nc-cargador.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--nc-dur) ease, visibility 0s;
}
.nc-cargador-logo { position: relative; width: 96px; height: 96px; }
.nc-cargador-logo img { position: absolute; inset: 20px; width: 56px; height: 56px; animation: nc-cargador-latir 2.2s ease-in-out infinite; }
.nc-cargador-anillos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nc-cargador-anillos circle { fill: none; transform-origin: 50px 50px; }
.nc-cargador-anillos .c1 { stroke: rgba(42, 122, 82, .35); stroke-width: 1.2; stroke-dasharray: 34 8 3 8; animation: nc-girar 5s linear infinite; }
.nc-cargador-anillos .c2 { stroke: rgba(201, 165, 74, .6); stroke-width: .9; stroke-dasharray: 2 5; animation: nc-girar 8s linear infinite reverse; }
.nc-cargador-anillos .c3 { stroke: var(--nc-accent-strong); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 40 220; animation: nc-girar 1.3s cubic-bezier(.65, 0, .35, 1) infinite; }
.nc-cargador-texto { font-size: .82rem; font-weight: 600; color: var(--nc-text-muted); }
@keyframes nc-girar { to { transform: rotate(360deg); } }
@keyframes nc-cargador-latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .nc-cargador-anillos .c3 { animation: nc-girar 1.3s linear infinite !important; animation-iteration-count: infinite !important; }
}