/*
 * Arquivo de documentos.
 *
 * A tela tinha virado tabela dentro de tabela, e ler uma pasta exigia varrer
 * cinco colunas para descobrir a única coisa que importa: se falta documento
 * ali dentro. O desenho daqui inverte isso — a situação é a cor da peça, não
 * uma coluna —, e existe por um motivo só: num arquivo, o que se procura é o
 * buraco, e buraco não se acha lendo linha por linha.
 */

/* ── A trilha ─────────────────────────────────────────────────────────────── */

.arq-trilha {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: var(--t-md);
}

.arq-trilha a {
  color: var(--texto-2);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  transition: background var(--transicao), color var(--transicao);
}
.arq-trilha a:hover { background: var(--cinza-suave); color: var(--texto); }
.arq-trilha .sep { color: var(--texto-3); font-size: var(--t-sm); }
.arq-trilha .aqui { font-weight: 600; padding: 3px 4px; letter-spacing: -.01em; }

/* ── O cabeçalho do lugar em que se está ──────────────────────────────────── */

.arq-lugar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.arq-lugar .titulo {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.arq-lugar .titulo svg { width: 19px; height: 19px; opacity: .45; flex: none; }
.arq-lugar .sub { font-size: var(--t-sm); color: var(--texto-2); margin-top: 3px; }

.arq-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── A grade de pastas ────────────────────────────────────────────────────── */

.arq-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
}

/*
 * O cartão da pasta.
 *
 * A borda esquerda carrega a situação. É o único jeito de a falta aparecer no
 * canto do olho: quem abre a tela vendo doze pastas não lê doze pílulas, mas
 * enxerga de imediato as três que estão marcadas de vermelho.
 */
.arq-pasta {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte);
  border-radius: var(--r-md);
  padding: 13px 14px 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: box-shadow var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.arq-pasta:hover { box-shadow: var(--sombra-md); transform: translateY(-1px); }

.arq-pasta[data-situacao='falta'] { border-left-color: var(--tijolo); background: var(--tijolo-suave); }
.arq-pasta[data-situacao='vencido'] { border-left-color: var(--tijolo); }
.arq-pasta[data-situacao='vencendo'] { border-left-color: var(--ambar); }
.arq-pasta[data-situacao='pedido'] { border-left-color: var(--ambar); }
.arq-pasta[data-situacao='ok'] { border-left-color: var(--verde); }
.arq-pasta[data-situacao='ramo'] { border-left-color: var(--linha-forte); }

.arq-pasta .topo { display: flex; align-items: flex-start; gap: 9px; }
.arq-pasta .topo svg { width: 17px; height: 17px; opacity: .4; flex: none; margin-top: 1px; }

.arq-pasta .nome {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  flex: 1;
  word-break: break-word;
}

.arq-pasta .conteudo { font-size: var(--t-sm); color: var(--texto-3); }
.arq-pasta .pedido-link { font-size: var(--t-sm); color: var(--ambar); font-weight: 500; }

.arq-pasta .rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 3px;
}

/*
 * As ações da pasta ficam visíveis, e não escondidas atrás do hover.
 *
 * Criar subpasta é a operação que o cliente pediu em primeiro lugar — "depois
 * que ele cria a pasta ele já pode criar a subpasta dentro" —, e esconder num
 * menu o gesto principal da tela é como se ensina que ele não existe. Em
 * telefone não há hover nenhum.
 */
.arq-pasta-acoes { display: flex; gap: 2px; }

.arq-mini {
  height: 26px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-2);
  font-size: var(--t-sm);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transicao);
  white-space: nowrap;
}
.arq-mini svg { width: 13px; height: 13px; opacity: .6; }
.arq-mini:hover { background: var(--cinza-suave); color: var(--texto); border-color: var(--linha); }
.arq-mini[data-tom='tijolo'] { color: var(--tijolo); font-weight: 500; }
.arq-mini[data-tom='tijolo']:hover { background: var(--tijolo-suave); border-color: rgba(169, 80, 60, .3); }

/* ── A pasta que ainda não existe ─────────────────────────────────────────── */

/*
 * O cartão de criar fica **junto** das pastas, no fim da grade, e não só como
 * botão no topo. É o convite no lugar onde a pessoa está olhando, e é o que
 * faz a tela vazia deixar de ser um beco.
 */
.arq-nova {
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--texto-2);
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--t-sm);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transicao);
}
.arq-nova svg { width: 17px; height: 17px; opacity: .5; }
.arq-nova:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--cartao);
}
.arq-nova:hover svg { opacity: .8; }

/* ── A lista de obras ─────────────────────────────────────────────────────── */

.arq-obras { display: flex; flex-direction: column; gap: 9px; }

.arq-obra {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}
.arq-obra:hover { box-shadow: var(--sombra-md); border-color: var(--linha-forte); }

.arq-obra .identidade { flex: 1; min-width: 180px; }
.arq-obra .nome { font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; }
.arq-obra .cliente { font-size: var(--t-sm); color: var(--texto-3); margin-top: 2px; }

/*
 * A barra de preenchimento.
 *
 * "6 de 7" é um número que se lê; a barra é um número que se vê. Numa lista de
 * quinze obras, é ela que diz em meio segundo qual está para trás.
 */
.arq-barra {
  width: 112px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--cinza-suave);
  overflow: hidden;
  flex: none;
}
.arq-barra span { display: block; height: 100%; background: var(--verde); border-radius: var(--r-pill); }
.arq-barra[data-alerta='1'] span { background: var(--ambar); }

.arq-obra .contagem {
  font-size: var(--t-sm);
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  flex: none;
}

.arq-obra .selos { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; min-width: 150px; }

/* ── Os documentos ────────────────────────────────────────────────────────── */

.arq-docs { display: flex; flex-direction: column; gap: 1px; }

.arq-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  transition: background var(--transicao);
}
.arq-doc:hover { background: var(--cartao-2); }
.arq-doc + .arq-doc { border-top: 1px solid var(--linha); }

.arq-doc > svg { width: 17px; height: 17px; opacity: .35; flex: none; }
.arq-doc .corpo { flex: 1; min-width: 0; }
.arq-doc .nome { font-size: var(--t-md); font-weight: 500; }
.arq-doc .nome a { color: var(--texto); }
.arq-doc .nome a:hover { color: var(--navy-4); text-decoration: underline; }
.arq-doc .meta { font-size: var(--t-sm); color: var(--texto-3); margin-top: 2px; }
.arq-doc .meta[data-tom='tijolo'] { color: var(--tijolo); }
.arq-doc .quando { font-size: var(--t-sm); color: var(--texto-3); flex: none; white-space: nowrap; }
.arq-doc .acoes { display: flex; gap: 2px; flex: none; }

.arq-secao {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-3);
  font-weight: 600;
  margin: 22px 0 9px;
}

/* ── O caderno em que tudo isso mora ──────────────────────────────────────── */

.arq-caixa {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 8px;
}

@media (max-width: 720px) {
  .arq-grade { grid-template-columns: 1fr; }
  .arq-obra { flex-wrap: wrap; gap: 10px; }
  .arq-obra .selos { justify-content: flex-start; min-width: 0; }
  .arq-barra { width: 100%; }
}