/* Reglas responsivas: escritorio, tableta y móvil. */

/* Tableta (hasta 1024px) */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
  }

  .sidebar__brand-text,
  .sidebar__section-title,
  .sidebar__nav-index,
  .sidebar__nav-link span:not(.sidebar__nav-index),
  .sidebar__submenu {
    display: none;
  }

  .sidebar__nav-link {
    justify-content: center;
  }

  .topbar__brand {
    display: none;
  }

  .company-selector__label {
    display: none;
  }

  .company-selector {
    max-width: 200px;
  }

  .topbar__module {
    display: none;
  }

  .user-menu__label {
    display: none;
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .module-preview__body {
    grid-template-columns: 1fr;
  }

  .indicator-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .module-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* Móvil (hasta 640px) */
@media (max-width: 640px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  .sidebar {
    position: fixed;
    inset: 0 20% 0 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-md);
  }

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

  /* En móvil se usa el botón de menú móvil; el de colapso deja de aplicar. */
  .topbar__menu-toggle[data-role="collapse-toggle"] {
    display: none;
  }

  .topbar__menu-toggle[data-role="mobile-menu-toggle"] {
    display: inline-flex;
  }

  .app-shell.is-sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .dropdown-panel {
    right: 0;
    left: auto;
    max-width: calc(100vw - 2 * var(--space-md));
  }

  .sidebar__brand-text,
  .sidebar__section-title,
  .sidebar__nav-index,
  .sidebar__nav-link span:not(.sidebar__nav-index) {
    display: block;
  }

  .sidebar__nav-link span:not(.sidebar__nav-index) {
    display: inline;
  }

  .sidebar__nav-link {
    justify-content: flex-start;
  }

  .sidebar__submenu {
    display: block;
  }

  .topbar {
    height: auto;
    min-height: var(--topbar-height);
    flex-wrap: wrap;
    padding: var(--space-sm);
  }

  .company-selector {
    max-width: 160px;
  }

  .main-content {
    padding: var(--space-md);
  }

  .main-content__header {
    flex-direction: column;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .module-preview {
    padding: var(--space-md);
  }

  .module-preview__header {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-field {
    min-width: 0;
  }

  .indicator-grid {
    grid-template-columns: 1fr 1fr;
  }

  .table-container {
    max-width: 100%;
  }

  .module-grid {
    grid-template-columns: 1fr;
  }

  .state-reference__grid {
    grid-template-columns: 1fr;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  button {
    min-height: 44px;
  }
}