/* Telas de campo porta a porta (public/campo.js). Pensadas primeiro para o celular:
   o GN esta em pe na calcada, com uma mao so. */
.campo-mapa { width: 100%; height: auto; display: block; background: var(--surface, #f6f8fa); border-radius: 10px; border: 1px solid var(--line); }
.campo-mapa.vazio { padding: 28px; text-align: center; color: var(--ink-3, #667); }
.campo-mapa .cm-linha { fill: none; stroke: var(--brand, #c8102e); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; opacity: .75; }
.campo-mapa .cm-ok circle { fill: var(--ok); stroke: #fff; stroke-width: 3; }
.campo-mapa .cm-pend circle { fill: #8a94a3; stroke: #fff; stroke-width: 3; }
.campo-mapa g text { fill: #fff; font: 700 17px/1 system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.campo-mapa .cm-extra { fill: none; stroke: #8a94a3; stroke-width: 3; stroke-dasharray: 5 4; }
.campo-mapa .cm-txt-extra { fill: #8a94a3; font: 600 13px system-ui; text-anchor: middle; }
.campo-mapa .cm-escala line { stroke: var(--ink); stroke-width: 3; }
.campo-mapa .cm-escala text { fill: var(--ink); font: 600 16px system-ui; text-anchor: middle; }

.campo-progresso { height: 10px; background: var(--line); border-radius: 6px; overflow: hidden; }
.campo-progresso > div { height: 100%; background: var(--ok); transition: width .3s; }

.campo-parada { margin-bottom: 10px; }
.campo-parada.feita { opacity: .7; }
.campo-parada.proxima { border: 2px solid var(--ok); box-shadow: 0 6px 18px rgba(28,124,67,.15); }
.campo-parada .cp-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ok); margin-bottom: 6px; }
.campo-parada .cp-topo { display: flex; gap: 10px; align-items: flex-start; }
.campo-parada .cp-num { font-size: 20px; min-width: 28px; color: var(--ink-3, #667); }
.campo-parada .cp-info { flex: 1; min-width: 0; }
.campo-parada .cp-info .muted { font-size: 13px; }
.campo-parada .cp-selos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.campo-parada .cp-contato { font-size: 13px; margin-top: 6px; }
.campo-parada .cp-contato a { font-weight: 600; }
.campo-parada .cp-trecho { font-size: 12px; color: var(--ink-3, #667); white-space: nowrap; }
.campo-parada .quick-actions .btn { min-height: 40px; }

.aviso-bad, .aviso-warn, .aviso-ok { margin-bottom: 12px; }
.aviso-bad { border-left: 4px solid var(--bad); }
.aviso-warn { border-left: 4px solid var(--warn); }
.aviso-ok { border-left: 4px solid var(--ok); }

.mr-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mr-form .field { flex: 1 1 160px; margin: 0; }
.mr-form select, .mr-form input { width: 100%; }
.mr-duas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.mr-lista { margin: 0; padding: 0; list-style: none; max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.mr-lista li { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.mr-lista li:last-child { border-bottom: 0; }
.mr-lista .chk { align-items: flex-start; gap: 8px; }
.mr-mot { font-size: 12px; color: var(--ok); }
@media (max-width: 760px) {
  .mr-duas { grid-template-columns: 1fr; }
  .mr-lista { max-height: none; }
}