/* =========================================================
   RESPONSIVE.GIO — ajustes responsivos globais
   ========================================================= */

/* ---------- Tablets e abaixo ---------- */
@media (max-width: 1023px){
  /* No mobile o conteúdo NÃO recebe padding lateral da sidebar */
  .main-app{ padding-left: 0 !important; }

  /* Sidebar abre como off-canvas (classe .open já lida no JS) */

  /* Conforto nas margens de conteúdo */
  .content-area{
    padding: var(--space-5) var(--space-4) !important;
  }

  /* Cards e grids com mais respiro */
  .stats-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  /* Tabelas: evitar estouro lateral em telas estreitas */
  .table-responsive{
    width: 100%;
    overflow-x: auto;
  }
}

/* ---------- Celulares (≤ 640px) ---------- */
@media (max-width: 640px){
  .content-area{
    padding: var(--space-4) var(--space-3) !important;
  }

  .stats-grid{
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Títulos e cabeçalhos um pouco menores */
  h1{ font-size: 1.55rem; }
  h2{ font-size: 1.25rem; }
  h3{ font-size: 1.1rem; }
}

/* ---------- Paisagem em celulares ---------- */
@media (max-width: 767px) and (orientation: landscape){
  .content-area{ padding: var(--space-4) var(--space-4) !important; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

/* ---------- Grandes telas ---------- */
@media (min-width: 1440px){
  .content-area{ padding: var(--space-8) var(--space-8); }
}


/* =========================================================
   OVERRIDES — Responsividade de conteúdo (cards/tabelas)
   (cole no FINAL do responsive.css)
   ========================================================= */

/* Tablets e abaixo */
@media (max-width: 1023px){
  .content-area{
    padding: 1.25rem 1rem !important;
  }
  .stats-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .table-responsive{ width: 100%; overflow-x: auto; }
}

/* Celulares estreitos */
@media (max-width: 640px){
  .content-area{ padding: 1rem .75rem !important; }
  .stats-grid{ grid-template-columns: 1fr; gap: 1rem; }
  h1{ font-size: 1.55rem; }
  h2{ font-size: 1.25rem; }
  h3{ font-size: 1.1rem; }
}

/* Paisagem em celulares */
@media (max-width: 767px) and (orientation: landscape){
  .content-area{ padding: 1rem !important; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* Telas bem grandes */
@media (min-width: 1440px){
  .content-area{ padding: 2rem 2rem; }
}