/* Mantener legibles las pestañas aunque el menú necesite desplazamiento. */
#sidebar > * { flex-shrink: 0; }

/* El alto disponible ya contempla el zoom del navegador y el escalado del equipo. */
@media (min-width: 769px) and (max-height: 800px) {
  #app {
    --side-size: clamp(44px, calc((100dvh - 300px) / 5), 78px);
    grid-template-columns: clamp(160px, calc(100dvh / 4), 200px) minmax(0, 1fr);
  }
  .side-head { padding: 10px 12px 6px; }
  .side-head .integrapro-logo { max-height: 52px; }
  .side-tabs { margin: 4px 10px 10px; }
  .side-tab { padding: 7px 4px; }
  .side-grid {
    grid-template-columns: repeat(2, var(--side-size));
    gap: 6px;
    padding: 0 8px 10px;
  }
  .side-btn { width: var(--side-size); height: var(--side-size); border-radius: 12px; }
  .side-icon-img { width: 62%; height: 62%; }
  svg.side-icon-img { width: 75%; height: auto; }
  .side-emoji { font-size: clamp(22px, calc(var(--side-size) * .36), 28px); }
  #sideFoot { padding: 8px 12px; }
}