/* Tesouraria (Compras e Pagamentos). So classes .tes-; o resto vem da casca
   (src/estilo.css). Teal so como acento, como no resto da intranet. */

/* ---------- estado (situacao) ---------- */
.tes-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.tes-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--linha-forte); flex: none; }
.tes-tom-andamento::before { background: var(--azul); }
.tes-tom-pendencia { color: var(--alerta); }
.tes-tom-pendencia::before { background: var(--amarelo); }
.tes-tom-ok::before { background: var(--teal); }
.tes-tom-fim { color: var(--texto-3); }
.tes-acao-pendente { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--preto); background: var(--alerta-fundo); padding: 1px 7px; border-radius: var(--pilula); }

/* ---------- fila ---------- */
.tes-fila { display: grid; gap: 24px; }
.tes-filtros { flex-wrap: wrap; justify-self: start; }
.tes-contagem { margin-left: 6px; font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.tes-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.tes-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) 128px 112px 190px 16px; gap: 20px; align-items: center;
  padding: 16px 12px; border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit; transition: background .12s;
}
.tes-linha:hover { background: var(--realce); }
.tes-linha-titulo { display: grid; gap: 2px; min-width: 0; }
.tes-linha-titulo .nome-linha { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tes-linha-valor { font-variant-numeric: tabular-nums; text-align: right; }
.tes-linha-data { color: var(--texto-2); font-size: 13px; }
.tes-rotulo-celula { display: none; }
.tes-mais { display: flex; justify-content: center; }
.tes-vazio { padding: 64px 16px; }

@media (max-width: 760px) {
  .tes-linha { grid-template-columns: 1fr auto; grid-template-areas: 'titulo seta' 'valor seta' 'estado seta'; gap: 6px 12px; padding: 16px 4px; }
  .tes-linha-titulo { grid-area: titulo; }
  .tes-linha-valor { grid-area: valor; text-align: left; font-weight: 500; }
  .tes-linha-data { display: none; }
  .tes-linha .tes-estado { grid-area: estado; }
  .tes-linha .seta-linha { grid-area: seta; align-self: center; }
}

/* ---------- escolher o tipo ---------- */
.tes-escolhas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tes-escolha {
  display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--raio); background: var(--realce);
  text-decoration: none; color: inherit; transition: background .15s, transform .2s var(--suave); min-height: 180px;
}
a.tes-escolha:hover { background: #F2F2F6; transform: translateY(-1px); }
.tes-escolha h2 { font-size: 16px; font-weight: 500; }
.tes-escolha p { color: var(--texto-2); font-size: 13px; }
.tes-escolha-off { opacity: .7; cursor: default; }
.tes-escolha-icone { width: 36px; height: 36px; border-radius: 10px; background: var(--branco) no-repeat center / 20px; box-shadow: inset 0 0 0 1px var(--linha); }
.tes-icone-general_expense { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301000F' stroke-width='1.6'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2Z'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E"); }
.tes-icone-reimbursement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301000F' stroke-width='1.6'%3E%3Cpath d='M3 6h16a2 2 0 0 1 2 2v11H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M3 6c0-1.7 1.3-3 3-3h11v3M16 12h5'/%3E%3C/svg%3E"); }
.tes-icone-travel_advance { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301000F' stroke-width='1.6'%3E%3Cpath d='m2 16 20-8-8 14-2-8Z'/%3E%3Cpath d='m12 14-5-3'/%3E%3C/svg%3E"); }
.tes-icone-dp_payment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301000F' stroke-width='1.6'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

/* ---------- formulario ---------- */
.tes-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; }
.tes-form { display: grid; gap: 24px; min-width: 0; }
.tes-passo { display: grid; gap: 20px; }
.tes-passo h2.tes-sub { margin-top: 16px; }
.tes-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.tes-largo { grid-column: 1 / -1; }
.tes-erro-campo { font-size: 12.5px; color: var(--erro); }
.tes-caixa { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--texto-2); font-size: 13.5px; }
.tes-caixa input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--preto); flex: none; }

.tes-trilho { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; border-bottom: 1px solid var(--linha); }
.tes-trilho li { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: -1px; color: var(--texto-3); font-size: 13.5px; border-bottom: 2px solid transparent; }
.tes-trilho li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; border: 1px solid var(--linha-forte); }
.tes-trilho li.atual { color: var(--preto); font-weight: 500; border-bottom-color: var(--teal); }
.tes-trilho li.atual span { border-color: var(--preto); }
.tes-trilho li.feito span { background: var(--teal); border-color: var(--teal); color: var(--preto); }

.tes-form-acoes { display: flex; gap: 8px; align-items: center; padding-top: 20px; border-top: 1px solid var(--linha); }
.tes-espaco { flex: 1; }

