/* 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;
    /* The same colours as ink (text, links); in the dark mode they get lighter while the fills above stay. */
    --cp-blue-ink: #492683; --cp-blue-dark-ink: #36195f; --cp-ok-ink: #16a34a; --cp-bad-ink: #dc2626; --cp-warn-ink: #f59e0b; --cp-info-ink: #2563eb; --cp-queued-ink: #7c3aed;
}
/* CCS 02/10/2026 · «Modo oscuro» (the person's choice in the office system or the MIS): dark page and cards, light ink.
   The signature pad stays white (the signature is drawn in dark ink). */
@media not print {
html[data-theme="dark"] {
    color-scheme: dark;
    --cp-blue: #5A33A0; --cp-bg: #0F141A; --cp-card: #161D26; --cp-text: #E8EDF3; --cp-muted: #A7B4C2; --cp-border: #2A3542;
    --cp-blue-ink: #C4ADF5; --cp-blue-dark-ink: #D5C6F7; --cp-ok-ink: #6FD69B; --cp-bad-ink: #FF958A; --cp-warn-ink: #F2C46B; --cp-info-ink: #8CC4FF; --cp-queued-ink: #C4A6FF;
}
html[data-theme="dark"] ::placeholder { color: #8B97A5; opacity: 1; }
html[data-theme="dark"] .cp-logo { background: #F4F6F9; border-radius: 14px; padding: 8px; }
}
* { 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-ink); }

.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-ink); }
/* 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-ink); }
.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: var(--bd-fca5a5); background: var(--bg-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 var(--bd-cbd3df); border-radius: 10px; background: var(--bg-ffffff); 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 var(--bd-cbd3df); background: var(--bg-ffffff); 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: var(--bg-fef2f2); color: var(--fg-991b1b); border: 1px solid var(--bd-fecaca); }
.cp-alert-ok { background: var(--bg-f0fdf4); color: var(--fg-166534); border: 1px solid var(--bd-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: var(--bg-ffffff); 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: var(--bg-ffffff); 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-ink); }
.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-b-urgent { background: var(--cp-bad); }
/* CCS 16/10/2026: the groups of the list («Próximos días», «Pendientes de días anteriores») and the client's data. */
.cp-group { font-size: 15px; margin: 16px 2px 4px; color: var(--cp-blue-dark-ink); }
.cp-sub-h { font-size: 15px; margin: 14px 0 6px; }
/* CCS, 29/10/2026: «Atrasadas» tab with something in it; the promise cards of a promise code. */
.cp-tabs button.cp-tab-late:not(.active) { color: var(--cp-bad-ink); border-color: var(--cp-bad); }
.cp-pcard { border: 1px solid var(--cp-border); border-radius: 10px; padding: 10px; margin: 8px 0; }
.cp-pcard.on { border-color: var(--cp-blue); box-shadow: inset 0 0 0 1px var(--cp-blue); }
.cp-check { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.cp-check input { width: 20px; height: 20px; }
.cp-prod { border-top: 1px solid var(--cp-border); padding: 8px 0; font-size: 15px; overflow-wrap: anywhere; }
.cp-client .cp-dl dd { overflow-wrap: anywhere; }

.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 var(--bd-ffffff); 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 var(--bd-94a3b8); border-radius: 10px; background: #fff /* theme: keep */; 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; } }

/* ==== «Modo oscuro» · theme tokens — GENERATED by tools/dark-theme/convert.mjs, do not edit by hand ==== */
:root {
  --bd-94a3b8: #94a3b8;
  --bd-bbf7d0: #bbf7d0;
  --bd-cbd3df: #cbd3df;
  --bd-fca5a5: #fca5a5;
  --bd-fecaca: #fecaca;
  --bd-ffffff: #fff;
  --bg-f0fdf4: #f0fdf4;
  --bg-fef2f2: #fef2f2;
  --bg-ffffff: #fff;
  --fg-166534: #166534;
  --fg-991b1b: #991b1b;
}
@media not print {
html[data-theme="dark"] {
  --bd-94a3b8: #3a4d68;
  --bd-bbf7d0: #15462b;
  --bd-cbd3df: #344154;
  --bd-fca5a5: #653435;
  --bd-fecaca: #5e2e30;
  --bd-ffffff: #2f363d;
  --bg-f0fdf4: #0d2216;
  --bg-fef2f2: #2d191a;
  --bg-ffffff: #141a21;
  --fg-166534: #8dd79f;
  --fg-991b1b: #ffa99f;
}
}
/* ==== end of the generated theme tokens ==== */