/* ================= e20: requerimentos (balcão) e tipos de requerimento =================
   Plano: auditoria/evidencias-construcao/e20/PLANO-VISUAL.md. Tokens da e03. Uma cor por natureza de
   item (material azul, serviço petróleo, taxa violeta), a mesma nas duas telas. A coisa memorável é a
   rua desenhada do intervalo de casas. Ordem: base → @media. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.rq-apoio { color: var(--apoio); font-size: var(--t-rotulo); margin: 0 0 var(--esp-3); max-width: 70ch; }
.rq-sem { color: var(--apoio); font-size: var(--t-rotulo); padding: 12px 0; list-style: none; }

/* marca da natureza do item */
.rq-nat { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.rq-n-mat { background: #1A5FB4; }
.rq-n-ser { background: #0E8FA3; }
.rq-n-tax { background: #6E5BB0; }

/* lista: prazo em contagem */
.rq-prazo { display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; }
.rq-prazo b { font-weight: 600; font-size: var(--t-rotulo); }
.rq-prazo small { color: var(--apoio); font-size: var(--t-nota); }
.rq-prazo.ok b { color: var(--ok); }
.rq-prazo.vencido b { color: var(--erro); }
.rq-canal { display: block; color: var(--apoio); font-size: var(--t-nota); font-weight: 400; }

/* ---------- balcão ---------- */
.rq-balcao { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--esp-6); align-items: start; }
.rq-passos { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.rq-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.rq-topo h2 { font-size: var(--t-titulo); font-weight: 700; }
.rq-passo { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--esp-5); min-width: 0; }
.rq-passo h3 { display: flex; align-items: center; gap: var(--esp-3); font-size: var(--t-bloco); font-weight: 600; margin-bottom: var(--esp-4); }
.rq-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--marinho); color: var(--branco); font-size: var(--t-rotulo); font-weight: 700; flex: none; }

.rq-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--esp-2); }
button.rq-tipo { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; min-height: 76px; padding: 12px 14px; text-align: left; line-height: 1.3;
  background: var(--branco); color: var(--tinta); border: 1px solid var(--borda-forte); font-weight: 400; }
button.rq-tipo:hover { background: var(--fundo-suave); border-color: var(--apoio); }
button.rq-tipo b { font-size: var(--t-corpo); font-weight: 600; }
button.rq-tipo > span { font-size: var(--t-nota); color: var(--apoio); font-variant-numeric: tabular-nums; }
button.rq-tipo.sel { border-color: var(--azul); background: var(--azul-claro-fundo); box-shadow: inset 0 0 0 1px var(--azul); }
.rq-tipo-marcas { display: flex; flex-wrap: wrap; gap: 4px; }
.rq-tipo-marcas i, .tr-marcas i { font-style: normal; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 999px; background: var(--neutro-fundo); color: var(--neutro); }
.rq-tipo-marcas i.trava, .tr-marcas i.trava { background: var(--alerta-fundo); color: var(--alerta); }
.tr-marcas i.portal { background: var(--azul-claro-fundo); color: var(--azul-escuro); }
.tr-marcas i.inat { background: var(--erro-fundo); color: var(--erro); }

.rq-modo { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--neutro-fundo); margin-bottom: var(--esp-4); max-width: 100%; }
.rq-modo button { min-height: 36px; background: transparent; border: 0; color: var(--apoio); font-weight: 500; border-radius: 9px; padding: 0 14px; }
.rq-modo button:hover { background: rgba(255, 255, 255, .6); color: var(--tinta); }
.rq-modo button[aria-checked="true"] { background: var(--branco); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 27, 51, .12); }

.rq-intervalo { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.2fr); gap: var(--esp-3); }

/* a rua desenhada (item 44) */
.rq-rua { margin: var(--esp-4) 0 0; padding: var(--esp-4); border-radius: var(--raio-controle); background: var(--fundo-suave); border: 1px solid var(--borda); overflow-x: auto; }
.rq-lado { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 8px; min-height: 56px; }
.rq-lado:first-child { align-items: flex-end; }
.rq-casa { position: relative; flex: none; width: 46px; height: 44px; display: grid; place-items: end center; padding-bottom: 5px;
  background: var(--papel); border: 1px solid var(--borda-forte); border-radius: 3px; color: #8A97A8; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.rq-casa::before { content: ''; position: absolute; left: -1px; right: -1px; top: -12px; height: 12px; background: inherit; border: inherit; border-bottom: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rq-casa small { position: absolute; top: -18px; right: -6px; z-index: 1; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center;
  background: var(--branco); color: var(--tinta); border: 1px solid var(--borda-forte); font-size: 10px; font-weight: 700; }
