/* Analítica: reglas responsive (se aplican con cualquier tema o estilo) */
/* =============================================
   ANALÍTICA RESPONSIVE (se aplica con cualquier diseño)
   La página se detecta por su selector de año (#dash-year-select).
============================================= */
@media (max-width: 1100px) {
  #app-content:has(#dash-year-select) [style*="grid-template-columns: 2fr 1fr"],
  #app-content:has(#dash-year-select) [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 768px) {
  #app-content:has(#dash-year-select) div:has(> #dash-logo-full) { display: none !important; }
  #app-content:has(#dash-year-select) h1 { font-size: 1.35rem; }
  #app-content:has(#dash-year-select) .card { padding: 1rem !important; }
  #app-content:has(#dash-year-select) .card[style*="gap: 2rem"] { gap: 0.9rem 1.25rem !important; }
  #app-content:has(#dash-year-select) .card[style*="gap: 2rem"] > div { min-width: 0; max-width: 100%; }
  #app-content:has(#dash-year-select) .filter-chip-group { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  #app-content:has(#dash-year-select) .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; margin: 1rem 0 !important; }
  #app-content:has(#dash-year-select) .dashboard-grid h3 { font-size: 0.62rem !important; line-height: 1.3; }
  #app-content:has(#dash-year-select) .kpi-value { font-size: 1.3rem !important; }
  #app-content:has(#dash-year-select) .stagger-container { gap: 0.75rem !important; margin-bottom: 0.75rem !important; }
  #app-content:has(#dash-year-select) [style*="height: 300px"] { height: 240px !important; }
  #app-content:has(#dash-year-select) [style*="min-height: 250px"] { min-height: 200px !important; }
  #app-content:has(#dash-year-select) .premium-select,
  #app-content:has(#dash-year-select) .card[style*="gap: 2rem"] select { font-size: 0.85rem !important; padding: 0.45rem 0.6rem !important; min-width: 0 !important; }
  #app-content:has(#dash-year-select) .card[style*="gap: 2rem"] label { margin-bottom: 0.3rem !important; }
  #app-content:has(#dash-year-select) .dashboard-grid .card { padding: 0.85rem !important; }
  #app-content:has(#dash-year-select) .reveal-chart h3,
  #app-content:has(#dash-year-select) .stagger-container > .card > h3,
  #app-content:has(#dash-year-select) .stagger-container > .card > div > h3 { font-size: 1rem !important; margin-bottom: 0.75rem !important; }
  #app-content:has(#dash-year-select) #dash-chart-metric { font-size: 0.72rem !important; padding: 3px 6px !important; }
}
@media (max-width: 330px) {
  #app-content:has(#dash-year-select) .dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; }
}