/* ================= Telas "Ficha da ligação" e "Cadastro técnico" (e06) =================
   Plano: auditoria/evidencias-construcao/e06/PLANO-VISUAL.md. Só os tokens da e03; a faixa marinho
   é a única superfície escura. Ordem: base → componentes da tela → @media (celular por último). */

/* ---------- busca ---------- */
.fi-busca { align-items: center; }
.fi-busca > input { flex: 0 1 340px; }
.fi-achados { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px var(--esp-2); }
.fi-achados:empty { display: none; }

/* ---------- faixa da ligação: identidade + vida da ligação ---------- */
.fi-faixa {
  background: var(--marinho); color: var(--branco); border-radius: var(--raio); padding: 22px 24px 18px;
  margin-bottom: var(--esp-4); box-shadow: var(--sombra);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-2) var(--esp-6); align-items: start;
}
.fi-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.fi-titulo h3 { font-size: var(--t-numero); font-weight: 600; letter-spacing: -.01em; margin: 0; font-variant-numeric: tabular-nums; }
.fi-faixa.pessoa .fi-titulo h3 { font-size: var(--t-titulo); }
.fi-quem { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--esp-3); font-size: var(--t-bloco); }
.fi-quem span { color: #A9B8CC; font-size: var(--t-rotulo); }
.fi-onde { margin: 4px 0 0; color: #C9D4E3; font-size: var(--t-corpo); overflow-wrap: anywhere; }
.fi-faixa .fi-link { color: var(--branco); text-decoration-color: rgba(73, 179, 238, .7); }
.fi-faixa .fi-link:hover { color: var(--agua); }

.fi-fatos { display: flex; gap: var(--esp-2); margin: 0; }
.fi-fatos div { padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .10); min-width: 104px; }
.fi-fatos dt { font-size: var(--t-nota); color: #93A5BF; }
.fi-fatos dd { margin: 2px 0 0; font-size: var(--t-bloco); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* a linha do tempo: cada marco é um ponto na linha, com data, nome e detalhe */
.fi-linha {
  grid-column: 1 / -1; list-style: none; margin: var(--esp-5) 0 0; padding: 0; display: flex;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; position: relative;
}
.fi-marco {
  --cor: var(--agua); flex: 0 0 150px; scroll-snap-align: start; position: relative; padding: 22px 12px 4px 0;
  display: flex; flex-direction: column; gap: 2px; animation: fi-acende .16s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms);
}
.fi-marco::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: rgba(201, 212, 227, .22); }
.fi-marco:last-child::before { right: auto; width: 24px; }
.fi-marco i { position: absolute; top: 1px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--cor); box-shadow: 0 0 0 3px var(--marinho); }
.fi-marco.ligacao { --cor: #7FD1AE; }
.fi-marco.corte { --cor: #F2C46D; }
.fi-marco.violacao { --cor: #F4A38F; }
.fi-marco.hidrometro { --cor: #49B3EE; }
.fi-marco time { font-size: var(--t-nota); color: #93A5BF; font-variant-numeric: tabular-nums; }
.fi-marco b { font-size: var(--t-rotulo); font-weight: 600; overflow-wrap: anywhere; }
.fi-marco span { font-size: var(--t-nota); color: #A9B8CC; line-height: 1.35; overflow-wrap: anywhere; }
.fi-marco-vazio { color: var(--apoio); font-size: var(--t-rotulo); list-style: none; }
.fi-faixa .fi-marco-vazio { color: #A9B8CC; }
@keyframes fi-acende { from { opacity: 0; transform: translateX(-6px); } }

/* ---------- abas e grade ---------- */
.fi-abas .abas { overflow-x: auto; scrollbar-width: none; }
.fi-abas .aba { white-space: nowrap; }
.fi-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--esp-4); align-items: start; }
.fi-grade.so { grid-template-columns: minmax(0, 1fr); }
.fi-grade .bloco { margin-bottom: 0; }
.fi-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-6); }
.fi-dados dt { white-space: nowrap; }
.fi-vazio { color: #8A97A8; font-weight: 400; }
.fi-link {
  background: none; border: 0; padding: 0; min-height: 0; font: inherit; font-weight: 600; color: var(--azul);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; text-align: left;
}
.fi-link:hover { background: none; color: var(--azul-escuro); }
.fi-form .bloco-corpo > button { width: 100%; margin-top: var(--esp-4); }
/* no formulário da ficha, cada campo respira do de cima (a base zera a margem do rótulo em .campo) */
.fi-form .campo > label, .fi-form .linha-form > .campo > label { margin-top: var(--esp-3); }
.fi-form .bloco-corpo > .campo:first-child > label, .fi-form .bloco-corpo > .linha-form:first-child .campo > label { margin-top: 0; }
.fi-form h4 { margin-top: var(--esp-5); }
.fi-msg:empty { display: none; }
.fi-marcar { display: flex; align-items: center; gap: var(--esp-2); font-weight: 500; color: var(--tinta); cursor: pointer; }

/* ---------- histórico de hidrômetros: lista vertical, o instalado em destaque ---------- */
.fi-hids { list-style: none; margin: 0; padding: 0; }
.fi-hid { position: relative; padding: 0 0 var(--esp-4) 22px; border-left: 2px solid var(--borda); margin-left: 5px; }
.fi-hid:last-child { border-left-color: transparent; padding-bottom: 0; }
.fi-hid::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--branco); border: 2px solid var(--borda-forte); }
.fi-hid.atual::before { background: var(--agua); border-color: var(--azul); }
.fi-hid-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--esp-2); }
.fi-hid-cab b { font-size: var(--t-bloco); }
.fi-hid-cab span { color: var(--apoio); font-size: var(--t-rotulo); }
.fi-hid p { margin: 4px 0 0; font-size: var(--t-corpo); }
.fi-motivo { color: var(--apoio); }

