/* ================= e29: a área técnica da ficha do atendimento =================
   Plano: auditoria/evidencias-construcao/e29/PLANO-VISUAL.md. Só os tokens da e03.
   Ordem: base → componentes → @media (celular por último). */

.atf-carregando { padding: var(--esp-5); }
.mp-sub { margin: var(--esp-4) 0 var(--esp-2); font-size: var(--t-rotulo); font-weight: 600; color: var(--apoio); }

/* ---------- Consumo: o gráfico ---------- */
.cg-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--esp-5); padding: var(--esp-2) 20px var(--esp-4); align-items: center; }
.cg-area { position: relative; min-width: 0; }
.cg { display: block; overflow: visible; }
.cg-grade line { stroke: var(--borda); stroke-width: 1; }
.cg-grade text, .cg-mes { font: 11px var(--fonte); fill: var(--apoio); }
.cg-base { stroke: var(--borda-forte); stroke-width: 1; }
.cg-barra { fill: var(--azul); }
.cg-barra.cg-ultima { fill: var(--agua); }
.cg-vazio { fill: none; stroke: var(--borda-forte); stroke-width: 1.5; stroke-dasharray: 3 3; }
.cg-valor { font: 600 12px var(--fonte); fill: var(--tinta); }
.cg-media { stroke: var(--marinho); stroke-width: 2; }
.cg-media-txt { font: 11px var(--fonte); fill: var(--apoio); }
.cg-media-txt.cg-forte { font-weight: 700; fill: var(--tinta); font-size: 12px; }
.cg-toque { fill: transparent; cursor: pointer; }
.cg-toque:hover { fill: rgba(26, 95, 180, .06); }
.cg-dica { position: absolute; top: 0; transform: translateX(-50%); background: var(--marinho); color: var(--branco); font-size: var(--t-nota); line-height: 1.4;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; box-shadow: var(--sombra); z-index: 2; }
.cg-numeros { margin: 0; display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--borda); padding-left: var(--esp-5); }
.cg-numeros > div { padding: 8px 0; border-bottom: 1px solid var(--borda); }
.cg-numeros > div:last-child { border-bottom: 0; }
.cg-numeros dt { font-size: var(--t-nota); color: var(--apoio); }
.cg-numeros dd { margin: 2px 0 0; font-size: var(--t-bloco); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cg-numeros .cg-destaque dd { font-size: var(--t-numero); font-weight: 700; line-height: 1.1; }
.cg-tabela { border-top: 1px solid var(--borda); }
.cg-tabela summary { padding: var(--esp-3) 20px; cursor: pointer; font-size: var(--t-rotulo); color: var(--azul); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.cg-tabela > .bloco { margin: 0; border: 0; box-shadow: none; border-radius: 0; }

/* ---------- Leituras: faixa da legenda ---------- */
.lf-legenda { list-style: none; margin: 0; padding: var(--esp-2) 20px var(--esp-3); display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); font-size: var(--t-rotulo); color: var(--apoio); }
.lf-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.lf-legenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.lf-legenda .lf-mes i { background: var(--agua); }
.lf-legenda .lf-atual i { background: var(--azul); }
.lf-legenda .lf-anterior i { background: #B8872B; }
.lf-legenda .lf-foto i { width: auto; height: auto; color: var(--tinta); }
.lf-legenda .lf-foto i svg { width: 16px; height: 16px; }
.lf-tabela tr.lf-mes td:first-child { box-shadow: inset 4px 0 0 var(--agua); }
.lf-tabela tr.lf-atual td:first-child { box-shadow: inset 4px 0 0 var(--azul); }
.lf-tabela tr.lf-anterior td:first-child { box-shadow: inset 4px 0 0 #B8872B; }
.lf-tabela tr.lf-anterior td { background: #FBF6EC; }
.lf-tabela td { white-space: nowrap; }
.lf-tabela td.lf-oc { white-space: normal; min-width: 120px; }
.lf-sub { display: block; color: var(--apoio); font-size: var(--t-nota); font-weight: 400; }

/* ---------- Fotos ---------- */
.ff-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--esp-4); }
.ff-foto { margin: 0; border: 1px solid var(--borda); border-radius: var(--raio-controle); overflow: hidden; background: var(--branco); height: 100%; display: flex; flex-direction: column; }
button.ff-abrir { display: block; width: 100%; height: auto; padding: 0; margin: 0; border: 0; border-radius: 0; background: var(--marinho); cursor: zoom-in; }
.ff-abrir img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ff-foto figcaption { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-rotulo); }
.ff-foto figcaption b { font-weight: 600; overflow-wrap: anywhere; }
.ff-foto figcaption small { color: var(--apoio); font-size: var(--t-nota); }
.ff-tipo { display: flex; align-items: center; gap: 6px; color: var(--apoio); font-size: var(--t-nota); }
.ff-marca { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 2px; font-weight: 400; font-size: var(--t-nota); color: var(--apoio); min-height: 32px; align-self: flex-end; }
.ff-marca input { width: 18px; height: 18px; margin: 0; }
.ff-grande { display: block; width: 100%; max-width: 720px; height: auto; border-radius: var(--raio-controle); margin: 0 auto; }

/* ---------- Mapa: a coisa memorável ---------- */
.mp-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--esp-4); align-items: start; }
.mp-grade > .bloco { margin: 0; }
.mp-quadro { padding: 0 20px; }
.mp-quadro svg { display: block; width: 100%; height: auto; border-radius: var(--raio-controle); border: 1px solid var(--borda); }
.mp-viz { cursor: default; }
.mp-legenda { list-style: none; margin: 0; padding: var(--esp-3) 20px var(--esp-4); display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); font-size: var(--t-rotulo); color: var(--apoio); }
.mp-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.mp-legenda i { display: inline-block; }
.mp-l-alvo { width: 14px; height: 14px; border-radius: 50%; background: var(--marinho); box-shadow: 0 0 0 3px rgba(11, 27, 51, .15); }
.mp-l-viz { width: 10px; height: 10px; border-radius: 50%; background: var(--azul); }
.mp-l-rua { width: 22px; height: 8px; background: var(--branco); border: 1px solid #CBD3DD; border-radius: 2px; }
.mp-lado .lista-dados dd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mp-perto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mp-perto button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--esp-3); align-items: baseline; width: 100%; height: auto; min-height: 44px; margin: 0;
  padding: 8px 12px; text-align: left; background: var(--fundo-suave); color: var(--tinta); border: 1px solid var(--borda); border-radius: var(--raio-controle); font-weight: 400; }
