/* Juntart desktop (1440). Mesmos tokens e componentes do mobile (componentes.css); aqui só o que muda
   em tela grande: topo com navegação, grade, barra de filtros, painéis laterais e rodapé.
   DESIGN.md: formulários até 560 px de largura; listas podem ter colunas; não ampliar a interface mobile. */

.tela.tela--desktop { width: 1440px; height: auto; min-height: 900px; padding-top: 0; overflow: visible; }
body.desktop { background: var(--cor-background); }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 10; height: 72px; flex: none; display: flex; align-items: center; gap: var(--espaco-2xl); padding: 0 120px; background: var(--cor-background); border-bottom: 1px solid var(--cor-outline); }
.topo__marca { display: flex; align-items: center; gap: var(--espaco-md); color: var(--cor-on-surface); text-decoration: none; }
.topo__simbolo { width: 32px; height: 34px; object-fit: contain; }
.topo__nav { display: flex; align-items: stretch; gap: var(--espaco-xl); height: 72px; }
.topo__link { display: flex; align-items: center; gap: var(--espaco-sm); color: var(--cor-secondary); text-decoration: none; border-bottom: 2px solid transparent; }
.topo__link--ativo { color: var(--cor-primary); border-bottom-color: var(--cor-primary); }
.topo__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--espaco-md); }
.modo { display: inline-flex; padding: var(--espaco-xs); border-radius: var(--raio-control); background: var(--cor-surface); border: 1px solid var(--cor-outline); }
.modo__opcao { height: 36px; padding: 0 var(--espaco-md); display: inline-flex; align-items: center; gap: var(--espaco-xs); border-radius: var(--raio-small); color: var(--cor-secondary); text-decoration: none; }
.modo__opcao--ativo { background: var(--cor-primary); color: var(--cor-surface); }
a.btn { text-decoration: none; }

/* ---------- Página ---------- */
.pagina { flex: 1; width: 1200px; margin: 0 auto; padding: var(--espaco-3xl) 0 96px; display: flex; flex-direction: column; gap: var(--espaco-2xl); }
.pagina__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espaco-xl); }
.trilha { display: flex; align-items: center; gap: var(--espaco-sm); color: var(--cor-secondary); }
.trilha a { color: var(--cor-secondary); text-decoration: none; }
.grade-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espaco-xl); }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espaco-xl); }
.grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espaco-xl); }
.com-filtros { display: grid; grid-template-columns: 280px 1fr; gap: var(--espaco-2xl); align-items: start; }
.com-painel { display: grid; grid-template-columns: 1fr 400px; gap: var(--espaco-2xl); align-items: start; }
.painel { position: sticky; top: 96px; }
.estreito { width: 560px; }

/* ---------- Filtros ---------- */
.filtros { display: flex; flex-direction: column; gap: var(--espaco-xl); padding: var(--espaco-xl); border-radius: var(--raio-card); background: var(--cor-surface); border: 1px solid var(--cor-outline); }
.filtros__grupo { display: flex; flex-direction: column; gap: var(--espaco-sm); }
.opcao { display: flex; align-items: center; gap: var(--espaco-sm); color: var(--cor-on-surface); }

/* ---------- Tabela ---------- */
.tabela { display: flex; flex-direction: column; border-radius: var(--raio-card); background: var(--cor-surface); border: 1px solid var(--cor-outline); overflow: hidden; }
.tabela__linha { display: grid; align-items: center; gap: var(--espaco-lg); padding: var(--espaco-lg) var(--espaco-xl); border-top: 1px solid var(--cor-outline); }
.tabela__linha:first-child { border-top: 0; }
.tabela__cabeca { color: var(--cor-secondary); background: var(--cor-background); }

/* ---------- Mensagens (lista + conversa) ---------- */
.dividido { display: grid; grid-template-columns: 360px 1fr 320px; min-height: 720px; border-radius: var(--raio-card); background: var(--cor-surface); border: 1px solid var(--cor-outline); overflow: hidden; }
.dividido > * + * { border-left: 1px solid var(--cor-outline); }

/* ---------- Agenda (semana) ---------- */
.semana-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--espaco-md); }
.dia { min-height: 220px; padding: var(--espaco-md); border-radius: var(--raio-card); background: var(--cor-surface); border: 1px solid var(--cor-outline); display: flex; flex-direction: column; gap: var(--espaco-sm); }
.dia--marcado { border: 2px solid var(--cor-primary); }

/* ---------- Landing ---------- */
.hero { display: grid; grid-template-columns: 1fr 520px; gap: var(--espaco-3xl); align-items: center; }
.faixa { width: 100%; background: var(--cor-surface); border-top: 1px solid var(--cor-outline); border-bottom: 1px solid var(--cor-outline); }
.faixa__conteudo { width: 1200px; margin: 0 auto; padding: 72px 0; display: flex; flex-direction: column; gap: var(--espaco-2xl); }
.mostra-telas { display: flex; gap: var(--espaco-xl); align-items: flex-start; }
.mostra-telas img { width: 240px; border-radius: var(--raio-sheet); border: 1px solid var(--cor-outline); }

/* ---------- Rodapé ---------- */
.rodape-site { flex: none; padding: var(--espaco-2xl) 120px; display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-xl); background: var(--cor-surface); border-top: 1px solid var(--cor-outline); color: var(--cor-secondary); }
.rodape-site a { color: var(--cor-secondary); text-decoration: none; }

/* Critérios de decisão e controles nativos compartilhados pelos percursos desktop. */
.desktop :focus-visible { outline: 2px solid var(--cor-primary); outline-offset: 4px; }
.desktop [hidden] { display: none !important; }
.barra-filtros { display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: var(--espaco-md); padding: var(--espaco-lg); background: var(--cor-surface); border: 1px solid var(--cor-outline); border-radius: var(--raio-card); }
.barra-filtros .busca-texto { min-width: 0; }
.barra-filtros input, .barra-filtros select { width: 100%; min-width: 0; color: var(--cor-on-surface); background: var(--cor-surface); }
.resultados-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-md); }
.criterios-ativos { display: flex; flex-wrap: wrap; gap: var(--espaco-sm); }
.criterios-ativos button { cursor: pointer; }
.busca-vazia { align-items: flex-start; }
.nota-decisao { padding: var(--espaco-md) var(--espaco-lg); border-left: 4px solid var(--cor-primary); background: var(--cor-surface); }
.atalhos { display: flex; flex-wrap: wrap; gap: var(--espaco-md); }
.atalhos a { color: var(--cor-primary); }
.barra-filtros details { grid-column: 1 / -1; }
.barra-filtros summary { cursor: pointer; color: var(--cor-primary); }
.barra-filtros details .campo { max-width: 320px; margin-top: var(--espaco-md); }
.desktop [id] { scroll-margin-top: 96px; }