/* ---------- notas e anexos: linhas, não cartões ---------- */
.fi-notas, .fi-anexos { list-style: none; margin: 0; padding: 0; }
.fi-notas li { padding: var(--esp-3) 0; border-bottom: 1px solid var(--borda); }
.fi-notas li:first-child { padding-top: 0; }
.fi-notas li:last-child { border-bottom: 0; padding-bottom: 0; }
.fi-notas p { margin: 0 0 4px; line-height: 1.5; max-width: 72ch; }
.fi-notas span { font-size: var(--t-nota); color: var(--apoio); }
.fi-anexos li { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px solid var(--borda); }
.fi-anexos li:first-child { padding-top: 0; }
.fi-anexos li:last-child { border-bottom: 0; padding-bottom: 0; }
.fi-anexos .icone { color: var(--azul); }
.fi-anexos div { flex: 1; min-width: 0; }
.fi-anexos b { display: block; overflow-wrap: anywhere; }
.fi-anexos span { font-size: var(--t-nota); color: var(--apoio); }

/* ---------- cadastro técnico: volume do macromedidor por período ---------- */
.ct-volumes { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: var(--esp-3); overflow-x: auto; }
.ct-volumes li { flex: 1 0 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ct-barra { width: 36px; border-radius: 6px 6px 2px 2px; background: var(--azul); transform-origin: bottom; animation: rg-cresce .2s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ct-volumes b { font-size: var(--t-rotulo); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-volumes span { font-size: var(--t-nota); color: var(--apoio); }
td .dica { display: block; margin: 2px 0 0; }
td .celula .dica { white-space: normal; min-width: 110px; }

/* ================= CELULAR E TABLET (sempre por último) ================= */
@media (max-width: 1100px) {
  .fi-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .fi-faixa { grid-template-columns: minmax(0, 1fr); }
  .fi-fatos { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .fi-busca > input { flex: 1 1 100%; }
  .fi-form .bloco-corpo > .linha-form .campo + .campo > label { margin-top: var(--esp-3); }
  .fi-faixa { padding: 16px 16px 12px; }
  .fi-titulo h3 { font-size: 22px; }
  .fi-fatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fi-fatos div { min-width: 0; padding: 8px 10px; }
  .fi-fatos dd { font-size: var(--t-corpo); white-space: normal; overflow-wrap: anywhere; }
  .fi-marco { flex-basis: 132px; }
  .fi-duas { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fi-dados dt { white-space: normal; }
  .fi-anexos li { flex-wrap: wrap; }
  .fi-anexos li button { flex: 1 1 100%; }
  .ct-volumes li { flex-basis: 84px; }
}

/* Na grade de duas colunas a tabela divide espaço com o formulário: o texto longo quebra linha em vez de empurrar a última coluna para fora. */
@media (min-width: 641px) {
  .fi-grade .tab-cards td.texto { min-width: 140px; }
  .fi-grade .tab-cards td { white-space: normal; }
}