/* ══════════════════════════════════════════════════════
   APP Direct — Sistema de Diseño Minimalista + Animaciones
   Version: 1.0  |  Incluir en todas las páginas
   ══════════════════════════════════════════════════════ */

/* ── Variables de animación ─────────────────────────── */
:root {
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-xs:  0.12s;
  --dur-sm:  0.22s;
  --dur-md:  0.35s;
  --dur-lg:  0.50s;
}

/* ── Keyframes ──────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

@keyframes shimmerBg {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes spinCW {
  to { transform: rotate(360deg); }
}

/* ── Entrada de página ──────────────────────────────── */
.app-header,
.back-nav {
  animation: slideDown var(--dur-md) var(--ease-out) both;
}

main,
.main-content,
.content,
.modules,
.hero,
.login-card,
.page-body,
.dashboard-body {
  animation: slideUp var(--dur-lg) var(--ease-out) 0.08s both;
}

/* ── Botones — transición suave + efecto lift ────────── */
button,
.btn,
[class*="btn-"],
[class*="-btn"],
input[type="submit"],
input[type="button"] {
  position: relative;
  overflow: hidden;
  transition:
    transform    var(--dur-sm) var(--ease-spring),
    box-shadow   var(--dur-sm) ease,
    background   var(--dur-sm) ease,
    border-color var(--dur-sm) ease,
    opacity      var(--dur-xs) ease !important;
  cursor: pointer;
}

button:hover:not(:disabled),
.btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}

button:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.96) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  transition-duration: var(--dur-xs) !important;
}

/* ── Ripple ─────────────────────────────────────────── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transform: scale(0);
  animation: rippleAnim 0.55s linear;
  pointer-events: none;
  z-index: 0;
}

/* ── Inputs — focus suave ───────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition:
    border-color var(--dur-sm) ease,
    box-shadow   var(--dur-sm) ease,
    background   var(--dur-sm) ease !important;
}

/* ── Cards — hover y entrada ────────────────────────── */
.module-card,
.hub-card,
.stat-card,
.info-card,
.metric-card,
.summary-card,
[class*="item-card"],
[class*="card-item"] {
  transition:
    transform  var(--dur-md) var(--ease-spring),
    box-shadow var(--dur-md) ease !important;
}

/* ── Filas de tabla ─────────────────────────────────── */
tbody tr {
  transition: background-color var(--dur-xs) ease;
}

/* ── Links de navegación ────────────────────────────── */
.back-home,
.nav-link,
.breadcrumb a {
  transition: color var(--dur-sm) ease, opacity var(--dur-sm) ease !important;
}

/* ── Scroll Reveal ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity   var(--dur-lg) var(--ease-out),
    transform var(--dur-lg) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays escalonados */
.reveal:nth-child(1)  { transition-delay: 0.00s; }
.reveal:nth-child(2)  { transition-delay: 0.06s; }
.reveal:nth-child(3)  { transition-delay: 0.12s; }
.reveal:nth-child(4)  { transition-delay: 0.18s; }
.reveal:nth-child(5)  { transition-delay: 0.24s; }
.reveal:nth-child(6)  { transition-delay: 0.28s; }
.reveal:nth-child(n+7){ transition-delay: 0.30s; }

/* ── Modales / overlays ─────────────────────────────── */
.modal-content,
[id*="modal"] > *,
[class*="modal-body"],
[class*="modal-content"],
[class*="dialog"] {
  animation: scaleIn var(--dur-md) var(--ease-out) both;
}

/* ── Skeleton loader ────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #f1f5f9 50%,
    #e2e8f0 75%
  );
  background-size: 200% 100%;
  animation: shimmerBg 1.6s infinite;
  border-radius: 6px;
  color: transparent !important;
}

/* ── Spinner ────────────────────────────────────────── */
.spin {
  animation: spinCW 0.75s linear infinite;
  display: inline-block;
}

/* ── Badge / tag pop al aparecer ────────────────────── */
.badge,
[class*="badge"],
.tag,
[class*="tag-"] {
  transition: transform var(--dur-xs) var(--ease-spring),
              opacity   var(--dur-sm) ease;
}

/* ── Transición de salida de página ─────────────────── */
body.page-exit {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ── Accesibilidad: sin movimiento ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto  !important;
  }
}