/* ORBIT Empresa · paginas/visao_historico.css — a Visão geral › «Atualizações do OS» (23/10, só o admin; o
   visao_historico.js). No telemóvel, uma entrada por linha, à largura toda do cartão (16 px de cada lado): o título (até
   duas linhas, com «…») com a pill ao lado, a data e a hora por baixo, e a frase; o seletor à largura toda, em três partes
   iguais; a lista rola com a página. No computador (a partir de 53,8125 em), cada entrada numa grelha de três colunas (a
   data em duas linhas, com 112 px e números tabulares; o título, a frase e a versão; a pill encostada à direita) e a lista
   rola por dentro até 480 px. Nas duas Visões, à largura toda, logo a seguir aos servidores. */
.vis-hist { gap: 0; padding: 0; overflow: hidden; }
.vis-seccao--historico:focus { outline: none; }
.vis-hist-versao { min-width: 0; color: var(--ink-3); font: 500 var(--t-12)/1.4 var(--mono); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; }

/* o seletor de três partes */
.vis-hist-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: var(--e-4); padding: 2px;
  border: 1px solid var(--linha-2); border-radius: var(--r-caixa); background: var(--painel-2); }
.vis-hist-filtro { min-width: 0; min-height: 32px; padding: 0 var(--e-2); border: 1px solid transparent; border-radius: calc(var(--r-caixa) - 2px);
  background: none; color: var(--ink-2); font: 500 var(--t-13)/1.2 var(--sans); white-space: nowrap; cursor: pointer; }
.vis-hist-filtro:hover { color: var(--ink); background: var(--hover); }
.vis-hist-filtro:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: -2px; }
.vis-hist-filtro[aria-pressed="true"] { border-color: var(--accent-linha); background: var(--accent-fundo); color: var(--accent-texto); }
.vis-hist-filtro:disabled { cursor: default; opacity: .6; }

/* a lista */
.vis-hist-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha-fraca); }
.vis-hist-item + .vis-hist-item { border-top: 1px solid var(--linha-fraca); }
.vis-hist-linha { display: grid; grid-template-columns: minmax(0, 1fr) 14px; column-gap: var(--e-3); align-items: start; width: 100%;
  min-width: 0; min-height: 44px; margin: 0; padding: var(--e-3) var(--e-4); border: 0; border-radius: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; }
