/* Serviços em Foco — computador (768px ou mais). Menu lateral marinho, conteúdo até 1180px. */

.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.barra-inferior { display: none; }

/* Menu lateral */
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 24px; background: var(--tinta); color: #fff; padding: 20px 14px; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px; color: #fff; }
.marca:hover { text-decoration: none; }
.marca span { display: flex; flex-direction: column; line-height: 1.2; }
.marca strong { font: 700 16px var(--fonte-titulo); letter-spacing: -.01em; }
.marca small { color: rgba(255, 255, 255, .55); font-size: 12px; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--raio-pequeno); color: rgba(255, 255, 255, .72); font-weight: 500;
  transition: background-color .15s, color .15s; }
.menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.menu a.ativo { background: var(--marca); color: var(--sobre-marca); font-weight: 600; }
.quem { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font: 700 13px var(--fonte-titulo); flex: 0 0 auto; }
.quem-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.quem-texto strong { font-size: 13px; }
.quem-texto small { color: rgba(255, 255, 255, .55); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem .botao-icone { margin-left: auto; color: rgba(255, 255, 255, .6); }
.quem .botao-icone:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Conteúdo */
.conteudo { width: 100%; max-width: 1220px; padding: 32px 36px 48px; }
.cabecalho-pagina { justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }

.cartoes-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.cartao.numero { display: flex; flex-direction: column; gap: 6px; }
.cartao.numero .topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cartao.numero .rotulo { margin: 0; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.cartao.numero.escuro { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cartao.numero.escuro .rotulo, .cartao.numero.escuro .secundario { color: rgba(255, 255, 255, .6); }
.cartao.numero.escuro .numero-grande { color: var(--marca); }
.cartao.numero.escuro .ladrilho { background: rgba(240, 182, 56, .16); color: var(--marca); }

.cartoes-fontes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.cartoes-fontes .cartao { display: flex; flex-direction: column; gap: 8px; }
.cartoes-fontes form { margin-top: auto; padding-top: 8px; }
.cartoes-fontes .botao { width: 100%; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.duas-colunas.larga-esquerda { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.duas-colunas + .duas-colunas { margin-top: 20px; }
.coluna-acoes { position: sticky; top: 24px; }

.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 20px; padding: 16px 20px; }
.filtros label { flex: 1 1 150px; }
.filtros .campo-busca { flex: 2 1 260px; }
.filtros input, .filtros select { min-height: 40px; }
.acoes-filtro { display: flex; gap: 8px; }

.form-perfil { display: flex; flex-direction: column; gap: 20px; }
.form-perfil textarea { margin-bottom: 12px; }
.grade-campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; }
.grade-campos .largo { grid-column: span 2; }
.grade-campos .caixa { grid-column: span 4; }
.dados { grid-template-columns: 180px 1fr; column-gap: 20px; }
.dados dt { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--divisor); }
.dados dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--divisor); }
.dados dt:last-of-type, .dados dd:last-of-type { border-bottom: 0; }
.tabela td[data-rotulo="Fonte"], .tabela td[data-rotulo="Quando"] { white-space: nowrap; }

/* Entrada: marca à esquerda, formulário à direita */
.tela-entrada { grid-template-columns: minmax(380px, 46%) 1fr; }
.entrada-marca { padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; }
.entrada-formulario { display: grid; place-items: center; padding: 48px 32px; }

/* Menu recolhido: só ícones, o conteúdo ganha a largura. Entre 768 e 1023px já nasce assim
   (o menu inteiro espremeria o conteúdo); de 1024px para cima, vale o botão. */
.lateral { position: sticky; }
.recolher { position: absolute; top: 22px; right: 10px; color: rgba(255, 255, 255, .55); }
.recolher:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.recolher .so-fechado, .menu-recolhido .recolher .so-aberto { display: none; }
.menu-recolhido .recolher .so-fechado { display: block; }
.app { transition: grid-template-columns .2s ease; }
.menu-recolhido .app { grid-template-columns: 76px 1fr; }
.menu-recolhido .lateral { padding: 20px 12px; align-items: center; }
.menu-recolhido .marca span, .menu-recolhido .menu a span, .menu-recolhido .quem-texto { display: none; }
.menu-recolhido .marca { padding: 4px 0; }
.menu-recolhido .recolher { position: static; margin-top: -8px; }
.menu-recolhido .menu a { justify-content: center; padding: 11px; }
.menu-recolhido .quem { flex-direction: column; padding: 12px 0 0; }
.menu-recolhido .quem .botao-icone { margin-left: 0; }
@media (max-width: 1023px) {
  .app { grid-template-columns: 76px 1fr; }
  .lateral { padding: 20px 12px; align-items: center; }
  .marca span, .menu a span, .quem-texto, .recolher { display: none; }
  .menu a { justify-content: center; padding: 11px; }
  .quem { flex-direction: column; padding: 12px 0 0; }
  .quem .botao-icone { margin-left: 0; }
  .conteudo { padding: 24px 20px 40px; }
  .cartoes-numeros { grid-template-columns: repeat(2, 1fr); }
  .duas-colunas, .duas-colunas.larga-esquerda, .cartoes-fontes { grid-template-columns: 1fr; }
  .coluna-acoes { position: static; }
}