@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  :root {
    --desktop-gap: clamp(20px, 2vw, 32px);
    --desktop-sidebar: clamp(248px, 15vw, 304px);
    --desktop-content: calc(100vw - var(--desktop-sidebar) - (var(--desktop-gap) * 3));
  }

  html.desktop-layout body {
    min-height: 100vh;
    padding: var(--desktop-gap) var(--desktop-gap) var(--desktop-gap)
      calc(var(--desktop-sidebar) + (var(--desktop-gap) * 2));
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.86) 34%, rgba(236, 241, 247, 0.9) 100%),
      #eef2f7;
    overflow-x: hidden;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) {
    padding-left: var(--desktop-gap);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 590px));
    grid-template-rows: auto 1fr auto;
    gap: 18px 16px;
    align-content: stretch;
    justify-content: center;
  }

  html.desktop-layout .app {
    width: 100%;
    max-width: var(--desktop-content);
    margin-right: 0;
    margin-left: 0;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) .app {
    width: auto;
    max-width: none;
    margin: 0;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) main.app {
    display: contents;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) footer.app {
    display: contents;
    margin-top: 0 !important;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) .hero {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94)),
      #ffffff;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) .logo {
    width: min(250px, 34vw);
    margin: 0;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) .section {
    width: 100%;
    margin-bottom: 0;
    align-self: stretch;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) main.app .section {
    grid-column: 1;
    grid-row: 3;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) footer.app .section {
    grid-column: 2;
    grid-row: 3;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) .section-label {
    margin-bottom: 12px;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) .stack {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 16px;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) .action {
    min-height: 74px;
    padding: 18px 20px;
    font-size: 1rem;
  }

  html.desktop-layout body:not(:has(.bottom-nav)) .action small {
    padding: 5px 10px;
    border-radius: 999px;
    background: #f2f4f8;
    color: #4f5b70;
    opacity: 1;
  }
  }

  html.desktop-layout .hero,
  html.desktop-layout .card,
  html.desktop-layout .section {
    border-radius: 14px;
  }

  html.desktop-layout .hero,
  html.desktop-layout .card {
    border-color: rgba(196, 205, 218, 0.74);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 34px rgba(21, 35, 57, 0.09);
    padding: clamp(22px, 2vw, 32px);
  }

  html.desktop-layout h1 {
    font-size: clamp(1.45rem, 1.2vw, 1.9rem);
  }

  html.desktop-layout h2 {
    font-size: clamp(1.08rem, 0.95vw, 1.32rem);
  }

  html.desktop-layout .subtitle,
  html.desktop-layout .helper,
  html.desktop-layout .panel-helper {
    max-width: 74ch;
  }

  html.desktop-layout .bottom-nav {
    top: var(--desktop-gap);
    bottom: var(--desktop-gap);
    left: var(--desktop-gap);
    width: var(--desktop-sidebar);
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    justify-content: flex-start;
    padding: 18px;
    overflow: auto;
    border-radius: 16px;
    border-color: rgba(196, 205, 218, 0.82);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 42px rgba(21, 35, 57, 0.12);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  html.desktop-layout .bottom-nav::before {
    content: "TBR Distribuidora";
    display: block;
    margin: 2px 2px 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    color: var(--brand);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
  }

  html.desktop-layout .bottom-nav::after {
    display: none;
  }

  html.desktop-layout .bottom-nav > a,
  html.desktop-layout .bottom-nav > button {
    display: none;
  }

  .desktop-nav-menu,
  .desktop-nav-actions {
    display: none;
  }

  html.desktop-layout .desktop-nav-menu {
    display: grid;
    gap: 6px;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
  }

  html.desktop-layout .desktop-nav-title {
    display: block;
    margin: 2px 2px 8px;
    color: #7a8496;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  html.desktop-layout .desktop-nav-actions {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  html.desktop-layout .desktop-nav-menu a,
  html.desktop-layout .desktop-nav-actions a,
  html.desktop-layout .desktop-nav-actions button {
    min-height: 46px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding: 11px 12px;
    text-align: left;
    line-height: 1.25;
    text-decoration: none;
    background: transparent;
    border: 0;
    color: #303b4f;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
  }

  html.desktop-layout .desktop-nav-icon {
    width: 17px;
    height: 17px;
    color: currentColor;
    flex: 0 0 17px;
    stroke-width: 2;
  }

  html.desktop-layout .desktop-nav-menu a:hover,
  html.desktop-layout .desktop-nav-actions a:hover,
  html.desktop-layout .desktop-nav-actions button:hover {
    background: #f4f6f9;
    color: var(--text);
    transform: translateX(2px);
  }

  html.desktop-layout .desktop-nav-menu a.active {
    background: linear-gradient(135deg, #fff0f1, #fff7f7);
    color: var(--brand);
    box-shadow: inset 3px 0 0 var(--brand);
  }

  html.desktop-layout .desktop-nav-actions a,
  html.desktop-layout .desktop-nav-actions button {
    background: #f7f8fb;
    justify-content: center;
    text-align: center;
  }

  html.desktop-layout .desktop-nav-actions button {
    color: var(--brand);
  }

  html.desktop-layout .desktop-nav-menu a.hidden {
    display: none !important;
  }

  html.desktop-layout .desktop-nav-menu [data-desktop-menu-key="colaborador_home"] { order: 0; }
  html.desktop-layout .desktop-nav-menu [data-desktop-menu-key="abastecimento"] { order: 1; }
  html.desktop-layout .desktop-nav-menu [data-desktop-menu-key="colaborador_admin"] { order: 2; }
  html.desktop-layout .desktop-nav-menu [data-desktop-menu-key="checkin"] { order: 3; }
  html.desktop-layout .desktop-nav-menu [data-desktop-menu-key="compras"] { order: 4; }
  html.desktop-layout .desktop-nav-menu [data-desktop-menu-key="gerencia_comercial"] { order: 5; }
  html.desktop-layout .desktop-nav-menu [data-desktop-menu-key="gerencia_logistica"] { order: 6; }
  html.desktop-layout .desktop-nav-menu [data-desktop-menu-key="marketing"] { order: 7; }
  html.desktop-layout .desktop-nav-menu [data-desktop-menu-key="solicitacoes"] { order: 8; }
  html.desktop-layout .desktop-nav-menu [data-desktop-menu-key="vendas"] { order: 9; }

  html.desktop-layout .internal-menus [data-page-key="abastecimento"] { order: 1; }
  html.desktop-layout .internal-menus [data-page-key="colaborador_admin"] { order: 2; }
  html.desktop-layout .internal-menus [data-page-key="checkin"] { order: 3; }
  html.desktop-layout .internal-menus [data-page-key="compras"] { order: 4; }
  html.desktop-layout .internal-menus [data-page-key="gerencia_comercial"] { order: 5; }
  html.desktop-layout .internal-menus [data-page-key="gerencia_logistica"] { order: 6; }
  html.desktop-layout .internal-menus [data-page-key="marketing"] { order: 7; }
  html.desktop-layout .internal-menus [data-page-key="solicitacoes"] { order: 8; }
  html.desktop-layout .internal-menus [data-page-key="vendas"] { order: 9; }

  html.desktop-layout .desktop-nav-menu a span,
  html.desktop-layout .desktop-nav-actions a span,
  html.desktop-layout .desktop-nav-actions button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.desktop-layout .stack,
  html.desktop-layout .internal-menus,
  html.desktop-layout .menu-list,
  html.desktop-layout .highlight-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 14px;
  }

  html.desktop-layout .summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 14px;
  }

  html.desktop-layout .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  html.desktop-layout .lists-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html.desktop-layout .collaborators-head {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(560px, 0.95fr);
    align-items: center;
    gap: 20px;
  }

  html.desktop-layout .collaborators-head .inline-form {
    width: 100%;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) 160px;
  }

  html.desktop-layout .collaborators-head .actions {
    align-self: stretch;
  }

  html.desktop-layout .collaborators-head .primary-btn {
    height: 100%;
  }

  html.desktop-layout .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  html.desktop-layout .inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
    align-items: end;
  }

  html.desktop-layout .inline-form .actions {
    width: 100%;
    min-width: 0;
  }

  html.desktop-layout .inline-form .primary-btn {
    width: 100%;
    min-width: 0;
  }

  html.desktop-layout .primary-btn,
  html.desktop-layout .secondary-btn,
  html.desktop-layout .menu-card,
  html.desktop-layout .action {
    min-height: 58px;
    border-radius: 12px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, filter 0.16s ease;
  }

  html.desktop-layout .primary-btn {
    width: auto;
    min-width: 190px;
    padding-right: 26px;
    padding-left: 26px;
  }

  html.desktop-layout .menu-card,
  html.desktop-layout .action {
    align-content: center;
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
  }

  html.desktop-layout .menu-card-main {
    gap: 14px;
  }

  html.desktop-layout .menu-card-icon {
    width: 20px;
    height: 20px;
  }

  html.desktop-layout .menu-card-label {
    white-space: normal;
  }

  html.desktop-layout .menu-card:hover,
  html.desktop-layout .secondary-btn:hover,
  html.desktop-layout .action:hover {
    border-color: #d6dce6;
    box-shadow: 0 10px 24px rgba(18, 30, 52, 0.09);
    transform: translateY(-1px);
  }

  html.desktop-layout .primary-btn:hover {
    filter: brightness(1.03);
  }

  html.desktop-layout #protectedContent,
  html.desktop-layout .view-panel.active {
    gap: var(--desktop-gap);
  }

  html.desktop-layout #homeView.view-panel.active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  html.desktop-layout #homeView.view-panel.active > .card:first-child {
    grid-column: 1 / -1;
  }

  html.desktop-layout body[data-page-key="marketing"] #homeView.view-panel.active > .card {
    grid-column: 1 / -1;
    width: 100%;
  }

  html.desktop-layout body[data-page-key="marketing"] #detailView {
    width: 100%;
    max-width: none;
  }

  html.desktop-layout #detailView {
    max-width: 920px;
  }

  html.desktop-layout #panelCard {
    min-height: calc(100vh - (var(--desktop-gap) * 2));
    display: flex;
    flex-direction: column;
  }

  html.desktop-layout #panelCard .panel-header {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }

  html.desktop-layout #panelCard h2 + .internal-menus,
  html.desktop-layout #panelCard .internal-menus {
    margin-top: 14px;
    align-content: start;
    flex: 1;
  }
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html.desktop-layout #panelCard .internal-menus {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (min-width: 1500px) and (hover: hover) and (pointer: fine) {
  html.desktop-layout #panelCard .internal-menus,
  html.desktop-layout .menu-list,
  html.desktop-layout .stack {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}