.rq-casa.dentro small { border-color: var(--azul); color: var(--azul-escuro); }
.rq-casa.dentro { background: var(--azul); border-color: var(--azul-escuro); color: var(--branco); }
.rq-lado:first-child .rq-casa { margin-top: 12px; }
.rq-lado:last-child .rq-casa { margin-top: 12px; }
.rq-asfalto { position: relative; margin: 6px 0; height: 34px; border-radius: 4px; background: var(--marinho); display: flex; align-items: center; min-width: 100%;
  background-image: linear-gradient(90deg, #C9D4E3 50%, transparent 50%); background-size: 26px 2px; background-repeat: repeat-x; background-position: 0 50%; }
.rq-asfalto span { margin-left: 12px; padding: 2px 8px; border-radius: 4px; background: var(--marinho); color: var(--branco); font-size: var(--t-nota); font-weight: 600; }
.rq-rua figcaption { margin-top: var(--esp-3); font-size: var(--t-rotulo); color: var(--apoio); }
.rq-rua figcaption b { color: var(--azul); font-size: var(--t-bloco); }

/* itens */
.rq-itens { list-style: none; margin: 0 0 var(--esp-3); padding: 0; }
.rq-itens li { display: grid; grid-template-columns: 10px minmax(0, 1fr) 96px 104px 36px; align-items: center; gap: var(--esp-3); padding: 10px 0; border-bottom: 1px solid var(--borda); }
.rq-itens li.rq-sem { display: block; }
.rq-item-desc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-item-desc b { font-weight: 500; overflow-wrap: anywhere; }
.rq-item-desc small { color: var(--apoio); font-size: var(--t-nota); font-variant-numeric: tabular-nums; }
.rq-qtd { margin: 0; }
.rq-qtd input { text-align: right; font-variant-numeric: tabular-nums; }
.rq-item-total { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
button.rq-tirar { width: 36px; padding: 0; }
.rq-itens-lidos li { grid-template-columns: 10px minmax(0, 1fr) auto; }
.rq-acrescentar { display: flex; gap: var(--esp-2); }
.rq-acrescentar select { flex: 1; min-width: 0; }

/* documentos */
.rq-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
label.rq-doc { display: flex; align-items: center; gap: var(--esp-3); margin: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-controle); cursor: pointer; font-weight: 400; color: var(--tinta); }
label.rq-doc span { flex: 1; min-width: 0; font-size: var(--t-corpo); }
label.rq-doc small { font-size: var(--t-nota); color: var(--apoio); }
label.rq-doc.ok { border-color: #A6D5B9; background: var(--ok-fundo); }
label.rq-doc.falta small { color: var(--erro); font-weight: 600; }
.rq-docs-lidos { margin: 0; padding-left: 18px; font-size: var(--t-rotulo); }
.rq-docs-lidos li.ok { color: var(--ok); }

/* recibo */
.rq-recibo { position: sticky; top: var(--esp-4); display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.rq-recibo header { padding: 16px 20px 14px; background: var(--marinho); color: var(--branco); display: flex; flex-direction: column; gap: 2px; }
.rq-recibo header span { font-size: var(--t-nota); color: #A9B8CC; }
.rq-recibo header b { font-size: var(--t-bloco); font-weight: 600; }
.rq-contas { margin: 0; padding: 12px 20px 4px; }
.rq-contas div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 5px 0; font-size: var(--t-rotulo); }
.rq-contas dt { min-width: 0; overflow-wrap: anywhere; }
.rq-contas dt small { color: var(--apoio); }
.rq-contas dd { margin: 0; font-variant-numeric: tabular-nums; }
.rq-contas .rq-sub { grid-template-columns: minmax(0, 1fr) auto; border-top: 1px dashed var(--borda-forte); margin-top: 6px; padding-top: 10px; font-weight: 600; }
.rq-desconto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 20px 12px; }
.rq-desconto label { grid-column: 1 / -1; margin: 0; }
.rq-desconto input { width: 100%; }
.rq-desconto small { grid-column: 1; color: var(--apoio); font-size: var(--t-nota); }
.rq-desc-valor { grid-column: 2; grid-row: 2; color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }
.rq-total { margin: 0 12px; padding: 14px 12px; border-radius: var(--raio-controle); background: var(--azul-claro-fundo); display: flex; flex-direction: column; gap: 2px; }
.rq-total span { font-size: var(--t-rotulo); color: var(--azul-escuro); font-weight: 600; }
.rq-total strong { font-size: var(--t-numero); font-weight: 700; letter-spacing: -.02em; color: var(--marinho); font-variant-numeric: tabular-nums; }
.rq-total small { font-size: var(--t-nota); color: var(--apoio); }
.rq-prazo-previsto { margin: 12px 20px 0; font-size: var(--t-rotulo); color: var(--apoio); }
.rq-prazo-previsto b { color: var(--tinta); }
.rq-alerta { margin: 10px 20px 0; padding: 8px 10px; border-radius: 8px; background: var(--erro-fundo); color: var(--erro); font-size: var(--t-rotulo); }
.rq-recibo > .msg { margin: 10px 20px 0; }
.rq-recibo-acoes { display: flex; gap: var(--esp-2); padding: 16px 20px 20px; }
.rq-recibo-acoes button:last-child { flex: 1; white-space: nowrap; padding: 0 12px; }
.rq-fecho { margin: 8px 0 0; }
.rq-fecho div { display: flex; justify-content: space-between; padding: 4px 0; font-variant-numeric: tabular-nums; }
.rq-fecho dd { margin: 0; }
.rq-fecho-total { font-weight: 700; font-size: var(--t-bloco); border-top: 1px solid var(--borda); margin-top: 4px; padding-top: 8px !important; }

/* ---------- tipos de requerimento ---------- */
.tr-grade { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--esp-6); align-items: start; }
.tr-lista { padding: var(--esp-3); }
.tr-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-seletor { display: none; }
button.tr-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; justify-items: start; min-height: 0; padding: 10px 12px; text-align: left;
  background: transparent; border: 1px solid transparent; color: var(--tinta); font-weight: 400; line-height: 1.3; }
button.tr-item:hover { background: var(--fundo-suave); }
button.tr-item.sel { background: var(--azul-claro-fundo); border-color: #B7D0EE; }
button.tr-item b { grid-column: 1 / -1; font-weight: 600; }
button.tr-item.inativo b { color: var(--apoio); text-decoration: line-through; }
.tr-meta { display: flex; gap: 10px; font-size: var(--t-nota); color: var(--apoio); font-variant-numeric: tabular-nums; }
.tr-marcas { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1; }
.tr-uso { grid-column: 2; grid-row: 2 / 4; align-self: end; font-size: 11px; color: var(--apoio); }
button.tr-novo { width: 100%; margin-top: var(--esp-3); }
.tr-editor { padding: var(--esp-5); }
.tr-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--esp-3); align-items: end; margin-bottom: var(--esp-4); }
.tr-nome input { font-size: var(--t-bloco); font-weight: 600; }
.tr-situacao { padding-bottom: 10px; }
.tr-painel { padding-top: var(--esp-4); }
.tr-rodape-itens { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap; }
.tr-rodape-itens .rq-acrescentar { flex: 1; min-width: 260px; }
.tr-valor { margin: 0; font-size: var(--t-rotulo); color: var(--apoio); }
.tr-valor b { font-size: var(--t-titulo); color: var(--marinho); margin-left: 6px; font-variant-numeric: tabular-nums; }
label.tr-chave { display: flex; align-items: flex-start; gap: var(--esp-3); margin: 0 0 var(--esp-2); padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-controle); cursor: pointer; }
label.tr-chave input { margin-top: 1px; flex: none; }
label.tr-chave span { display: flex; flex-direction: column; gap: 2px; }
label.tr-chave b { font-weight: 600; color: var(--tinta); }
label.tr-chave small { font-weight: 400; color: var(--apoio); font-size: var(--t-nota); }
.tr-docs { list-style: none; margin: var(--esp-3) 0; padding: 0; display: grid; gap: 6px; }
.tr-docs li { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: var(--esp-2); align-items: center; }
label.tr-obr { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; white-space: nowrap; }
.tr-termo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-5); }
.tr-termo-texto .campo + .campo { margin-top: var(--esp-3); }
.tr-marcadores { display: flex; flex-wrap: wrap; gap: 6px; }
button.tr-marcador { min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: var(--t-nota); font-weight: 500; background: var(--branco); color: var(--azul-escuro); border: 1px solid #B7D0EE; }
button.tr-marcador:hover { background: var(--azul-claro-fundo); }
.tr-folha { background: var(--branco); border: 1px solid var(--borda); border-radius: 4px; padding: 28px 26px; font-size: 12.5px; line-height: 1.55;
  box-shadow: 0 1px 2px rgba(11, 27, 51, .06), 6px 6px 0 -1px var(--papel), 6px 6px 0 0 var(--borda); min-width: 0; overflow-wrap: anywhere; }
.tr-folha h4 { margin: 0 0 12px; font-size: var(--t-corpo); text-align: center; }
.tr-folha mark { background: var(--azul-claro-fundo); color: var(--azul-escuro); border-radius: 3px; padding: 0 2px; }
.tr-folha mark.fora { background: var(--erro-fundo); color: var(--erro); }
.tr-mini-tab { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 11.5px; }
.tr-mini-tab td { border: 1px solid var(--borda); padding: 3px 6px; }
.tr-mini-tab td:last-child { text-align: right; }
.tr-assina { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; font-size: 11px; color: var(--apoio); }
.tr-assina span { flex: 1; border-top: 1px solid var(--tinta); padding-top: 4px; text-align: center; }
.tr-regras .tr-prazo { display: grid; grid-template-columns: 180px auto 200px; gap: var(--esp-3); align-items: end; margin-bottom: var(--esp-4); }
.tr-regras .rq-modo { margin-bottom: 0; }
.tr-tipo-os { margin: 0 0 var(--esp-3) 46px; max-width: 360px; }
#tr-msg:not(:empty) { margin-top: var(--esp-3); }
.tr-acoes { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid var(--borda); }

/* ================= e21: balcão em passos e ficha com o trilho =================
   Plano: auditoria/evidencias-construcao/e21/PLANO-VISUAL.md. Mesmos tokens da e20; a coisa memorável
   é o trilho das situações na ficha. Vermelho e verde só com sentido (débito, indeferido, concluído). */
.rq-sub-titulo { display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap; font-size: var(--t-corpo); font-weight: 600; margin: var(--esp-5) 0 var(--esp-3); }
.rq-sub-titulo small { font-weight: 400; color: var(--apoio); font-size: var(--t-nota); }

/* requerente */
.rq-busca-req input { width: 100%; min-height: 44px; font-size: var(--t-bloco); }
.rq-achados { list-style: none; margin: var(--esp-2) 0 0; padding: 0; border: 1px solid var(--borda); border-radius: var(--raio-controle); overflow: hidden; }
.rq-achados li + li { border-top: 1px solid var(--borda); }
button.rq-achado { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; justify-items: start; min-height: 0; padding: 10px 14px; border: 0; border-radius: 0;
  background: var(--branco); color: var(--tinta); font-weight: 400; text-align: left; line-height: 1.35; }
button.rq-achado:hover { background: var(--fundo-suave); }
button.rq-achado b { font-weight: 600; }
button.rq-achado span { grid-column: 1; font-size: var(--t-nota); color: var(--apoio); font-variant-numeric: tabular-nums; }
button.rq-achado i { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ok-fundo); color: var(--ok); white-space: nowrap; }
button.rq-achado i.deve { background: var(--erro-fundo); color: var(--erro); }
.rq-pessoa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); padding: 12px 14px; border-radius: var(--raio-controle); background: var(--fundo-suave); border: 1px solid var(--borda); margin-bottom: var(--esp-3); }
.rq-pessoa-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-pessoa-id b { font-size: var(--t-bloco); font-weight: 600; }
.rq-pessoa-id span { font-size: var(--t-nota); color: var(--apoio); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rq-contato { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rq-nova { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--esp-3); }
.rq-nova .campo { grid-column: span 2; margin: 0; }
.rq-nova .rq-f-nome, .rq-nova .rq-f-logradouro { grid-column: span 4; }
.rq-nova .rq-f-numero { grid-column: span 2; }
.rq-limpo { margin: var(--esp-2) 0 0; font-size: var(--t-rotulo); color: var(--ok); }
.rq-debito { margin-top: var(--esp-3); padding: 12px 14px; border-radius: var(--raio-controle); background: var(--alerta-fundo); border: 1px solid #EBCB8B; color: #5E3C00; font-size: var(--t-rotulo); }
.rq-debito.trava { background: var(--erro-fundo); border-color: #F0B8B2; color: #7A1A12; }
.rq-debito p { margin: 0 0 6px; }
.rq-debito ul { list-style: none; margin: 0; padding: 0; }
.rq-debito li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 4px 0; border-top: 1px dashed rgba(0, 0, 0, .12); font-variant-numeric: tabular-nums; }
.rq-debito li small { opacity: .8; }
.rq-debito li.rq-mais { display: block; opacity: .8; }

/* imóvel e local do serviço */
.rq-ligs { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-3); }
button.rq-lig-chip { flex-direction: column; align-items: flex-start; gap: 1px; min-height: 52px; padding: 8px 14px; background: var(--branco); color: var(--tinta); border: 1px solid var(--borda-forte); font-weight: 400; line-height: 1.3; text-align: left; }
button.rq-lig-chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
button.rq-lig-chip span { font-size: var(--t-nota); color: var(--apoio); }
button.rq-lig-chip i { font-style: normal; font-size: 11px; color: var(--erro); }
button.rq-lig-chip[aria-checked="true"] { border-color: var(--azul); background: var(--azul-claro-fundo); box-shadow: inset 0 0 0 1px var(--azul); }
button.rq-lig-chip.nova { border-style: dashed; }
.rq-outra { margin-bottom: var(--esp-2); }
.rq-outra summary { cursor: pointer; font-size: var(--t-rotulo); color: var(--azul); font-weight: 500; padding: 4px 0; }
.rq-outra[open] summary { margin-bottom: var(--esp-2); }
.rq-local { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); gap: var(--esp-3); }
.rq-local .campo { margin: 0; }
.rq-local .rq-s-referencia { grid-column: span 2; }

