/* ============================================================
   RESPONSIVO — celular primeiro, depois tablet e computador
   ============================================================ */

@media (max-width: 359px) {
  .grade-numeros { grid-template-columns: 1fr; }
  .atalhos { grid-template-columns: 1fr; }
  .barra-inferior__item span { display: none; }
}

/* Tablet -------------------------------------------------- */
@media (min-width: 700px) {
  .conteudo { padding: var(--espaco-5) var(--espaco-5) var(--espaco-7); }
  .grade-numeros { grid-template-columns: repeat(4, 1fr); }
  .atalhos { grid-template-columns: repeat(4, 1fr); }
  .galeria { grid-template-columns: repeat(4, 1fr); }

  .capa { padding: var(--espaco-6); }

  .modal-fundo { align-items: center; padding: var(--espaco-5); }
  .modal { max-width: 540px; border-radius: var(--raio); padding: var(--espaco-5); }
  .modal__puxador { display: none; }

  .topo__botao--extra { display: grid; }
  .topo__nova span { display: inline; }

  .notificacoes { left: auto; right: var(--espaco-5); bottom: var(--espaco-5); max-width: 400px; }
}

/* Computador ---------------------------------------------- */
@media (min-width: 1024px) {
  #aplicativo { flex-direction: row; }

  .lateral {
    display: flex;
    flex-direction: column;
    width: var(--largura-menu);
    flex: none;
    background: var(--cor-primaria);
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
  }

  .barra-inferior { display: none; }

  .conteudo, .topo { max-width: none; margin: 0; }
  .conteudo { padding: var(--espaco-4) var(--espaco-6) var(--espaco-7); }

  .topo { padding: 0 var(--espaco-6); background: var(--cor-fundo); }
  .topo__marca { display: none; }
  .topo__obra { flex: none; width: 340px; }
  .topo__acoes { margin-left: auto; }

  .painel-colunas {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: var(--espaco-4);
    align-items: start;
  }

  .galeria { grid-template-columns: repeat(6, 1fr); }
  .lista--duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-3); }
}

/* Telas muito largas — evita esticar demais */
@media (min-width: 1750px) {
  .conteudo, .topo { max-width: 1600px; margin: 0 auto; }
}

/* Impressão ----------------------------------------------- */
@media print {
  .lateral, .topo, .barra-inferior, .filtros { display: none !important; }
  .conteudo { padding: 0; }
  .cartao, .registro { break-inside: avoid; box-shadow: none; border: 1px solid var(--cor-linha); }
}