/* V5: ajustes de uso da intranet. Filtros num botão só ao lado da busca, menu da conta sem corte, marca como selo no ícone, Detalhes à direita, "Novo cartão" no canto de baixo, cartão sem link. */

/* Topo: a faixa de tipos (Tudo, Apresentações...) fica dentro do cabeçalho, em cima do roxo. Assim o menu da conta passa por cima dela sem a apagar. */
.topo-hero:has(.busca-linha) { padding: 6px 16px 0; }
.topo:has(.busca-linha) .topo-barra { height: 64px; }
.topo:has(.busca-linha) .saudacao { margin-bottom: 14px; }
.topo-hero .atalhos { margin: 16px -16px 0; padding: 6px 16px 12px; }
.conteudo .secao { margin-top: 14px; }
/* Sem a faixa colorida na lateral do cabeçalho: ela fazia um arco em volta do ícone do tipo. */
.conteudo .secao-cabeca { margin-bottom: 8px; padding: 3px 16px 3px 9px; box-shadow: none; }

/* Menu da conta: o topo corta só nas laterais (o halo decorativo). Assim o menu aberto desce por cima dos atalhos e o "Sair" aparece inteiro. */
.topo { overflow-x: clip; overflow-y: visible; }
.topo:has(.conta-lista:not([hidden])) { z-index: 40; }

/* Busca e filtro na mesma linha. No celular, o botão Filtros é só o ícone, com o número de filtros ativos no canto. */
.busca-linha { display: flex; align-items: stretch; gap: 10px; }
.busca-linha .busca { flex: 1; min-width: 0; }
.botao-filtro {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 58px; height: 58px; padding: 0 14px;
  background: var(--papel); color: var(--roxo);
  border: 0; border-radius: 18px;
  box-shadow: 0 20px 44px -14px rgba(12, 0, 30, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.4);
  font-size: 15px; font-weight: 800;
}
.botao-filtro .filtro-texto { display: none; }
.botao-filtro .filtro-numero {
  position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  border: 2px solid var(--roxo); border-radius: 999px;
  background: var(--coral); color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
}
@media (min-width: 640px) {
  .botao-filtro .filtro-texto { display: inline; }
}
@media (min-width: 768px) {
  .botao-filtro { height: 64px; border-radius: 20px; }
}

/* Cada cartão: ícone da plataforma com o selo da marca no canto; à direita, Detalhes. */
.cartao-icone { position: relative; }
/* O ícone da plataforma aparece só como desenho, sem caixa branca em volta. */
.cartao-icone .icone-local { width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: 0; }
@media (max-width: 480px) {
  .cartao-icone .icone-local { width: 32px; height: 32px; }
}
.cartao-icone .marca-selo {
  position: absolute; right: -8px; bottom: -8px;
  width: 22px; height: 22px; padding: 2px; box-sizing: border-box;
  border: 2px solid var(--papel); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(12, 0, 30, 0.22);
}

/* Janela de filtros: tipo e marca (chips), plataforma, dono do arquivo e ordem. Salvar aplica e fecha; Limpar zera os filtros e fecha. */
.filtros-janela .janela-corpo { display: grid; gap: 18px; }
.filtros-grupo { display: grid; gap: 8px; min-width: 0; }
.filtros-rotulo { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--suave); }
.filtros-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Tipo e plataforma: campo de seleção. A lista abre embaixo, com o ícone de cada opção; escolher uma fecha a lista. */
.escolha { min-width: 0; }
.escolha-atual {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; box-sizing: border-box;
  padding: 0 40px 0 12px; cursor: pointer; list-style: none;
  background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a1a86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
  border: 1.5px solid var(--linha); border-radius: var(--raio-sm);
  font-size: 15px; font-weight: 600; color: var(--texto);
}
.escolha-atual::-webkit-details-marker { display: none; }
.escolha[open] > .escolha-atual { border-color: var(--roxo-medio); }
.escolha-atual:focus-visible, .escolha-opcao:focus-visible { outline: none; box-shadow: var(--foco); }
.escolha-atual > span:last-child, .escolha-opcao > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escolha-icone { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.escolha-icone .icone { width: 20px; height: 20px; }
.escolha-icone .icone-local { width: 22px; height: 22px; padding: 0; background: none; border: 0; border-radius: 0; }
.escolha-opcoes {
  display: grid; gap: 4px; margin-top: 6px; padding: 6px;
  max-height: 300px; overflow-y: auto;
  background: var(--papel); border: 1.5px solid var(--linha); border-radius: var(--raio-sm);
}
.escolha-opcao {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; box-sizing: border-box;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--texto); text-align: left;
}
@media (hover: hover) {
  .escolha-opcao:hover { background: color-mix(in srgb, var(--roxo) 6%, #fff); }
}
.escolha-opcao[aria-pressed="true"] { background: color-mix(in srgb, var(--roxo) 11%, #fff); color: var(--roxo); font-weight: 800; }
.filtros-grupo select {
  width: 100%; min-height: 48px; padding: 0 40px 0 14px;
  background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a1a86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
  border: 1.5px solid var(--linha); border-radius: var(--raio-sm);
  font-size: 15px; font-weight: 600; color: var(--texto);
  -webkit-appearance: none; appearance: none;
}

/* Novo cartão: botão flutuante no canto de baixo, à direita. O fim da lista ganha espaço para ele não cobrir o último cartão. */
.novo-flutuante {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  min-height: 50px; padding: 0 20px; border-radius: 999px;
}
@media (min-width: 768px) {
  .novo-flutuante { right: 32px; bottom: 28px; }
}
.conteudo { padding-bottom: 96px; }