/* alteração cadastral: campo, hoje, passa a ser */
.rq-alts { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio-controle); overflow: hidden; }
.rq-alt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); gap: var(--esp-3); align-items: center; padding: 6px 12px; border-top: 1px solid var(--borda); }
.rq-alt:first-child { border-top: 0; }
.rq-alt label { margin: 0; font-weight: 500; font-size: var(--t-rotulo); }
.rq-alt-hoje { font-size: var(--t-rotulo); color: var(--apoio); overflow-wrap: anywhere; }
.rq-alt.muda { background: var(--azul-claro-fundo); }
.rq-alt.muda .rq-alt-hoje { text-decoration: line-through; }
.rq-alt-cab { background: var(--fundo-suave); font-size: var(--t-nota); color: var(--apoio); font-weight: 600; }

/* cobrança */
.rq-forma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); margin-bottom: var(--esp-3); }
button.rq-forma-op { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 14px; text-align: left; background: var(--branco); color: var(--tinta); border: 1px solid var(--borda-forte); font-weight: 400; line-height: 1.3; }
button.rq-forma-op b { font-weight: 600; }
button.rq-forma-op span { font-size: var(--t-nota); color: var(--apoio); }
button.rq-forma-op[aria-checked="true"] { border-color: var(--azul); background: var(--azul-claro-fundo); box-shadow: inset 0 0 0 1px var(--azul); }
button.rq-forma-op:disabled { opacity: .55; cursor: not-allowed; }
.rq-parcelas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--esp-3); }
.rq-parcelas button { flex-direction: column; gap: 0; min-width: 84px; min-height: 52px; padding: 6px 10px; background: var(--branco); color: var(--tinta); border: 1px solid var(--borda-forte); font-weight: 400; line-height: 1.25; }
.rq-parcelas button b { font-weight: 700; font-size: var(--t-bloco); }
.rq-parcelas button span { font-size: var(--t-nota); color: var(--apoio); font-variant-numeric: tabular-nums; }
.rq-parcelas button[aria-checked="true"] { background: var(--marinho); border-color: var(--marinho); color: var(--branco); }
.rq-parcelas button[aria-checked="true"] span { color: #C9D4E3; }
.rq-entrada { display: flex; flex-wrap: wrap; align-items: end; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.rq-entrada-rot { flex-basis: 100%; font-size: var(--t-rotulo); font-weight: 600; }
.rq-entrada .rq-modo { margin: 0; }
.rq-entrada .campo { margin: 0; width: 160px; }
.rq-textos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.rq-textos .campo { margin: 0; }

/* recibo: plano, débito e liberação */
.rq-plano { margin: 10px 12px 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-controle); font-size: var(--t-rotulo); }
.rq-plano p { margin: 0 0 6px; }
.rq-plano ol { list-style: none; margin: 0; padding: 0; }
.rq-plano li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.rq-plano small { color: var(--apoio); font-size: var(--t-nota); }
.rq-aviso-deb { margin: 10px 20px 0; padding: 8px 10px; border-radius: 8px; background: var(--alerta-fundo); color: var(--alerta); font-size: var(--t-rotulo); }
.rq-ficha .rq-aviso-deb { margin: var(--esp-3) 0 0; }
.rq-liberar { margin: 12px 12px 0; padding: 12px; border-radius: var(--raio-controle); background: var(--erro-fundo); border: 1px solid #F0B8B2; font-size: var(--t-rotulo); color: #7A1A12; }
.rq-liberar p { margin: 0 0 8px; }
.rq-liberar .campo { margin: 0 0 8px; }
.rq-liberar label { color: #7A1A12; }
.rq-lib-sup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---------- ficha ---------- */
.rq-ficha { display: flex; flex-direction: column; gap: var(--esp-4); }
.rq-ficha-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap; }
.rq-ficha-topo h2 { font-size: var(--t-titulo); font-weight: 700; margin: var(--esp-3) 0 2px; display: flex; align-items: baseline; gap: var(--esp-3); flex-wrap: wrap; }
.rq-ficha-topo h2 span { font-size: var(--t-bloco); font-weight: 500; color: var(--apoio); font-variant-numeric: tabular-nums; }
.rq-ficha-topo p { margin: 0; color: var(--apoio); font-size: var(--t-rotulo); display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.rq-ficha-topo p .rq-prazo { display: inline-flex; flex-direction: row; gap: 6px; }

/* o trilho */
.rq-trilho-bloco { padding: var(--esp-6) var(--esp-6) var(--esp-5); }
.rq-trilho { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.rq-est { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 0 6px; min-width: 0; }
.rq-est::before { content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 4px; background: var(--papel); z-index: 0; }
.rq-est:first-child::before { display: none; }
.rq-est.feito::before, .rq-est.atual::before { background: var(--marinho); }
.rq-ponto { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--branco); border: 3px solid var(--borda-forte); margin-bottom: 6px; flex: none; }
.rq-est.feito .rq-ponto { background: var(--marinho); border-color: var(--marinho); }
.rq-est.feito .rq-ponto::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--branco); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rq-est.atual .rq-ponto { border-color: var(--azul); background: var(--azul); box-shadow: 0 0 0 6px var(--azul-claro-fundo); animation: rq-pulso 2.4s var(--ease) infinite; }
.rq-est.pulou .rq-ponto { background: var(--marinho); border-color: var(--marinho); opacity: .45; }
.rq-est b { font-size: var(--t-corpo); font-weight: 600; }
.rq-est.falta b { color: var(--apoio); font-weight: 500; }
.rq-est.atual b { color: var(--azul-escuro); }
.rq-est small { font-size: var(--t-nota); color: var(--apoio); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rq-trilho .rq-est:last-child.feito .rq-ponto { background: var(--ok); border-color: var(--ok); }
.rq-desvio { margin-top: 10px; padding: 8px 10px 8px 30px; position: relative; border-radius: 8px; background: var(--erro-fundo); color: var(--erro); text-align: left; display: flex; flex-direction: column; }
.rq-est .rq-desvio .rq-ponto { position: absolute; left: 8px; top: 10px; width: 14px; height: 14px; margin: 0; border: 0; background: var(--erro); box-shadow: none; opacity: 1; }
.rq-est .rq-desvio .rq-ponto::after { display: none; }
.rq-desvio b { color: var(--erro); }
.rq-desvio small { color: #7A1A12; }
.rq-trilho.desviou .rq-est.falta { opacity: .45; }
@keyframes rq-pulso { 0%, 100% { box-shadow: 0 0 0 6px var(--azul-claro-fundo); } 50% { box-shadow: 0 0 0 10px rgba(230, 240, 251, .4); } }
.rq-proximos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid var(--borda); }
.rq-proximos button.ativo { box-shadow: 0 0 0 3px var(--azul-claro-fundo); }
button.perigo-leve { color: var(--erro); border-color: #F0B8B2; }
button.perigo-leve:hover { background: var(--erro-fundo); }
.rq-passo-form { max-width: 560px; margin: var(--esp-4) auto 0; padding: var(--esp-4); border: 1px solid var(--borda); border-radius: var(--raio-controle); background: var(--fundo-suave); }
.rq-passo-form h4 { margin: 0 0 var(--esp-3); }
.rq-passo-acoes { display: flex; justify-content: flex-end; gap: var(--esp-2); margin-top: var(--esp-3); }

.rq-ficha-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.rq-ficha-col { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.rq-ficha-col .bloco { padding: var(--esp-5); }
.rq-ficha-col h3 { font-size: var(--t-bloco); font-weight: 600; margin: 0 0 var(--esp-3); display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.rq-hist { list-style: none; margin: 0; padding: 0; }
.rq-hist li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--esp-3); padding: 0 0 var(--esp-4); }
.rq-hist li::before { content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: var(--borda); }
.rq-hist li:last-child::before { display: none; }
.rq-hist .rq-ponto { width: 16px; height: 16px; border-width: 3px; margin: 2px 0 0; border-color: var(--marinho); }
.rq-hist li:first-child .rq-ponto { background: var(--azul); border-color: var(--azul); }
.rq-hist li.s-indeferido .rq-ponto, .rq-hist li.s-cancelado .rq-ponto { background: var(--erro); border-color: var(--erro); }
.rq-hist li.s-concluido .rq-ponto { background: var(--ok); border-color: var(--ok); }
.rq-hist b { font-weight: 600; }
.rq-hist small { display: block; color: var(--apoio); font-size: var(--t-nota); font-variant-numeric: tabular-nums; }
.rq-hist p { margin: 4px 0 0; font-size: var(--t-rotulo); padding: 6px 10px; background: var(--fundo-suave); border-radius: 8px; overflow-wrap: anywhere; }
.rq-os { list-style: none; margin: 0; padding: 0; }
.rq-os li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center; padding: 8px 0; border-top: 1px solid var(--borda); }
.rq-os li:first-child { border-top: 0; }
.rq-os li > span:not(.selo) { font-size: var(--t-rotulo); color: var(--apoio); }
.rq-os .selo { justify-self: end; }
.rq-ficha .rq-itens-lidos { margin-bottom: 0; }
.rq-ficha .rq-fecho-total { border-top: 0; }
.rq-dl { margin: 0; display: grid; gap: 6px; }
.rq-dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--esp-3); font-size: var(--t-rotulo); }
.rq-dl dt { color: var(--apoio); }
.rq-dl dd { margin: 0; overflow-wrap: anywhere; }
.rq-cobs { list-style: none; margin: var(--esp-3) 0 0; padding: 0; }
.rq-cob { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--esp-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); }
.rq-cob > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-cob b { font-weight: 500; font-size: var(--t-rotulo); }
.rq-cob small { color: var(--apoio); font-size: var(--t-nota); }
.rq-cob-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
code.rq-linha { display: block; margin-top: 4px; font-size: 11px; overflow-wrap: anywhere; white-space: normal; }
.rq-antes-depois { width: 100%; border-collapse: collapse; font-size: var(--t-rotulo); }
.rq-antes-depois th, .rq-antes-depois td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; }
.rq-antes-depois th { color: var(--apoio); font-weight: 600; font-size: var(--t-nota); }
.rq-antes-depois td:nth-child(2) { color: var(--apoio); text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) { .rq-casa { transition: none; } }

