/* =========================================================
   WIRTZ DRIVE · RESPONSIVE GLOBAL
   ========================================================= */

@media (max-width: 1100px) {
  :root {
    --sidebar-width: 236px;
  }

  .app-main__content {
    padding: 18px;
  }

  .app-topbar {
    padding: 0 18px;
  }

  .app-topbar__search {
    width: min(300px, 32vw);
  }
}

@media (max-width: 900px) {
  .app-layout {
    display: block;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;

    width: min(286px, 88vw);
    min-width: 0;

    transform: translateX(-102%);

    transition: transform var(--transition-slow);
  }

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

  .app-main {
    width: 100%;
  }

  .app-topbar__menu-button {
    display: inline-flex;
  }

  .app-topbar {
    min-height: 70px;
  }

  .app-topbar__heading h1 {
    font-size: 18px;
  }

  .app-topbar__heading p {
    display: none;
  }

  .app-topbar__search {
    width: min(280px, 42vw);
  }
}

@media (max-width: 680px) {
  :root {
    --topbar-height: 66px;
  }

  .app-main__content {
    padding: 14px;
  }

  .app-topbar {
    gap: 10px;
    padding: 0 14px;
  }

  .app-topbar__left {
    flex: 1;
  }

  .app-topbar__right {
    gap: 8px;
  }

  .app-topbar__search {
    width: 42px;
    min-width: 42px;
    padding: 0 11px;
  }

  .app-topbar__search input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;
    pointer-events: none;
  }

  .app-topbar__search:focus-within,
  .app-topbar__search.is-open {
    position: absolute;
    top: 10px;
    right: 14px;
    left: 14px;
    z-index: 20;

    width: auto;

    background: var(--surface);
  }

  .app-topbar__search:focus-within input,
  .app-topbar__search.is-open input {
    position: static;

    width: 100%;
    height: auto;

    opacity: 1;
    pointer-events: auto;
  }

  .button {
    min-height: 42px;
  }

  .button span {
    max-width: 180px;

    overflow: hidden;

    text-overflow: ellipsis;
  }

  .fatal-error {
    padding: 14px;
  }

  .fatal-error__card {
    padding: 26px 20px;
  }
}

@media (max-width: 480px) {
  .app-main__content {
    padding: 12px;
  }

  .app-topbar {
    padding: 0 12px;
  }

  .app-topbar__heading h1 {
    max-width: 155px;

    font-size: 17px;
  }

  .app-topbar__right > .button:not(.app-topbar__menu-button) span {
    display: none;
  }

  .app-topbar__right > .button:not(.app-topbar__menu-button) {
    width: 42px;
    min-width: 42px;
    padding: 0;
  }

  .icon-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: #b7bbc2;
    --line-strong: #9297a0;
    --text-muted: #535861;
  }

  .app-sidebar__link {
    border-color: var(--sidebar-line);
  }
}