.mp-perto button:hover:not(:disabled) { border-color: var(--azul); background: var(--azul-claro-fundo); }
.mp-perto button:disabled { background: var(--azul-claro-fundo); border-color: var(--azul); opacity: 1; cursor: default; }
.mp-perto b { color: var(--azul-escuro); font-variant-numeric: tabular-nums; }
.mp-perto span { font-size: var(--t-rotulo); overflow-wrap: anywhere; }
.mp-perto em { font-style: normal; font-size: var(--t-nota); color: var(--apoio); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Cadastro, rede e ramal, notas ---------- */
.cd-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); align-items: start; margin-bottom: var(--esp-4); }
.cd-grade > .bloco { margin: 0; }
.cd-grade .lista-dados dd { overflow-wrap: anywhere; }
.cd-hist { list-style: none; margin: 0; padding: 0; font-size: var(--t-rotulo); }
.cd-hist li { padding: 6px 0; border-bottom: 1px solid var(--borda); }
.cd-hist li:last-child { border-bottom: 0; }
.cd-ramais { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--esp-4); }
.cd-ramal { border: 1px solid var(--borda); border-radius: var(--raio-controle); overflow: hidden; }
.cd-ramal header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.cd-ramal.cd-agua header { box-shadow: inset 4px 0 0 var(--agua); }
.cd-ramal.cd-esgoto header { box-shadow: inset 4px 0 0 #7A6A55; }
.cd-ramal header span { font-size: var(--t-nota); color: var(--apoio); }
.cd-ramal .lista-dados { padding: 10px 14px; margin: 0; }
.cd-rede { background: var(--fundo-suave); border-top: 1px dashed var(--borda-forte); }
.nt-nova { margin-bottom: var(--esp-4); }
.nt-nova label { margin-top: 0; }
.nt-linha { display: flex; gap: var(--esp-3); align-items: flex-end; }
.nt-linha textarea { flex: 1 1 auto; min-width: 0; }
.nt-linha button { margin: 0; flex: 0 0 auto; }
.nt-lista { list-style: none; margin: 0; padding: 0; }
.nt-lista > li { padding: var(--esp-3) 0 var(--esp-3) var(--esp-4); border-left: 3px solid var(--agua); margin-bottom: var(--esp-3); }
.nt-texto { margin: 0; font-size: var(--t-corpo); overflow-wrap: anywhere; }
.nt-quem { margin: 4px 0 0; font-size: var(--t-nota); color: var(--apoio); display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.nt-quem button { margin: 0; }
.nt-versoes { margin-top: 6px; font-size: var(--t-nota); }
.nt-versoes summary { cursor: pointer; color: var(--azul); }
.nt-versoes ul { list-style: none; margin: 6px 0 0; padding: 0; }
.nt-versoes li { display: flex; flex-direction: column; padding: 4px 0; color: var(--apoio); }
.nt-versoes s { color: var(--tinta); text-decoration-color: var(--borda-forte); }

/* ---------- Recadastramento ---------- */
.rc-cabeca { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-8); padding: var(--esp-2) 20px var(--esp-4); align-items: flex-start; }
.rc-cabeca > div { display: flex; flex-direction: column; gap: 2px; }
.rc-cabeca span { font-size: var(--t-nota); color: var(--apoio); }
.rc-cabeca b { font-size: var(--t-bloco); font-weight: 600; }
.rc-cabeca p { flex: 1 1 100%; margin: 0; font-size: var(--t-rotulo); color: var(--apoio); }
.rc-tabela { margin: 0 0 0; }
.rc-linha-dif td { background: var(--alerta-fundo); }
.rc-ok, .rc-dif, .rc-nc { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-rotulo); font-weight: 600; }
.rc-ok { color: var(--ok); } .rc-dif { color: var(--alerta); } .rc-nc { color: var(--apoio); font-weight: 400; }
.rc-ok svg, .rc-dif svg, .rc-nc svg { width: 16px; height: 16px; }
.rc-vazio { color: var(--apoio); font-style: italic; }
.rc-baixo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-5); padding: 0 20px var(--esp-4); }
.rc-pend ul { list-style: none; margin: 0; padding: 0; }
.rc-pend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--esp-3); align-items: start; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.rc-pend li > span svg { width: 18px; height: 18px; }
.rc-pend li.aberta > span { color: var(--alerta); }
.rc-pend li.resolvida > span { color: var(--ok); }
.rc-pend li p { margin: 0; font-size: var(--t-rotulo); overflow-wrap: anywhere; }
.rc-pend li.resolvida p { color: var(--apoio); }
.rc-pend li small { display: block; font-size: var(--t-nota); color: var(--apoio); margin-top: 2px; }
.rc-pend li button { margin: 0; }
.rc-fotos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.rc-fotos li { display: flex; flex-direction: column; gap: 4px; }
.rc-fotos button.ff-abrir { border-radius: var(--raio-controle); overflow: hidden; }
.rc-fotos small { font-size: var(--t-nota); color: var(--apoio); }
.rc-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--esp-4); }
.rc-campos label small { font-weight: 400; color: var(--apoio); }

