/* ── Responsive layout — Panel Macro-Fiscal Chile ─────────────────────────── */

/* ── Base: limitar ancho máximo en pantallas grandes ───────────────────────── */
body {
  overflow-x: hidden;
}

/* ── Header: apilar en móvil ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header flex → column */
  div[style*="backgroundColor: rgb(30, 58, 95)"],
  div[style*="background-color: rgb(30, 58, 95)"] {
    flex-wrap: wrap !important;
  }

  /* Ocultar stats del header en móvil (muy pequeños) */
  div[style*="marginLeft: auto"],
  div[style*="margin-left: auto"] {
    display: none !important;
  }
}

/* ── Tabs: scroll horizontal en móvil ──────────────────────────────────────── */
@media (max-width: 768px) {
  .tab-container,
  div[data-dash-is-loading] > div > div {
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}

/* ── Panel principal: columna en móvil ─────────────────────────────────────── */
#contenido-sim {
  display: flex;
  gap: 18px;
  padding: 18px 22px;
}

@media (max-width: 900px) {
  #contenido-sim {
    flex-direction: column !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  /* Panel de controles: ancho completo en móvil */
  #contenido-sim > div:first-child {
    width: 100% !important;
  }
}

/* ── KPI cards: 2 columnas en tablet, 1 en móvil ──────────────────────────── */
#kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 900px) {
  #kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  #kpis {
    grid-template-columns: 1fr !important;
  }
}

/* ── Gráficos: 1 columna en móvil ──────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Grid 2x2 de gráficos → 1 columna */
  #contenido-sim div[style*="grid-template-columns: 1fr 1fr"],
  #contenido-sim div[style*="gridTemplateColumns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Comparador: tabla scroll horizontal ───────────────────────────────────── */
#contenido-comp {
  overflow-x: auto;
}

@media (max-width: 768px) {
  #contenido-comp {
    padding: 12px !important;
  }

  /* Grid de gráficos del comparador → 1 columna */
  #contenido-comp div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Tabla de proyección: scroll horizontal ────────────────────────────────── */
#contenido-tabla {
  overflow-x: auto;
}

@media (max-width: 768px) {
  #contenido-tabla {
    padding: 12px !important;
  }
}

/* ── Tab distributivo ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #contenido-dist {
    padding: 12px !important;
  }

  #contenido-dist div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Blog / Acerca del modelo ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #contenido-blog {
    padding: 12px !important;
  }

  /* Tablas del blog: scroll horizontal */
  #contenido-blog table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ── Botones del panel de controles: ancho completo ───────────────────────── */
@media (max-width: 900px) {
  #contenido-sim button {
    width: 100%;
  }
}

/* ── Tooltips: en móvil aparecen arriba para no salirse de pantalla ─────────── */
@media (max-width: 600px) {
  .tip-icon::after {
    left: 50% !important;
    top: auto !important;
    bottom: 130% !important;
    transform: translateX(-50%) !important;
    width: 220px !important;
  }

  .tip-icon::before {
    left: 50% !important;
    top: auto !important;
    bottom: calc(130% - 6px) !important;
    transform: translateX(-50%) rotate(90deg) !important;
  }
}

/* ── Texto del header: más pequeño en móvil ────────────────────────────────── */
@media (max-width: 600px) {
  h1 {
    font-size: 1rem !important;
  }
}

/* ── Tabs: texto más pequeño en móvil ──────────────────────────────────────── */
@media (max-width: 600px) {
  .tab {
    padding: 8px 10px !important;
    font-size: 0.75rem !important;
  }
}