.vis-hist-linha:hover { background: var(--hover); }
.vis-hist-linha:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: -2px; }
.vis-hist-data { display: none; }
.vis-hist-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* o título e a pill na mesma linha; um título comprido parte em duas linhas e corta com «…» */
.vis-hist-cabeca { display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; }
.vis-hist-titulo { flex: 0 1 auto; min-width: 0; display: -webkit-box; overflow: hidden; color: var(--ink); font: 600 var(--t-14)/1.4 var(--sans);
  overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.vis-hist-pill { flex: none; display: inline-flex; }
.vis-hist-pill--fim { display: none; }   /* a da direita só no computador */
.vis-hist-pill--linha { margin-top: calc((var(--t-14) * 1.4 - 20px) / 2); }
.vis-hist-meta { display: flex; flex-wrap: wrap; column-gap: var(--e-1); min-width: 0; color: var(--ink-3);
  font: 400 var(--t-12)/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.vis-hist-meta > span { min-width: 0; overflow-wrap: anywhere; }
/* o «·» no fim da data: quando a versão não cabe e passa para baixo, a linha dela começa pela «versão» (a revisão) */
.vis-hist-meta-data:has(+ .vis-hist-meta-versao)::after { content: ' ·'; }
.vis-hist-frase { min-width: 0; color: var(--ink-2); font: 400 var(--t-13)/1.5 var(--sans); overflow-wrap: anywhere; }
.vis-hist-seta { display: inline-flex; align-items: center; height: calc(var(--t-14) * 1.4); color: var(--ink-3); transition: transform var(--dur); }
.vis-hist-linha[aria-expanded="true"] .vis-hist-seta { transform: rotate(90deg); }

/* a entrada aberta: o que mudou, os ficheiros e o detalhe técnico */
.vis-hist-detalhe { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; padding: 0 var(--e-4) var(--e-4); }
.vis-hist-parte { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.vis-hist-sub { margin: 0; color: var(--ink-3); font: 600 var(--t-12)/1.4 var(--sans); }
.vis-hist-itens { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; padding-left: var(--e-4); color: var(--ink-2);
  font: 400 var(--t-13)/1.5 var(--sans); }
.vis-hist-itens > li { overflow-wrap: anywhere; }
.vis-hist-ficheiros { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ink-2);
  font-size: var(--t-12); line-height: 1.5; }
.vis-hist-ficheiros > li { overflow-wrap: anywhere; }
.vis-hist-mais-ficheiros, .vis-hist-vazio-texto { margin: 0; color: var(--ink-3); font: 400 var(--t-13)/1.5 var(--sans); }
.vis-hist-detalhe > .vis-tecnico { margin: 0; }

/* os estados vazio e de erro, o «Ver mais» e o técnico do cartão */
.vis-hist-vazio { margin: 0; padding: var(--e-4); max-width: 68ch; color: var(--ink-2); font: 400 var(--t-13)/1.5 var(--sans); }
.vis-hist-filtros + .vis-hist-vazio { padding-top: 0; }
.vis-hist-fundo { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linha-fraca); }
.vis-hist-mais { width: 100%; justify-content: center; }
.vis-hist-erro-texto { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; color: var(--erro); font: 400 var(--t-13)/1.5 var(--sans); }
.vis-hist-erro-texto > .o-ic { flex: none; height: calc(var(--t-13) * 1.5); }
.vis-hist-erro > .o-btn { align-self: flex-start; }
.vis-hist-tecnico { padding: 0 var(--e-4) var(--e-4); }
.vis-hist-fundo + .vis-hist-tecnico, .vis-hist-lista + .vis-hist-tecnico { padding-top: var(--e-3); }

/* no telemóvel: o seletor e o «Tentar outra vez» com 44 px */
@media (max-width: 53.75em), (pointer: coarse) {
  .vis-hist-filtro { min-height: 44px; }
}

/* no computador: a grelha de três colunas e a lista a rolar por dentro */
@media (min-width: 53.8125em) {
  .vis-hist-filtros { align-self: flex-start; width: 360px; max-width: calc(100% - 2 * var(--e-5)); margin: var(--e-4) var(--e-5); }
  .vis-hist-linha { grid-template-columns: 112px minmax(0, 1fr) auto 14px; column-gap: var(--e-4); padding: var(--e-3) var(--e-5); }
  .vis-hist-data { display: flex; flex-direction: column; color: var(--ink-2); font: 500 var(--t-13)/1.4 var(--mono); font-variant-numeric: tabular-nums; }
  .vis-hist-hora { color: var(--ink-3); }
  .vis-hist-pill--linha, .vis-hist-meta-data { display: none; }
  .vis-hist-pill--fim { display: inline-flex; justify-self: end; margin-top: calc((var(--t-14) * 1.4 - 20px) / 2); }
  .vis-hist-frase { order: 1; }
  .vis-hist-meta { order: 2; }
  .vis-hist-lista { max-height: 480px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .vis-hist-detalhe { padding: 0 calc(var(--e-5) + 14px + var(--e-4)) var(--e-4) calc(var(--e-5) + 112px + var(--e-4)); }
  .vis-hist-detalhe > .vis-tecnico { max-width: 640px; }
  .vis-hist-vazio { padding: var(--e-4) var(--e-5); }
  .vis-hist-filtros + .vis-hist-vazio { padding-top: 0; }
  .vis-hist-fundo { padding: var(--e-3) var(--e-5); }
  .vis-hist-mais { width: auto; align-self: flex-start; }
  .vis-hist-tecnico { padding: 0 var(--e-5) var(--e-4); }
}

/* nas duas Visões, à largura toda, logo a seguir aos servidores (as áreas das grelhas do visao.css, com a linha a mais) */
@media (min-width: 68.75em) {
  .vis-visao.vis-visao--admin:has(> .vis-seccao--historico) {
    grid-template-areas: "primeiro primeiro" "espera espera" "uso uso" "historico historico" "trabalho entregue" "saude saude"; }
  .vis-visao.vis-visao--admin:has(> .vis-seccao--servidores):has(> .vis-seccao--historico) {
    grid-template-areas: "primeiro primeiro" "espera espera" "uso uso" "servidores servidores" "historico historico" "trabalho entregue" "saude saude"; }
  .vis-visao--admin > .vis-seccao--historico { grid-area: historico; }
}
@media (min-width: 75em) {
  .vis-colunas--admin:has(> .vis-seccao--historico) { grid-template-areas: "tarefas cerebro" "contas uso" "historico historico"; }
  .vis-colunas--admin.vis-colunas--servidores:has(> .vis-seccao--historico) {
    grid-template-areas: "tarefas cerebro" "contas uso" "servidores servidores" "historico historico"; }
  .vis-colunas--dia:has(> .vis-seccao--historico) { grid-template-areas: "primeiro cerebro" "tarefas cerebro" "contas uso" "historico historico"; }
  .vis-colunas--dia.vis-colunas--servidores:has(> .vis-seccao--historico) {
    grid-template-areas: "primeiro cerebro" "tarefas cerebro" "contas uso" "servidores servidores" "historico historico"; }
  .vis-colunas > .vis-seccao--historico { grid-area: historico; }
}