/* =========================================================
   ISM PORTAFOLIO 3.0 · TOPBAR MÓVIL FINAL V3
   Archivo externo compatible con la CSP vigente.
   ========================================================= */
@media (max-width: 820px) {
  .dashboard-topbar {
    width: 100% !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
  }

  .topbar-left {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: max-content minmax(12px, 1fr) max-content !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  .sidebar-toggle.sidebar-toggle-catalog {
    grid-column: 1 !important;
    justify-self: start !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }

  .back-link {
    grid-column: 3 !important;
    justify-self: end !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .topbar-status {
    display: none !important;
  }

  .sidebar-toggle.sidebar-toggle-catalog,
  .back-link {
    min-height: 40px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid rgba(var(--accent-rgb), 0.46) !important;
    border-radius: 11px !important;
    color: #eaf8ff !important;
    background: linear-gradient(
      180deg,
      rgba(var(--accent-rgb), 0.08),
      rgba(7, 21, 37, 0.94)
    ) !important;
    box-shadow:
      0 0 20px rgba(var(--accent-rgb), 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition:
      border-color .2s ease,
      background .2s ease,
      box-shadow .2s ease,
      color .2s ease !important;
  }

  .sidebar-toggle.sidebar-toggle-catalog:hover,
  .sidebar-toggle.sidebar-toggle-catalog:focus-visible,
  .back-link:hover,
  .back-link:focus-visible {
    color: #ffffff !important;
    border-color: rgba(var(--accent-rgb), 0.82) !important;
    background: linear-gradient(
      180deg,
      rgba(var(--accent-rgb), 0.15),
      rgba(7, 21, 37, 0.96)
    ) !important;
    box-shadow:
      0 0 26px rgba(var(--accent-rgb), 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  }

  .sidebar-toggle.sidebar-toggle-catalog svg,
  .back-link svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
    color: currentColor !important;
  }
}

@media (max-width: 390px) {
  .dashboard-topbar {
    padding-inline: 10px !important;
  }

  .topbar-left {
    column-gap: 7px !important;
  }

  .sidebar-toggle.sidebar-toggle-catalog,
  .back-link {
    padding-inline: 10px !important;
  }
}

/* =========================================================
   ISM PORTAFOLIO · TÍTULO DEL CATÁLOGO
   Centrado solicitado, sin alterar el topbar aprobado.
   ========================================================= */
.sidebar-title {
  text-align: center !important;
}

.sidebar-title > span,
.sidebar-title > p {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}


/* =========================================================
   ISM PORTAFOLIO · ALINEACIÓN DE CABECERAS DESKTOP
   Mismo alto para que ambos bordes inferiores coincidan.
   ========================================================= */
@media (min-width: 821px) {
  .sidebar-head,
  .dashboard-topbar {
    height: 72px !important;
    min-height: 72px !important;
  }
}