.tes-como { display: grid; gap: 14px; padding: 22px; border-radius: var(--raio); background: var(--realce); position: sticky; top: 24px; }
.tes-como ol { margin: 0; padding: 0; list-style: none; counter-reset: etapa; display: grid; gap: 12px; }
.tes-como li { counter-increment: etapa; display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 13.5px; }
.tes-como li::before { content: counter(etapa); width: 22px; height: 22px; border-radius: 50%; background: var(--branco); display: grid; place-items: center; font-size: 11.5px; box-shadow: inset 0 0 0 1px var(--linha-forte); }

/* anexo: lugar preparado, desabilitado */
.tes-anexo {
  display: grid; gap: 8px; justify-items: center; text-align: center; padding: 36px 24px; border-radius: var(--raio);
  border: 1.5px dashed var(--linha-forte); color: var(--texto-2); font-size: 13.5px; background: var(--branco);
}
.tes-anexo strong { color: var(--texto); font-weight: 500; }
.tes-anexo > span:not(.tes-anexo-icone) { max-width: 52ch; }
.tes-anexo-pq { padding: 20px; justify-items: start; text-align: left; }
.tes-anexo-icone { width: 36px; height: 36px; opacity: .5; background: no-repeat center / 26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301000F' stroke-width='1.6'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 15v5h16v-5'/%3E%3C/svg%3E"); }

/* fatos (revisao e detalhe) */
.tes-fatos { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 24px; }
.tes-fatos div { display: grid; gap: 3px; min-width: 0; }
.tes-fatos dt { font-size: 12px; color: var(--texto-3); }
.tes-fatos dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- detalhe ---------- */
.tes-detalhe-area { display: grid; gap: 32px; }
.tes-sobre-estado { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tes-detalhe { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.tes-detalhe-principal { display: grid; gap: 40px; min-width: 0; }
.tes-detalhe-lateral { display: grid; gap: 16px; padding-left: 32px; border-left: 1px solid var(--linha); position: sticky; top: 24px; }
.tes-texto { white-space: pre-wrap; }
.tes-ajuste { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--raio); background: var(--alerta-fundo); color: var(--alerta); }
.tes-ajuste strong { color: var(--preto); font-weight: 500; }
.tes-ajuste p { color: var(--preto); }
.tes-anexos { margin: 0; padding-left: 18px; }

.tes-tempo { list-style: none; margin: 0; padding: 0; display: grid; }
.tes-tempo li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 20px; font-size: 13.5px; }
.tes-tempo li::before { content: ''; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--linha-forte); }
.tes-tempo li::after { content: ''; position: absolute; left: 4px; top: 17px; bottom: 0; width: 1px; background: var(--linha); }
.tes-tempo li:last-child::after { display: none; }
.tes-tempo li.tes-tom-andamento::before { background: var(--azul); }
.tes-tempo li.tes-tom-pendencia::before { background: var(--amarelo); }
.tes-tempo li.tes-tom-ok::before { background: var(--teal); }
.tes-tempo li strong { font-weight: 500; color: var(--texto); }
.tes-tempo-motivo { color: var(--texto-2); font-size: 13px; }
.tes-etapas ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }

@media (max-width: 1000px) {
  .tes-form-layout, .tes-detalhe { grid-template-columns: 1fr; gap: 32px; }
  .tes-como, .tes-detalhe-lateral { position: static; }
  .tes-detalhe-lateral { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--linha); }
}
@media (max-width: 640px) {
  .tes-grade { grid-template-columns: 1fr; }
  .tes-trilho { gap: 16px; }
  .tes-form-acoes { flex-wrap: wrap; }
  .tes-form-acoes .botao:not(.fantasma) { flex: 1; }
  .tes-espaco { display: none; }
}

/* campos na mesma linha com alturas iguais, mesmo quando so um tem texto de ajuda */
.tes-grade > .campo { align-content: start; }

/* abas do modulo e fila de aprovacoes */
.tes-abas { margin-top: -20px; }
.tes-abas .tes-contagem { margin-left: 6px; }
.tes-contagem-viva { background: var(--teal); color: var(--preto) !important; border-radius: 999px; padding: 1px 7px; font-weight: 500; }
.tes-linha-aprov { grid-template-columns: minmax(0, 1fr) 128px 170px 170px 16px; }
.tes-espera { color: var(--texto-2); font-size: 13px; }
@media (max-width: 760px) { .tes-linha-aprov { grid-template-columns: 1fr auto; } }

/* painel de decisao no detalhe */
.tes-decisao { display: grid; gap: 14px; padding: 22px 24px; border-radius: var(--raio); background: var(--realce); box-shadow: inset 3px 0 0 var(--teal); }
.tes-decisao h2 { font-size: 17px; }
.tes-etapas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tes-etapas-lista li { display: grid; gap: 2px; font-size: 13.5px; }
.tes-rodada { font-size: 11.5px; color: var(--texto-3); letter-spacing: .03em; text-transform: uppercase; margin-top: 6px; }

.tes-devolver { border-color: var(--amarelo); }
.tes-devolver:hover { border-color: var(--preto); }