/* ============================================
   TABLET (≤1024px): sidebar colapsa a solo íconos
   ============================================ */
@media (max-width: 1024px) {
  .sidebar {
    width: var(--sidebar-width-collapsed);
  }

  .sidebar__brand span,
  .sidebar__label {
    display: none;
  }

  .sidebar__brand {
    justify-content: center;
  }

  .sidebar__link {
    justify-content: center;
    padding: 12px;
  }

  .main-content {
    margin-left: var(--sidebar-width-collapsed);
  }

  .topbar__search {
    width: 180px;
  }
}

/* ============================================
   MÓVIL (≤768px): sidebar oculta, se abre como panel
   ============================================ */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar.is-open .sidebar__brand span,
  .sidebar.is-open .sidebar__label {
    display: inline;
  }

  .sidebar.is-open .sidebar__link {
    justify-content: flex-start;
    padding: 11px 20px;
  }

  .main-content {
    margin-left: 0;
  }

  .topbar__menu-btn {
    display: flex;
  }

  .topbar__user-name,
  .topbar__user-role {
    display: none;
  }

  .content-inner {
    padding: 16px;
  }
}
@media (max-width: 1200px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .form-grid,
  .form-grid--3 {
    grid-template-columns: 1fr;
  }
  .detalle-grid {
    grid-template-columns: 1fr;
  }
  .filtros-bar__campo {
    flex: 1 1 45%;
  }
}