@media (max-width: 1100px) {
  .rq-balcao { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--esp-4); }
  .tr-grade { grid-template-columns: 250px minmax(0, 1fr); gap: var(--esp-4); }
  .tr-termo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .rq-balcao, .tr-grade { grid-template-columns: minmax(0, 1fr); }
  .rq-recibo { position: static; }
  .tr-lista ul, button.tr-novo { display: none; }
  .tr-seletor { display: block; }
}
@media (max-width: 640px) {
  .rq-passo, .tr-editor { padding: var(--esp-4); }
  .rq-tipos { grid-template-columns: minmax(0, 1fr); }
  button.rq-tipo { min-height: 64px; }
  .rq-modo { display: flex; }
  .rq-modo button { flex: 1; min-height: 44px; padding: 0 8px; line-height: 1.2; }
  .rq-intervalo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rq-intervalo .campo:first-child, .rq-intervalo .campo:last-child { grid-column: 1 / -1; }
  .rq-casa { width: 40px; }
  .rq-itens li { grid-template-columns: 10px minmax(0, 1fr) auto 44px; grid-template-areas: 'm d d x' '. q t t'; row-gap: 8px; }
  .rq-itens li .rq-nat { grid-area: m; }
  .rq-itens li .rq-item-desc { grid-area: d; }
  .rq-itens li .rq-qtd { grid-area: q; max-width: 120px; }
  .rq-itens li .rq-item-total { grid-area: t; white-space: nowrap; }
  .rq-itens li .rq-tirar { grid-area: x; width: 44px; min-height: 44px; }
  .rq-itens-lidos li { grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: none; }
  .rq-itens-lidos li > * { grid-area: auto !important; }
  .rq-acrescentar { flex-direction: column; }
  .rq-acrescentar button { min-height: 44px; }
  .rq-recibo-acoes button { min-height: 44px; }
  .tr-cabeca { grid-template-columns: minmax(0, 1fr); }
  .tr-editor .abas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .tr-editor .aba { flex-direction: column; gap: 2px; padding: 8px 2px; min-width: 0; font-size: var(--t-rotulo); }
  .tr-situacao { padding: 0; }
  .tr-regras .tr-prazo { grid-template-columns: minmax(0, 1fr) auto; }
  .tr-regras .tr-prazo .campo:last-child { grid-column: 1 / -1; }
  .tr-tipo-os { margin-left: 0; }
  .tr-rodape-itens { flex-direction: column; align-items: stretch; }
  .tr-rodape-itens .rq-acrescentar { min-width: 0; width: 100%; }
  .tr-valor { text-align: right; }
  .tr-folha { padding: 20px 16px; }
  .tr-acoes button { flex: 1 1 100%; min-height: 44px; }
}