/* ---------- Requerimentos ---------- */
.rq-filtro { display: flex; flex-wrap: wrap; gap: var(--esp-2); padding: 0 20px var(--esp-3); }
.rq-filtro button { margin: 0; }

@media (max-width: 1100px) {
  .mp-grade, .cd-grade { grid-template-columns: minmax(0, 1fr); }
  .cg-corpo { grid-template-columns: minmax(0, 1fr); }
  .cg-numeros { border-left: 0; padding-left: 0; flex-direction: row; flex-wrap: wrap; gap: 0 var(--esp-5); border-top: 1px solid var(--borda); }
  .cg-numeros > div { border-bottom: 0; }
}

/* ---------- celular ---------- */
@media (max-width: 640px) {
  .cg-corpo { padding: var(--esp-2) var(--esp-3) var(--esp-3); gap: var(--esp-3); }
  .cg-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--esp-3); }
  .cg-numeros .cg-destaque { grid-column: 1 / -1; }
  .cg-tabela summary { padding: var(--esp-3); }
  .lf-legenda { padding: var(--esp-2) var(--esp-3) var(--esp-3); flex-direction: column; }
  .lf-tabela tr.lf-mes, .lf-tabela tr.lf-atual, .lf-tabela tr.lf-anterior { border-left-width: 4px; border-left-style: solid; }
  .lf-tabela tr.lf-mes { border-left-color: var(--agua); }
  .lf-tabela tr.lf-atual { border-left-color: var(--azul); }
  .lf-tabela tr.lf-anterior { border-left-color: #B8872B; }
  .lf-tabela tr td:first-child { box-shadow: none !important; }
  .lf-tabela td, .lf-tabela td.lf-oc { white-space: normal; min-width: 0; }
  .lf-tabela tr.lf-anterior td { background: transparent; }
  .lf-tabela tr.lf-anterior { background: #FBF6EC; }
  .ff-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-3); }
  .ff-foto figcaption { padding: 8px; }
  .mp-quadro { padding: 0 var(--esp-3); }
  .mp-legenda { padding: var(--esp-3); }
  .cd-ramais { grid-template-columns: minmax(0, 1fr); }
  .nt-linha { flex-direction: column; align-items: stretch; }
  .nt-linha button { width: 100%; }
  .rc-cabeca { padding: var(--esp-2) var(--esp-3) var(--esp-3); gap: var(--esp-3) var(--esp-5); }
  .rc-baixo { grid-template-columns: minmax(0, 1fr); padding: 0 var(--esp-3) var(--esp-3); gap: var(--esp-3); }
  .rc-campos { grid-template-columns: minmax(0, 1fr); }
  /* a conferência: uma linha por dado; cadastro × imóvel só onde difere */
  .rc-tabela .tab-cards tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--esp-3); row-gap: 2px; padding: 10px 14px; margin-bottom: 6px; }
  .rc-tabela .tab-cards td { display: block; padding: 0; border: 0; text-align: left; }
  .rc-tabela .tab-cards td::before { content: none; }
  .rc-tabela .tab-cards td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .rc-tabela .tab-cards td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  .rc-tabela .tab-cards td:nth-child(2), .rc-tabela .tab-cards td:nth-child(3) { grid-column: 1 / -1; font-size: var(--t-rotulo); color: var(--apoio); }
  .rc-tabela .tab-cards tr:not(.rc-linha-dif) td:nth-child(3) { display: none; }
  .rc-tabela .tab-cards tr.rc-linha-dif td:nth-child(2)::before { content: 'no cadastro: '; display: inline; font-size: inherit; font-weight: 400; }
  .rc-tabela .tab-cards tr.rc-linha-dif td:nth-child(3)::before { content: 'no imóvel: '; display: inline; font-size: inherit; font-weight: 400; }
  .rc-tabela .tab-cards tr.rc-linha-dif td { background: transparent; }
  .rc-tabela .tab-cards tr.rc-linha-dif { background: var(--alerta-fundo); border-color: #EBD3A3; }
  .rq-filtro { padding: 0 var(--esp-3) var(--esp-3); }
  .rq-filtro button { flex: 1 1 auto; }
}

/* ---------- impressos: mapa e fotos ---------- */
.doc-quadro > svg.mapa-ligacao { width: 100%; height: auto; display: block; border: 1px solid #C9D2DC; }
.doc-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; }
.doc-foto { margin: 0; break-inside: avoid; }
.doc-foto img { width: 100%; height: auto; display: block; border: 1px solid #C9D2DC; }
.doc-foto figcaption { font-size: 9pt; margin-top: 2mm; line-height: 1.35; }