/* ═══════════════════════════════════════════════════════
   DASHBOARD HEATMAP MODERNO
   ═══════════════════════════════════════════════════════ */
.dash-heatmap-section--modern {
  /* No fondo global aquí, solo tarjetas */
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 1.5rem 1.5rem 1.2rem 1.5rem;
  margin-bottom: 2rem;
}
.dash-heatmap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.dash-heatmap-subtitle {
  font-size: 0.95em;
  color: #7dd3fc;
  font-weight: 400;
  margin-left: 1.5rem;
}
.dash-heatmap--grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 110px;
}
.heatmap-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.heatmap-grid-row {
  display: flex;
  gap: 0.25rem;
}
.heatmap-cell, .hour-cell {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(59,130,246,0.18));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  font-weight: 600;
  color: #e0e7ef;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  position: relative;
  transition: background 0.2s;
}
.heatmap-cell[data-level="0"] { background: #1e293b; }
.heatmap-cell[data-level="1"] { background: linear-gradient(135deg, #38bdf8 10%, #1e293b 90%); }
.heatmap-cell[data-level="2"] { background: linear-gradient(135deg, #0ea5e9 40%, #1e293b 60%); }
.heatmap-cell[data-level="3"] { background: linear-gradient(135deg, #2563eb 60%, #1e293b 40%); }
.heatmap-cell[data-level="4"] { background: linear-gradient(135deg, #7c3aed 80%, #2563eb 20%); }
.hour-value {
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.1;
}
.hour-label {
  font-size: 0.75em;
  color: #bae6fd;
  font-weight: 400;
  margin-top: 2px;
}
.heatmap-empty--modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  color: #7dd3fc;
  opacity: 0.85;
  padding: 1.2rem 0 0.7rem 0;
}
.heatmap-empty--modern svg {
  opacity: 0.25;
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════
   DASHBOARD COBERTURA GEOGRÁFICA MODERNA
   ═══════════════════════════════════════════════════════ */
.dash-geo-section--modern {
  /* No fondo global aquí, solo tarjetas */
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 1.5rem 1.5rem 1.2rem 1.5rem;
  margin-bottom: 2rem;
}
.dash-geo-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.dash-geo-content {
  min-height: 80px;
  position: relative;
}
.dash-geo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
}
.dash-geo-list li {
  background: rgba(59,130,246,0.10);
  border-radius: 8px;
  padding: 0.5em 1.1em;
  color: #e0e7ef;
  font-size: 1em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.7em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.dash-geo-list li .geo-badge {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 0.5em;
  background: #38bdf8;
}
.dash-geo-list li[data-estado="DENTRO"] .geo-badge { background: #22c55e; }
.dash-geo-list li[data-estado="CERCANO"] .geo-badge { background: #f97316; }
.dash-geo-list li[data-estado="FUERA"] .geo-badge { background: #ef4444; }
.dash-geo-list li[data-estado="SIN_COORDENADAS"] .geo-badge { background: #64748b; }
.dash-geo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  color: #7dd3fc;
  opacity: 0.85;
  padding: 1.2rem 0 0.7rem 0;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: none;
  z-index: 2;
  pointer-events: none;
}
.dash-geo-empty svg {
  opacity: 0.18;
  margin-bottom: 0.5rem;
}
/**
 * TrackLocal - Performance CSS Optimizations
 * Reduce efectos pesados en mobile y dispositivos de bajo rendimiento
 * Se activa automáticamente con clases en :root o via prefers-reduced-motion
 */

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION PREFERENCES
   ═══════════════════════════════════════════════════════ */

@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;
  }
}

/* ═══════════════════════════════════════════════════════
   REDUCED EFFECTS MODE (Mobile/Low Power)
   Applied via .tl-reduced-effects on <html>
   ═══════════════════════════════════════════════════════ */

.tl-reduced-effects {
  /* Reducir transiciones */
  --tl-landing-transition: 0.15s ease;
  --tl-landing-transition-slow: 0.2s ease;
}

.tl-reduced-effects .glass-card,
.tl-reduced-effects .glass-surface,
.tl-reduced-effects .tl-navbar,
.tl-reduced-effects .auth-hero,
.tl-reduced-effects .auth-card,
.tl-reduced-effects .tl-landing-nav.is-scrolled {
  /* Reducir blur a valor más ligero */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.tl-reduced-effects .tl-landing::before,
.tl-reduced-effects .tl-landing::after,
.tl-reduced-effects body::before {
  /* Reducir complejidad de backgrounds */
  opacity: 0.3;
}

/* Reducir sombras complejas */
.tl-reduced-effects .glass-card,
.tl-reduced-effects .scan-card,
.tl-reduced-effects .inicio-module,
.tl-reduced-effects .dash-kpi-card,
.tl-reduced-effects .art-stat-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Desactivar animaciones de glow */
.tl-reduced-effects .tl-landing-hero__glow,
.tl-reduced-effects .auth-gateway__glow,
.tl-reduced-effects [class*="glow"],
.tl-reduced-effects [class*="pulse"] {
  animation: none !important;
  opacity: 0.5;
}

/* Simplificar gradientes animados */
.tl-reduced-effects body {
  animation: none !important;
  background-size: 100% 100% !important;
}

/* ═══════════════════════════════════════════════════════
   LOW POWER MODE (Very slow devices)
   Applied via .tl-low-power on <html>
   ═══════════════════════════════════════════════════════ */

.tl-low-power .glass-card,
.tl-low-power .glass-surface,
.tl-low-power .tl-navbar,
.tl-low-power .auth-hero,
.tl-low-power .auth-card,
.tl-low-power .tl-landing-nav.is-scrolled {
  /* Sin blur en dispositivos muy lentos */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(15, 23, 42, 0.95) !important;
}

.tl-low-power .tl-landing::before,
.tl-low-power .tl-landing::after,
.tl-low-power body::before {
  display: none !important;
}

/* Sin transiciones */
.tl-low-power * {
  transition-duration: 0.01ms !important;
}

/* ═══════════════════════════════════════════════════════
   MOBILE SPECIFIC (<768px)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Reducir blur en todos los móviles */
  .glass-card,
  .glass-surface,
  .tl-navbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Sombras más ligeras */
  .glass-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  /* Reducir complejidad de backgrounds */
  body::before {
    opacity: 0.4;
  }

  /* Optimizar scroll */
  .scanner-layout,
  .art-page,
  .dashboard-shell {
    -webkit-overflow-scrolling: touch;
  }

  /* Evitar layout shifts */
  img {
    content-visibility: auto;
  }
}

/* ═══════════════════════════════════════════════════════
   TABLET SPECIFIC (768px - 1024px)
   ═══════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  .glass-card,
  .glass-surface {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* ═══════════════════════════════════════════════════════
   CONTENT VISIBILITY FOR LAZY RENDER
   ═══════════════════════════════════════════════════════ */

/* Secciones fuera de viewport inicial */
.tl-landing-section:not(:first-of-type),
.dash-rankings-row,
.dash-alerts-row,
.art-alerts-panel {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Tablas y listas largas */
.art-table tbody,
.dash-feed-list,
.dash-ranking-list {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* ═══════════════════════════════════════════════════════
   WILL-CHANGE OPTIMIZATION
   Solo para elementos que realmente se animan
   ═══════════════════════════════════════════════════════ */

.tl-navbar {
  will-change: background-color, backdrop-filter;
}

.modal.show .modal-dialog {
  will-change: transform;
}

/* Limpiar will-change cuando no se necesita */
.modal:not(.show) .modal-dialog {
  will-change: auto;
}

/* ═══════════════════════════════════════════════════════
   SKELETON LOADERS OPTIMIZADOS
   Sin animaciones pesadas
   ═══════════════════════════════════════════════════════ */

.tl-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: tl-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes tl-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton sin animación en reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tl-skeleton {
    animation: none;
    background: rgba(255, 255, 255, 0.08);
  }
}

.tl-skeleton--text {
  height: 1em;
  width: 100%;
}

.tl-skeleton--title {
  height: 1.5em;
  width: 60%;
}

.tl-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.tl-skeleton--card {
  height: 120px;
}

/* ═══════════════════════════════════════════════════════
   LOADING STATES PARA BOTONES
   ═══════════════════════════════════════════════════════ */

.btn[data-loading="true"],
.btn.is-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn[data-loading="true"]::after,
.btn.is-loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tl-btn-spin 0.6s linear infinite;
}

@keyframes tl-btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn[data-loading="true"]::after,
  .btn.is-loading::after {
    animation: none;
    border-color: currentColor;
    opacity: 0.5;
  }
}

/* ═══════════════════════════════════════════════════════
   IMAGE OPTIMIZATION HINTS
   ═══════════════════════════════════════════════════════ */

img[loading="lazy"] {
  /* Placeholder mientras carga */
  background-color: rgba(255, 255, 255, 0.05);
}

/* Evitar CLS en imágenes */
img:not([width]):not([height]) {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Logo con aspect ratio definido */
.app-logo-sm,
.tl-landing-logo__icon {
  aspect-ratio: 1 / 1;
}