/* ================= e23: vistorias (escada da série, questionário) e distribuição de OS =================
   Plano: auditoria/evidencias-construcao/e23/PLANO-VISUAL.md. Tokens da e03 e o cabeçalho da e22 (os.css).
   A coisa memorável é a escada da série. Ordem: base → @media. */
.vs-tela, .dt-tela { min-width: 0; }

/* faixa de números */
.vs-mets { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--borda); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden; margin-bottom: var(--esp-4); box-shadow: var(--sombra); }
.vs-met { background: var(--branco); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-met b { font-size: var(--t-titulo); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.vs-met span { font-size: var(--t-rotulo); color: var(--apoio); }
.vs-met.ok b { color: var(--ok); }
.vs-met.erro b { color: var(--erro); }
.vs-met.info b { color: var(--azul); }

/* séries: lista e detalhe */
.vs-grade { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
.vs-lista { padding: var(--esp-4); position: sticky; top: var(--esp-4); }
.vs-lista h3 { font-size: var(--t-bloco); font-weight: 600; margin: 0 0 var(--esp-3); }
.vs-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.vs-lista button { width: 100%; text-align: left; display: grid; gap: 2px; background: transparent; color: var(--tinta); border: 1px solid transparent;
  border-radius: var(--raio-controle); padding: 10px 12px; font-weight: 400; min-height: 0; }
.vs-lista button:hover { background: var(--fundo-suave); border-color: var(--borda); }
.vs-lista button.ativo { background: var(--azul-claro-fundo); border-color: var(--azul); box-shadow: inset 3px 0 0 var(--azul); }
.vs-l-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.vs-l-tipo, .vs-l-filtro { font-size: var(--t-rotulo); color: var(--apoio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-l-conta { font-size: var(--t-nota); color: var(--apoio); }
.vs-l-conta i { font-style: normal; font-weight: 700; margin-left: 4px; }
.vs-l-conta i:first-child { margin-left: 0; }
.vs-l-conta .ok { color: var(--ok); } .vs-l-conta .erro { color: var(--erro); } .vs-l-conta .info { color: var(--azul); }

.vs-serie { padding: 0; overflow: hidden; }
.vs-serie-cab { background: var(--marinho); color: var(--branco); padding: var(--esp-5) var(--esp-6); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-4); align-items: end; }
.vs-serie-cab h3 { margin: 0; font-size: var(--t-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
.vs-serie-tipo { display: block; font-size: var(--t-rotulo); font-weight: 500; color: #B9D3F0; }
button.vs-degrau.aberta { align-items: flex-start; }
.vs-serie-cab p { margin: 4px 0 0; color: #D5E2F1; font-size: var(--t-corpo); }
.vs-serie-dl { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 8px 24px; margin: 0; }
.vs-serie-dl dt { font-size: var(--t-nota); color: #9FB6D1; }
.vs-serie-dl dd { margin: 0; font-size: var(--t-rotulo); font-weight: 600; }
.vs-serie-dl .selo { margin-left: 4px; }
.vs-regra { margin: 0; padding: 10px var(--esp-6); background: var(--fundo-suave); border-bottom: 1px solid var(--borda); font-size: var(--t-rotulo); color: var(--apoio); }

/* a escada: uma linha por ligação, um degrau por vistoria */
.vs-ligs { list-style: none; margin: 0; padding: var(--esp-2) var(--esp-6) var(--esp-4); }
.vs-lig { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(0, 2fr) 110px; gap: var(--esp-4); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.vs-lig:last-child { border-bottom: 0; }
.vs-lig-id { display: flex; flex-direction: column; min-width: 0; }
.vs-lig-id b { font-variant-numeric: tabular-nums; }
.vs-lig-id small { font-size: var(--t-nota); color: var(--apoio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-lig-sit { text-align: right; }
.vs-escada { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; align-items: end; }
.vs-degrau { display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; border-radius: 8px; padding: 6px 8px; min-height: 44px; font-size: var(--t-rotulo);
  font-weight: 700; border: 1.5px solid transparent; box-sizing: border-box; min-width: 0; text-align: left; line-height: 1.2; }
.vs-degrau small { font-size: var(--t-nota); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* cada degrau fica um pouco mais alto que o anterior: a série sobe a cada indeferimento */
.vs-escada > :nth-child(2) { min-height: 50px; } .vs-escada > :nth-child(3) { min-height: 56px; } .vs-escada > :nth-child(4) { min-height: 62px; }
.vs-escada > :nth-child(n+5) { min-height: 66px; }
.vs-degrau.deferida { background: var(--ok); color: var(--branco); }
.vs-degrau.indeferida { background: var(--erro); color: var(--branco); }
.vs-degrau.aberta { background: var(--azul-claro-fundo); border-color: var(--azul); color: var(--azul-escuro); }
button.vs-degrau.aberta { cursor: pointer; }
button.vs-degrau.aberta:hover { background: var(--azul); color: var(--branco); }
.vs-degrau.futuro { background: transparent; border: 1.5px dashed var(--borda-forte); color: var(--apoio); font-weight: 500; }
.vs-degrau.cancelado { background: repeating-linear-gradient(135deg, var(--neutro-fundo) 0 6px, var(--papel) 6px 12px); color: var(--apoio); text-decoration: line-through; }
.vs-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 10px var(--esp-6) var(--esp-4); font-size: var(--t-nota); color: var(--apoio); }
.vs-degrau.mini { display: inline-block; width: 14px; height: 12px; min-height: 0; padding: 0; border-radius: 3px; margin-right: -8px; vertical-align: -1px; }

/* questionário: uma coluna em qualquer largura */
.vs-q { max-width: 760px; }
.vs-q-cab { margin-bottom: var(--esp-3); }
.vs-q-local { margin: var(--esp-3) 0 0 !important; font-size: var(--t-rotulo) !important; color: #B9D3F0 !important; }
.vs-cobr { display: flex; align-items: center; gap: 8px; margin: var(--esp-3) 0 0; font-size: var(--t-rotulo); color: var(--apoio); }
.vs-cobr .icone { width: 18px; height: 18px; color: var(--azul); flex: none; }
.vs-form, .vs-feita { margin-top: var(--esp-4); padding: var(--esp-5) var(--esp-6); }
.vs-form h3, .vs-feita h3 { font-size: var(--t-bloco); font-weight: 600; margin: 0 0 var(--esp-2); }
.vs-pergs { list-style: none; margin: 0; padding: 0; }
.vs-perg { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.vs-perg-txt { display: flex; gap: 12px; align-items: flex-start; }
.vs-perg-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--papel); color: var(--apoio); font-size: var(--t-rotulo); font-weight: 700;
  display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.vs-perg-txt p { margin: 2px 0 0; font-size: var(--t-bloco); font-weight: 500; }
.vs-perg-txt small { font-size: var(--t-nota); color: var(--apoio); }
.vs-perg > input, .vs-perg > textarea, .vs-perg > .vs-sn { margin-left: 38px; max-width: calc(100% - 38px); }
.vs-perg > input { max-width: 200px; }
.vs-perg > b { margin-left: 38px; font-size: var(--t-bloco); }
.vs-perg > b.vs-rep { color: var(--erro); }
.vs-sn { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-sn button { min-height: 44px; min-width: 96px; background: var(--branco); color: var(--tinta); border: 1.5px solid var(--borda-forte); font-weight: 600; }
.vs-sn button:hover { border-color: var(--azul); }
.vs-sn button.marcado { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.vs-sn button.marcado.reprova { background: var(--erro); border-color: var(--erro); }
.vs-fim { display: flex; flex-direction: column; gap: var(--esp-3); padding-top: var(--esp-4); }
.vs-fim .campo { margin: 0; }
.vs-prev { border-radius: var(--raio-controle); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border-left: 4px solid; font-size: var(--t-corpo); }
.vs-prev.deferida { background: var(--ok-fundo); border-color: var(--ok); color: #124D30; }
.vs-prev.indeferida { background: var(--erro-fundo); border-color: var(--erro); color: #7A1A12; }
.vs-prev b { font-size: var(--t-bloco); }
.vs-prev small { font-size: var(--t-nota); }
.vs-enviar { align-self: flex-start; min-height: 44px; padding: 0 22px; }
.vs-feita > p { margin: 0 0 var(--esp-2); color: var(--apoio); }

/* perguntas por tipo */
.vs-tipos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--esp-4); }
.vs-tipos button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--branco); color: var(--tinta); border: 1px solid var(--borda);
  font-weight: 600; min-height: 44px; padding: 8px 14px; }
.vs-tipos button small { font-size: var(--t-nota); color: var(--apoio); font-weight: 400; }
.vs-tipos button.ativo { border-color: var(--azul); background: var(--azul-claro-fundo); box-shadow: inset 0 -3px 0 var(--azul); }

/* formulário da nova série */
.vs-origem, .dt-cats { border: 1px solid var(--borda); border-radius: var(--raio-controle); padding: 8px 12px 10px; margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.vs-origem legend, .dt-cats legend { font-size: var(--t-rotulo); font-weight: 600; padding: 0 4px; }
.vs-origem label, .dt-cats label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; min-height: 32px; margin: 0; }
.vs-cobrar { margin: 14px 0 4px; }
.vs-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }

/* ================= distribuição ================= */
.dt-equipes { padding: var(--esp-4) var(--esp-5); margin-bottom: var(--esp-4); }
.dt-equipes h3, .dt-res h3, .dt-h { font-size: var(--t-bloco); font-weight: 600; margin: 0 0 var(--esp-2); }
.dt-h { margin: var(--esp-5) 0 var(--esp-3); }
.dt-equipes ul { list-style: none; margin: 0; padding: 0; }
.dt-eq { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(0, 1.3fr) minmax(220px, 1.5fr) auto; gap: var(--esp-4); align-items: center; padding: 14px 0; border-top: 1px solid var(--borda); }
.dt-eq.inativa { opacity: .6; }
.dt-eq-id { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.dt-eq-id small { display: block; font-size: var(--t-nota); color: var(--apoio); }
.dt-classe { flex: none; width: 12px; height: 12px; border-radius: 3px; margin-top: 4px; }
.c-agua { background: var(--agua); } .c-esgoto { background: #7A5C2E; } .c-especial { background: #6E5BB0; }
.dt-eq-cats { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dt-cat { font-size: var(--t-nota); background: var(--fundo-suave); border: 1px solid var(--borda); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.dt-cat b { color: var(--azul); }
.dt-cat.vazio { color: var(--erro); border-color: var(--erro-fundo); background: var(--erro-fundo); }
.dt-eq-carga { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dt-casas { display: flex; gap: 3px; flex-wrap: wrap; }
.dt-casas i, .dt-legenda i { display: inline-block; width: 18px; height: 14px; border-radius: 3px; background: var(--papel); border: 1px solid var(--borda); box-sizing: border-box; }
.dt-casas.sem-limite i.livre { border-style: dashed; background: transparent; }
.dt-casas i.exec, .dt-legenda i.exec { background: var(--marinho); border-color: var(--marinho); }
.dt-casas i.aberta, .dt-legenda i.aberta { background: var(--azul); border-color: var(--azul); }
.dt-casas i.nova, .dt-legenda i.nova { background: repeating-linear-gradient(135deg, var(--azul) 0 3px, var(--azul-claro-fundo) 3px 6px); border-color: var(--azul); }
.dt-casas i.acima { outline: 2px solid var(--erro); outline-offset: -1px; }
.dt-num { font-size: var(--t-rotulo); color: var(--apoio); font-variant-numeric: tabular-nums; }
.dt-num b { color: var(--tinta); font-size: var(--t-bloco); }
.dt-num ins { text-decoration: none; color: var(--azul); }
.dt-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 var(--esp-2); font-size: var(--t-nota); color: var(--apoio); }
.dt-legenda i { width: 14px; height: 12px; margin-right: -8px; vertical-align: -1px; }
.dt-res { padding: var(--esp-4) var(--esp-5); margin-bottom: var(--esp-4); }
.dt-res.sim { border: 1.5px dashed var(--azul); }
.dt-res h4 { font-size: var(--t-corpo); margin: var(--esp-3) 0 6px; }
.dt-res .bloco-tabela { box-shadow: none; margin: var(--esp-2) 0 0; }
.dt-sem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-rotulo); }
.dt-sem li { display: flex; flex-direction: column; gap: 2px; }
.dt-sem span { color: var(--erro); font-weight: 600; }
.dt-sem small { color: var(--apoio); font-size: var(--t-nota); }
.dt-conf { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--esp-3); }

@media (max-width: 1100px) {
  .dt-eq { grid-template-columns: minmax(0, 1fr) auto; }
  .dt-eq-cats, .dt-eq-carga { grid-column: 1 / -1; }
  .dt-eq-acao { grid-row: 1; grid-column: 2; }
}
@media (max-width: 900px) {
  .vs-grade { grid-template-columns: minmax(0, 1fr); }
  .vs-lista { position: static; }
  .vs-lista ul { max-height: none; }
  .vs-serie-cab { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vs-mets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-met b { font-size: var(--t-bloco); }
  .vs-serie-cab { padding: var(--esp-4); }
  .vs-serie-dl { grid-template-columns: minmax(0, 1fr); }
  .vs-regra, .vs-legenda { padding-left: var(--esp-4); padding-right: var(--esp-4); }
  .vs-ligs { padding: var(--esp-2) var(--esp-4) var(--esp-3); }
  .vs-lig { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .vs-lig .vs-escada { grid-column: 1 / -1; grid-row: 2; }
  .vs-lig-sit { grid-row: 1; grid-column: 2; }
  .vs-form, .vs-feita { padding: var(--esp-4); }
  .vs-perg > input, .vs-perg > textarea, .vs-perg > .vs-sn, .vs-perg > b { margin-left: 0; max-width: 100%; }
  .vs-perg > input { max-width: 100%; }
  .vs-sn button { flex: 1 1 0; min-width: 0; }
  .vs-op button { flex: 1 1 40%; }
  .vs-enviar { align-self: stretch; }
  .vs-2 { grid-template-columns: minmax(0, 1fr); }
  .dt-equipes, .dt-res { padding: var(--esp-4); }
  .dt-casas i { width: 16px; }
}
@media (prefers-reduced-motion: reduce) { .vs-degrau, .dt-casas i { transition: none; } }