/* e21: celular — uma coluna, o trilho fica em pé */
@media (prefers-reduced-motion: reduce) { .rq-est.atual .rq-ponto { animation: none; } }
@media (max-width: 1100px) {
  .rq-local { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .rq-local .rq-s-referencia { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .rq-ficha-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rq-contato, .rq-textos, .rq-forma, .rq-lib-sup { grid-template-columns: minmax(0, 1fr); }
  .rq-nova { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rq-nova .campo, .rq-nova .rq-f-nome, .rq-nova .rq-f-logradouro { grid-column: 1 / -1; }
  .rq-nova .rq-f-numero, .rq-nova .rq-f-bairro, .rq-nova .rq-f-telefone, .rq-nova .rq-f-celular { grid-column: span 1; }
  .rq-busca-req input, .rq-local input, .rq-nova input { min-height: 44px; }
  .rq-local { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rq-local .rq-s-logradouro, .rq-local .rq-s-referencia { grid-column: 1 / -1; }
  button.rq-lig-chip { flex: 1 1 calc(50% - 8px); }
  .rq-alt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'c h' 'n n'; row-gap: 4px; padding: 8px 12px; }
  .rq-alt > label { grid-area: c; }
  .rq-alt > .rq-alt-hoje { grid-area: h; text-align: right; }
  .rq-alt > input, .rq-alt > select { grid-area: n; min-height: 44px; }
  .rq-alt-cab { display: none; }
  .rq-parcelas button { flex: 1 1 calc(33% - 6px); min-width: 0; }
  .rq-entrada .campo { width: 100%; }
  .rq-entrada .rq-modo { width: 100%; }
  .rq-debito li { grid-template-columns: minmax(0, 1fr) auto; }
  .rq-debito li small { grid-column: 1; grid-row: 2; }
  .rq-debito li b { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .rq-trilho-bloco { padding: var(--esp-4); }
  .rq-trilho { grid-template-columns: minmax(0, 1fr); }
  .rq-est { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--esp-3); align-items: start; text-align: left; padding: 0 0 var(--esp-4); }
  /* em pé, o traço sai de cada estação e desce até a seguinte: escuro só se a estação já passou */
  .rq-est::before, .rq-est:first-child::before { display: block; top: 12px; left: 10px; width: 4px; height: 100%; }
  .rq-est.atual::before, .rq-est.falta::before { background: var(--papel); }
  .rq-est:last-child::before { display: none; }
  .rq-est:last-child { padding-bottom: 0; }
  .rq-est .rq-ponto { grid-row: 1 / 4; margin: 0; }
  .rq-est b, .rq-est small, .rq-desvio { grid-column: 2; }
  .rq-est small:empty, .rq-est small:only-of-type:empty { display: none; }
  .rq-desvio { margin-top: 6px; }
  .rq-proximos { justify-content: stretch; }
  .rq-proximos button { flex: 1 1 100%; min-height: 44px; }
  .rq-passo-acoes button { flex: 1; min-height: 44px; }
  .rq-ficha-col .bloco { padding: var(--esp-4); }
  .rq-ficha-acoes, .rq-ficha-acoes button { width: 100%; }
  .rq-cob { grid-template-columns: minmax(0, 1fr) auto; }
  .rq-cob > div { grid-column: 1 / -1; }
  .rq-cob button { grid-column: 1 / -1; min-height: 44px; }
  .rq-dl div { grid-template-columns: 96px minmax(0, 1fr); }
  .rq-os li { grid-template-columns: minmax(0, 1fr) auto; }
  .rq-os li > b { grid-column: 1; grid-row: 1; }
  .rq-os li > .selo { grid-column: 2; grid-row: 1; }
  .rq-os li > span:not(.selo) { grid-column: 1 / -1; grid-row: 2; }
}