/* Wave 9 · part B — MultiSystem+ · Campo (the visitador's app). Mobile first: 16 px inputs (no zoom), big buttons. */
:root {
    --cp-blue: #492683; --cp-blue-dark: #36195f; --cp-bg: #f4f6fa; --cp-card: #fff; --cp-text: #1f2937; --cp-muted: #6b7480;
    --cp-border: #e2e7ef; --cp-ok: #16a34a; --cp-bad: #dc2626; --cp-warn: #f59e0b; --cp-info: #2563eb; --cp-queued: #7c3aed;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--cp-bg); color: var(--cp-text); font-size: 16px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
h1 { font-size: 20px; margin: 0 0 4px; } h2 { font-size: 17px; margin: 0 0 8px; }
a { color: var(--cp-blue); }

.cp-center { max-width: 460px; margin: 0 auto; padding: 24px 16px; }
.cp-center-row { text-align: center; margin-top: 8px; }
.cp-brand { text-align: center; font-size: 18px; margin: 12px 0 18px; color: var(--cp-blue-dark); }
/* CCS logo above the brand, as on the office sign-in (25/09/2026). */
.cp-logo { display: block; margin: 18px auto 6px; width: 96px; height: auto; }
.cp-brand b { color: var(--cp-text); } .cp-brand b span { color: var(--cp-blue); }
.cp-card { background: var(--cp-card); border: 1px solid var(--cp-border); border-radius: 14px; padding: 14px; margin: 10px 0; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.cp-card-error { border-color: #fca5a5; background: #fef2f2; }
.cp-muted-card { background: transparent; box-shadow: none; }
.cp-muted-card summary { color: var(--cp-muted); cursor: pointer; }
.cp-muted { color: var(--cp-muted); } .cp-small { font-size: 13px; } .cp-mono { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
.cp-empty { text-align: center; font-size: 18px; color: var(--cp-muted); padding: 30px 14px; }

.cp-label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.cp-input { width: 100%; font-size: 16px; padding: 11px 12px; border: 1px solid #cbd3df; border-radius: 10px; background: #fff; color: var(--cp-text); }
textarea.cp-input { resize: vertical; }
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid #cbd3df; background: #fff; color: var(--cp-text); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.cp-btn-sm { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.cp-btn-primary { background: var(--cp-blue); border-color: var(--cp-blue); color: #fff; }
.cp-btn-ok { background: var(--cp-ok); border-color: var(--cp-ok); color: #fff; }
.cp-btn-ghost { background: transparent; border-color: transparent; color: var(--cp-muted); }
.cp-btn-block { display: flex; width: 100%; margin-top: 14px; }
.cp-btn-big { min-height: 56px; font-size: 17px; margin: 12px 0; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.cp-alert { border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 15px; }
.cp-alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.cp-alert-ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

.cp-head { position: sticky; top: 0; z-index: 1000; background: var(--cp-blue); color: #fff; padding: 10px 14px 8px; padding-top: calc(10px + env(safe-area-inset-top)); }
.cp-head .cp-btn-ghost { color: #e6ddf5; }
.cp-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-title { font-size: 18px; font-weight: 700; } .cp-sub { font-size: 13px; opacity: .85; } .cp-sub::first-letter { text-transform: uppercase; }
.cp-status { font-size: 13px; margin-top: 4px; }
.cp-net.on { color: #bbf7d0; } .cp-net.off { color: #fde68a; font-weight: 700; }
.cp-main { max-width: 720px; margin: 0 auto; padding: 8px 12px 40px; }

.cp-tabs { display: flex; gap: 6px; margin: 8px 0; }
.cp-tabs button { flex: 1; min-height: 42px; border-radius: 10px; border: 1px solid var(--cp-border); background: #fff; font-size: 15px; font-weight: 600; color: var(--cp-muted); }
.cp-tabs button.active { background: var(--cp-blue); color: #fff; border-color: var(--cp-blue); }
.cp-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }

.cp-visit { background: #fff; border: 1px solid var(--cp-border); border-radius: 14px; padding: 12px; margin: 8px 0; cursor: pointer; }
.cp-visit.cp-late { border-left: 5px solid var(--cp-bad); }
.cp-visit.cp-closed { opacity: .75; }
.cp-visit-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.cp-num { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--cp-blue); color: #fff; font-size: 14px; font-weight: 700; align-items: center; justify-content: center; }
.cp-line { font-size: 14px; margin-top: 3px; }
.cp-dist { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--cp-blue-dark); }
.cp-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; }
.cp-b-pending { background: var(--cp-warn); } .cp-b-onsite { background: var(--cp-info); } .cp-b-done { background: var(--cp-ok); }
.cp-b-notdone { background: var(--cp-bad); } .cp-b-queued { background: var(--cp-queued); }

.cp-dl { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 10px 0 0; font-size: 15px; }
.cp-dl dt { font-size: 12px; font-weight: 700; color: var(--cp-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 8px; }
.cp-dl dd { margin: 0; }
.cp-seg { display: flex; gap: 8px; }
.cp-seg label { flex: 1; display: flex; gap: 6px; align-items: center; border: 1px solid var(--cp-border); border-radius: 10px; padding: 10px; font-weight: 600; }
.cp-rej { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 8px; font-size: 14px; }

.cp-map { height: 60vh; min-height: 320px; border-radius: 14px; border: 1px solid var(--cp-border); margin: 8px 0; }
.cp-pin { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cp-pin.pending { background: var(--cp-warn); } .cp-pin.onsite { background: var(--cp-info); } .cp-pin.done { background: var(--cp-ok); }
.cp-pin.notdone { background: var(--cp-bad); } .cp-pin.queued { background: var(--cp-queued); }

.cp-sign { width: 100%; height: 180px; border: 1px dashed #94a3b8; border-radius: 10px; background: #fff; touch-action: none; display: block; }

.cp-toast { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 2000; background: #111827; color: #fff; padding: 12px 14px; border-radius: 12px; font-size: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: opacity .5s; }
.cp-toast-error { background: #991b1b; } .cp-toast-warn { background: #92400e; }
.cp-toast-out { opacity: 0; }

@media (min-width: 700px) { .cp-dl { grid-template-columns: 180px 1fr; } .cp-dl dt { margin-top: 0; } }