:root {
    color-scheme: light;
    --bg: #f2f7f5;
    --surface: rgba(255, 255, 255, .92);
    --surface-solid: #ffffff;
    --surface-muted: #e8f1ee;
    --text: #17322e;
    --muted: #60716e;
    --border: rgba(24, 70, 61, .13);
    --accent: #0e766e;
    --accent-strong: #095b55;
    --accent-soft: #d8f2ec;
    --danger: #b42318;
    --warning: #c56b14;
    --shadow: 0 18px 50px rgba(22, 53, 47, .16);
    --shadow-soft: 0 5px 18px rgba(22, 53, 47, .10);
    --radius-lg: 28px;
    --radius-md: 16px;
    --radius-sm: 11px;
    --ease: cubic-bezier(.22, .8, .24, 1);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --nav-height: calc(68px + var(--safe-bottom));
    --sheet-peek: 190px;
    --sheet-open: min(76vh, 700px);
}

html[data-theme="ocean"] { --accent: #1769aa; --accent-strong: #0f4e80; --accent-soft: #dceefd; --bg: #f2f7fc; --surface-muted: #e7f0f8; }
html[data-theme="violet"] { --accent: #6d45b8; --accent-strong: #54308f; --accent-soft: #eee6ff; --bg: #f7f4fc; --surface-muted: #eeeafa; }
html[data-theme="earth"] { --accent: #9b5e2f; --accent-strong: #74431f; --accent-soft: #f4e4d5; --bg: #fbf6f0; --surface-muted: #f2e9df; }
html[data-theme="contrast"] { --accent: #005fcc; --accent-strong: #003d86; --accent-soft: #dbeaff; --bg: #ffffff; --surface-muted: #edf3fb; --text: #0b1726; --muted: #3d5268; --border: #8da0b5; }
html[data-mode="dark"] { color-scheme: dark; --bg: #071312; --surface: rgba(16, 31, 29, .94); --surface-solid: #101f1d; --surface-muted: #17312d; --text: #eef8f5; --muted: #a9c0bb; --border: rgba(223, 250, 244, .14); --shadow: 0 18px 55px rgba(0, 0, 0, .34); --shadow-soft: 0 5px 20px rgba(0, 0, 0, .25); }
html[data-mode="dark"][data-theme="ocean"] { --bg: #08131e; --surface-solid: #102131; --surface-muted: #163249; }
html[data-mode="dark"][data-theme="violet"] { --bg: #120d1c; --surface-solid: #211731; --surface-muted: #302149; }
html[data-mode="dark"][data-theme="earth"] { --bg: #1b120c; --surface-solid: #2b1c12; --surface-muted: #412a1a; }


* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:root { --bg:#f3f5f5; --surface:rgba(255,255,255,.96); --surface-solid:#fff; --surface-muted:#f1f4f4; --text:#202d35; --muted:#66767c; --border:rgba(60,83,89,.12); --accent:#0b9d91; --accent-strong:#08766d; --accent-soft:#e5f7f3; --nav-height:72px; --shadow:0 12px 40px -12px rgba(28,47,54,.22); --sheet-open:min(52dvh,520px); --sheet-peek:88px; }
html,body { margin:0; height:100%; }
body { overflow:hidden; background:var(--bg); color:var(--text); font:14px/1.5 "Segoe UI",system-ui,-apple-system,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button,a { touch-action:manipulation; }
button { border:0; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:disabled { opacity:.5; cursor:wait; }
.ui-icon { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex-shrink:0; font-size:22px; line-height:1; }
[data-icon] { display:inline-flex; align-items:center; justify-content:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.muted { color:var(--muted); }
.eyebrow { display:none; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-size:22px; font-weight:650; letter-spacing:-.6px; margin-bottom:0; line-height:1.3; }
h3 { font-size:14px; margin-bottom:10px; font-weight:650; }
#app-shell { height:100dvh; isolation:isolate; }
.workspace,.map-panel,.map-container { position:absolute; inset:0; }
.map-container { background:var(--bg); }
.map-placeholder { height:calc(100dvh - var(--sheet-open) - 96px); min-height:140px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px 50px; color:var(--muted); }
.map-placeholder-art { color:var(--accent); background:var(--accent-soft); border-radius:23px; width:62px; height:62px; transform:rotate(-7deg); margin-bottom:4px; }
.map-placeholder-art .ui-icon { width:30px; height:30px; font-size:30px; transform:rotate(7deg); }
.map-placeholder strong { color:var(--text); font-size:18px; font-weight:600; letter-spacing:-.4px; }
.map-placeholder p { margin:0; font-size:12px; max-width:280px; line-height:1.65; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 40px; padding:0; border-radius:12px; color:var(--muted); background:var(--surface-muted); transition:background 150ms,color 150ms,transform 150ms; }
.icon-button:hover,.icon-button[aria-expanded="true"] { background:var(--accent-soft); color:var(--accent-strong); }
.icon-button:active,.row-action:active { transform:scale(.94); }
.location-button { position:fixed; z-index:20; right:18px; top:calc(18px + var(--safe-top)); height:48px; width:48px; color:var(--accent); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); border-radius:16px; }
.map-status { position:fixed; z-index:16; top:20px; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border); padding:7px 12px; border-radius:20px; font-size:12px; color:var(--muted); opacity:0; pointer-events:none; transition:opacity .2s; }
.map-status.is-visible { opacity:1; }
.map-legend { position:fixed; top:80px; right:18px; z-index:12; display:flex; gap:12px; border-radius:12px; padding:8px; background:var(--surface); font-size:11px; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; }.dot-ok { background:#0b9d91; }.dot-warning { background:#c58c30; }
.sheet { position:fixed; z-index:18; left:12px; right:12px; bottom:calc(96px + var(--safe-bottom)); display:flex; flex-direction:column; height:var(--sheet-open); max-height:calc(100dvh - 125px - var(--safe-top) - var(--safe-bottom)); border:1px solid var(--border); border-radius:26px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(16px); transition:height 280ms var(--ease); }
.sheet.sheet-peek { height:var(--sheet-peek); }.sheet.is-full { height:calc(100dvh - 130px - var(--safe-top) - var(--safe-bottom)); }
.sheet-handle-area { height:22px; flex:0 0 22px; display:grid; place-items:center; touch-action:none; cursor:grab; }
.sheet-handle { width:72px; height:22px; background:transparent; display:grid; place-items:center; }
.sheet-handle::before { content:""; width:32px; height:4px; border-radius:5px; background:color-mix(in srgb,var(--muted) 30%,transparent); }
.sheet-header { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0 14px 10px; }
.sheet-search-field { display:flex; align-items:center; gap:7px; min-width:0; flex:1; height:40px; padding:0 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-muted); color:var(--muted); }
.sheet-search-field .ui-icon { width:18px; height:18px; font-size:18px; }
.sheet-search-field input { min-width:0; min-height:38px; padding:0; border:0; outline:0; background:transparent; font-size:12px; }
.sheet-search-field input:focus { outline:0; }
.sheet-count { max-width:62px; overflow:hidden; color:var(--muted); font-size:10px; text-align:right; white-space:nowrap; text-overflow:ellipsis; }
.sheet-tools { display:flex; gap:6px; align-items:center; }
.route-tool { position:relative; background:var(--accent-soft); color:var(--accent-strong); }
.count-badge { position:absolute; top:-3px; right:-3px; background:var(--accent-strong); color:white; min-width:16px; height:16px; line-height:16px; text-align:center; font-size:9px; border-radius:20px; border:1px solid var(--surface-solid); }
.count-badge:empty { display:none; }
.toolbar { padding:0 14px 10px; flex-shrink:0; }
.search-field { display:block; }
.search-field input { width:100%; }
.filter-panel { display:flex; flex-wrap:wrap; gap:5px; padding:0 14px 10px; flex-shrink:0; }
.filter-chip { padding:5px 10px; border-radius:8px; background:var(--surface-muted); color:var(--muted); font-size:11px; min-height:32px; }
.filter-chip.is-active { color:var(--accent-strong); background:var(--accent-soft); }
.contact-list { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:0 7px 8px; }
.contact-card { display:flex; flex-wrap:wrap; align-items:center; gap:2px; min-height:58px; height:58px; padding:4px 5px; margin:0; border-radius:10px; border:1px solid transparent; border-bottom-color:var(--border); transition:background 150ms,border-color 150ms,height 180ms var(--ease); touch-action:pan-y; }
.contact-card:hover { background:var(--surface-muted); }
.contact-card.is-selected { border-color:color-mix(in srgb,var(--accent) 30%,transparent); background:var(--accent-soft); }
.contact-card.is-expanded { height:auto; align-items:flex-start; padding-bottom:9px; }
.contact-card-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; flex:1; background:transparent; color:var(--text); padding:0 3px; text-align:left; height:48px; transition:transform 180ms var(--ease); }
.contact-card.is-swiping { background:var(--accent-soft); }
.contact-card-title,.contact-card-address { display:flex; align-items:center; min-width:0; gap:5px; height:21px; white-space:nowrap; }
.contact-card-title strong { overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600; }
.contact-type-icon { display:flex; color:var(--accent-strong); }.contact-type-icon .ui-icon { width:14px; height:14px; font-size:14px; }
.contact-card-address { font-size:11px; color:var(--muted); }.contact-card-address .ui-icon { width:12px; height:12px; font-size:12px; }.contact-card-address span { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.contact-card-actions { display:flex; flex:0 0 auto; gap:0; align-items:center; }
.row-action { width:32px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0; background:transparent; color:var(--muted); border-radius:8px; text-decoration:none; transition:color .15s,background .15s; }
.row-action .ui-icon { width:18px; height:18px; font-size:18px; }
.row-action:hover,.row-action.is-active { color:var(--accent-strong); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.whatsapp-action { color:var(--accent-strong); }.done-dot { width:6px; height:6px; background:var(--accent); border-radius:100%; flex-shrink:0; }
.contact-card-expanded { flex:0 0 100%; display:grid; gap:9px; border-top:1px solid color-mix(in srgb,var(--accent) 18%,transparent); padding:10px 4px 0; animation:expand-in 170ms var(--ease); }
@keyframes expand-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.contact-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.contact-detail-grid span { min-width:0; display:grid; gap:2px; }.contact-detail-grid small { color:var(--muted); font-size:10px; }.contact-detail-grid strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:600; }.contact-detail-notes { margin:0; padding:8px 9px; border-radius:9px; background:color-mix(in srgb,var(--surface-solid) 65%,transparent); color:var(--muted); font-size:11px; white-space:pre-wrap; max-height:72px; overflow:auto; }.contact-card-expanded .inline-actions { gap:5px; }.contact-card-expanded .button { min-height:32px; padding:6px 9px; font-size:11px; }
.empty-state { min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px 16px; gap:8px; color:var(--muted); text-align:center; }.empty-state>.ui-icon { width:36px; height:36px; color:color-mix(in srgb,var(--muted) 60%,transparent); margin-bottom:4px; }.empty-state strong { font-size:13px; font-weight:500; color:var(--text); }.empty-state span { font-size:12px; max-width:240px; }
.visit-date-panel { flex:0 0 auto; margin:0 9px 8px; padding:9px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border)); border-radius:13px; background:var(--accent-soft); animation:dialog-in 160ms var(--ease); }
.visit-date-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }.visit-date-header strong,.visit-date-header small { display:block; }.visit-date-header strong { font-size:12px; }.visit-date-header small { color:var(--muted); font-size:10px; }.visit-date-header .icon-button { width:28px; height:28px; flex-basis:28px; background:transparent; }
.visit-date-options { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }.visit-date-option { min-height:30px; padding:2px; border-radius:7px; background:var(--surface-solid); color:var(--muted); font-size:10px; }.visit-date-option.is-today { background:var(--accent-strong); color:white; font-weight:700; }
.bottom-nav { position:fixed; z-index:25; left:12px; right:12px; bottom:calc(12px + var(--safe-bottom)); height:72px; display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; align-items:center; padding:7px; border:1px solid var(--border); background:var(--surface); border-radius:23px; box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.nav-item { height:56px; border-radius:15px; background:transparent; color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:10px; font-weight:600; }
.nav-item .ui-icon { width:23px; height:23px; }
.nav-item.is-active { color:var(--accent-strong); }.nav-item:hover { background:var(--surface-muted); }
.nav-add { justify-self:center; display:grid; place-items:center; width:50px; height:50px; border-radius:18px; background:var(--accent); color:white; box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 25%,transparent); transition:transform .18s; }.nav-add:hover { transform:translateY(-2px); }.nav-add .ui-icon { width:26px; height:26px; }
.dialog { position:fixed; inset:auto 12px calc(96px + var(--safe-bottom)) 12px; width:auto; max-height:min(78dvh,720px); margin:0 auto; padding:0; border:1px solid var(--border); border-radius:24px; background:var(--surface-solid); color:var(--text); overflow:hidden; box-shadow:var(--shadow); }
.dialog::backdrop { background:transparent; backdrop-filter:none; }
.dialog[open] { animation:dialog-in 180ms var(--ease); }
@keyframes dialog-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.dialog-card { position:relative; max-height:min(78dvh,720px); overflow:auto; padding:15px; scrollbar-width:thin; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }.dialog-header .icon-button { background:transparent; }
.dialog-close { position:absolute; top:9px; right:10px; z-index:2; background:transparent; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.span-2 { grid-column:1/-1; }
label { display:grid; gap:6px; font-size:12px; color:var(--muted); }
label:has(.field-label) { position:relative; gap:0; }
.field-label { position:absolute; z-index:1; top:7px; left:12px; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; color:var(--muted); font-size:10px; line-height:1; }
label:has(.field-label) > input:not([type="range"]),label:has(.field-label) > select,label:has(.field-label) > textarea { padding:18px 11px 7px; min-height:47px; }
label:has(.field-label) > textarea { min-height:82px; }
label:has(.field-label) > .weekday-picker { margin-top:13px; }
label:has(.field-label) > input[type="range"] { margin-top:16px; }
input,select,textarea { min-width:0; width:100%; border:1px solid var(--border); border-radius:11px; padding:10px 11px; min-height:43px; background:var(--surface-muted); color:var(--text); font-size:14px; }
textarea { resize:vertical; }
input[type="range"] { padding:0; accent-color:var(--accent); }
.weekday-picker { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }.weekday-button { min-height:35px; padding:0; background:var(--surface-muted); color:var(--muted); border-radius:8px; font-size:11px; }.weekday-button.is-active { background:var(--accent-soft); color:var(--accent-strong); }
.switch-row { position:relative; display:inline-flex; align-items:center; gap:7px; color:var(--text); font-size:11px; white-space:nowrap; cursor:pointer; }
.switch-row input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.switch-track { position:relative; display:inline-block; width:32px; height:19px; flex:0 0 32px; border-radius:999px; background:var(--border); transition:background 160ms var(--ease); }
.switch-track::after { content:""; position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:var(--surface-solid); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform 160ms var(--ease); }
.switch-row input:checked + .switch-track { background:var(--accent); }
.switch-row input:checked + .switch-track::after { transform:translateX(13px); }
.switch-row input:focus-visible + .switch-track { outline:2px solid var(--accent); outline-offset:3px; }
output { color:var(--accent-strong); }
.button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:42px; border-radius:11px; padding:9px 14px; font-size:12px; font-weight:600; color:var(--text); background:var(--surface-muted); text-decoration:none; }.button:visited { text-decoration:none; }.button .ui-icon { width:18px; height:18px; font-size:18px; }.button-primary { color:white; background:var(--accent-strong); }.button-primary:visited { color:white; }.button-soft { background:var(--surface-muted); }.button-ghost { background:transparent; color:var(--muted); }.button-danger { background:color-mix(in srgb,var(--danger) 8%,transparent); color:var(--danger); }.button:active { transform:scale(.98); }
.dialog-actions,.inline-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }.dialog-actions { margin-top:20px; }.actions-spacer { flex:1; }
.settings-section { display:grid; gap:6px; padding:8px 0; border-top:1px solid var(--border); }.settings-section h3,.settings-section p { margin:0; }.settings-section h3 { font-size:12px; }.settings-section p { font-size:11px; line-height:1.45; }.form-help { font-size:10px; color:var(--muted); }
.settings-inline-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.settings-inline-controls { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.mode-inline { width:142px; }
.mode-inline select { min-height:38px; padding-top:15px; padding-bottom:4px; font-size:12px; }
.settings-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.settings-footer { display:flex; align-items:center; gap:8px; padding-top:8px; }
.drive-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }.drive-actions .button { min-width:0; padding-inline:9px; font-size:11px; }.drive-actions .button .ui-icon { width:16px; height:16px; font-size:16px; }.drive-actions #btn-drive-sync { white-space:nowrap; }
.has-texture .sheet,.has-texture .dialog,.has-texture .bottom-nav { background-image:radial-gradient(color-mix(in srgb,var(--accent) 10%,transparent) .65px, transparent .65px); background-size:14px 14px; }
.theme-options { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:5px; }
.theme-swatch { display:grid; gap:4px; min-width:0; padding:4px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font-size:9px; text-align:center; transition:background 150ms, border-color 150ms, color 150ms, transform 150ms; }
.theme-swatch:hover { background:var(--surface-muted); color:var(--text); }
.theme-swatch:active { transform:scale(.97); }
.theme-swatch.is-active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); }
.theme-preview { position:relative; display:block; height:30px; overflow:hidden; border:1px solid color-mix(in srgb,var(--text) 12%,transparent); border-radius:7px; background:var(--preview-bg); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.theme-preview::before { content:""; position:absolute; left:5px; right:5px; top:5px; height:5px; border-radius:3px; background:var(--preview-accent); box-shadow:0 9px 0 var(--preview-card), 0 18px 0 var(--preview-soft); }
.theme-preview::after { content:""; position:absolute; right:7px; bottom:4px; width:14px; height:7px; border-radius:3px; background:var(--preview-accent); box-shadow:-19px 0 0 var(--preview-card); }
.theme-swatch small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-button { cursor:pointer; }.detail-notes { white-space:pre-wrap; background:var(--surface-muted); border-radius:14px; padding:14px; margin:16px 0; }.detail-address { color:var(--muted); }
.route-dialog { max-height:min(40dvh,390px); }
.route-card { max-height:min(40dvh,390px); overflow:hidden; padding:12px; }
.route-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px; padding-right:34px; }
.route-title { display:flex; align-items:baseline; gap:7px; min-width:0; }.route-title strong { font-size:13px; }.route-title span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.route-list { list-style:none; display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; padding:0 0 6px; margin:0; min-height:54px; touch-action:pan-x; }.route-list::-webkit-scrollbar { display:none; }
.route-item { flex:0 0 154px; min-width:0; height:48px; border:1px solid var(--border); border-radius:10px; background:var(--surface-muted); transition:transform 160ms var(--ease),border-color 160ms,background 160ms; }.route-item.is-current { border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); background:var(--accent-soft); }.route-item.is-dragging { opacity:.6; transform:scale(.96); border-style:dashed; }
.route-item-button { width:100%; height:100%; display:flex; align-items:center; gap:7px; padding:5px 7px; text-align:left; background:transparent; color:var(--text); }.route-item-content { min-width:0; flex:1; }.route-item-content strong,.route-item-content small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.route-item-content strong { font-size:11px; }.route-item-content small { max-width:100%; font-size:9px; }.route-number { flex:0 0 auto; display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:var(--surface-solid); color:var(--accent-strong); font-size:10px; font-weight:700; }.route-item.is-current .route-number { background:var(--accent-strong); color:white; }.route-drag-handle { color:var(--muted); }.route-drag-handle .ui-icon { width:15px; height:15px; font-size:15px; }
.route-focus { display:grid; grid-template-columns:minmax(90px,24%) minmax(0,1fr); gap:6px 9px; padding:8px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border)); border-radius:13px; background:var(--accent-soft); animation:expand-in 170ms var(--ease); }.route-focus-header { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; min-height:24px; }.route-step { color:var(--accent-strong); font-size:10px; font-weight:700; }.route-focus-header .icon-button { width:28px; height:28px; flex-basis:28px; background:var(--surface-solid); }.route-photo-wrap { grid-column:1; grid-row:2 / span 3; height:88px; overflow:hidden; display:grid; place-items:center; border-radius:10px; background:var(--surface-muted); }.route-photo-wrap img { width:100%; height:100%; object-fit:cover; }.route-photo-wrap > span { display:grid; place-items:center; gap:3px; color:var(--muted); font-size:9px; text-align:center; }.route-photo-wrap > span .ui-icon { color:var(--accent); }.route-focus h3 { grid-column:2; grid-row:2; align-self:end; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }.route-current-address { grid-column:2; grid-row:3; align-self:center; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }.route-focus > .compact-field { grid-column:2; grid-row:4; }.compact-field { position:relative; display:grid; gap:0; }.compact-field textarea { background:var(--surface-solid); }.route-focus-actions { grid-column:1/-1; grid-row:5; display:grid; grid-template-columns:38px 1fr 1fr; gap:6px; }.route-focus-actions .icon-button { width:38px; height:38px; flex-basis:38px; background:var(--surface-solid); }.route-focus-actions .button { min-width:0; min-height:38px; padding-inline:7px; font-size:11px; }
.report-controls { display:flex; justify-content:space-between; align-items:center; margin:10px 0 20px; }.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }.stat { background:var(--surface-muted); padding:12px 8px; border-radius:13px; }.stat small,.stat strong { display:block; }.stat small { font-size:10px; color:var(--muted); }.stat strong { font-size:20px; letter-spacing:-.5px; }
.report-calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:16px; }.calendar-cell { min-height:42px; padding:5px; border-radius:8px; font-size:11px; color:var(--text); background:transparent; text-align:center; }.button.calendar-cell { display:block; width:100%; font-weight:400; }.calendar-cell.has-visits { background:var(--accent-soft); color:var(--accent-strong); }.calendar-cell.today { box-shadow:inset 0 0 0 1px var(--accent); }.calendar-heading { min-height:24px; color:var(--muted); background:transparent; pointer-events:none; }.calendar-cell strong,.calendar-cell small { display:block; }.calendar-cell small { font-size:9px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.time-entry-panel { display:grid; gap:8px; padding:10px; margin:0 0 12px; border:1px solid var(--border); border-radius:13px; background:var(--surface-muted); animation:dialog-in 160ms var(--ease); }.time-entry-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:26px; }.time-entry-toolbar span { font-size:10px; }.time-entry-toolbar .icon-button { width:28px; height:28px; flex-basis:28px; background:transparent; }.time-entry-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.stepper-field { display:grid; gap:5px; font-size:11px; color:var(--muted); }.time-stepper { display:grid; grid-template-columns:30px 1fr 30px; align-items:center; min-height:62px; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--surface-solid); }.time-stepper output { display:grid; place-items:center; height:100%; font-size:22px; font-variant-numeric:tabular-nums; color:var(--text); }.time-adjust { display:grid; place-items:center; width:30px; height:100%; color:var(--muted); background:transparent; }.time-adjust:hover { color:var(--accent-strong); background:var(--accent-soft); }.time-adjust .ui-icon { width:18px; height:18px; font-size:18px; }
.timer-card { text-align:center; }.timer-display { display:block; font-size:54px; font-weight:300; font-variant-numeric:tabular-nums; letter-spacing:1px; margin:30px 0; }.timer-card .dialog-actions { justify-content:center; }
.toast-region { position:fixed; z-index:100; top:calc(18px + var(--safe-top)); left:50%; transform:translateX(-50%); width:min(90vw,400px); pointer-events:none; }.toast { padding:10px 14px; margin-bottom:5px; font-size:12px; border:1px solid var(--border); border-radius:14px; background:var(--surface-solid); box-shadow:var(--shadow); animation:dialog-in .18s; }.toast.is-error { color:var(--danger); }.toast-confirm { display:flex; align-items:center; justify-content:space-between; gap:10px; pointer-events:auto; }.toast-confirm-actions { display:flex; gap:4px; flex-shrink:0; }.toast-confirm .button { min-height:30px; padding:5px 8px; font-size:10px; }
html[data-mode="dark"] { --bg:#161c20; --surface:rgba(29,36,40,.97); --surface-solid:#1d2428; --surface-muted:#262f34; --text:#edf3f4; --muted:#a5b2b8; --border:rgba(190,210,220,.12); --accent:#33bbae; --accent-strong:#63d2c5; --accent-soft:#203e3c; }
html[data-mode="dark"] .button-primary,html[data-mode="dark"] .nav-add { background:#13887e; color:white; }
@media(min-width:860px) { :root { --sheet-open:min(66dvh,600px); }.sheet { width:420px; left:24px; right:auto; bottom:112px; }.bottom-nav { left:24px; right:auto; width:420px; bottom:24px; }.map-placeholder { position:absolute; left:468px; right:0; top:0; height:100%; }.map-placeholder strong { font-size:22px; }.map-placeholder-art { width:80px; height:80px; }.map-placeholder-art .ui-icon { width:36px; height:36px; }.sheet-header { padding-bottom:16px; }.dialog { left:468px; right:24px; bottom:24px; max-width:720px; margin:0; } }
@media(min-width:561px) { .route-card { padding:10px; }.route-list { min-height:48px; padding-bottom:4px; }.route-item { height:44px; }.route-focus { gap:4px 8px; padding:6px; }.route-photo-wrap { height:72px; }.route-focus > .compact-field textarea { height:46px; min-height:46px; padding-top:14px; padding-bottom:4px; }.route-focus-actions,.route-focus-actions .button,.route-focus-actions .icon-button { min-height:34px; height:34px; }.route-focus-actions .icon-button { width:34px; flex-basis:34px; } }
@media(max-width:560px) { .form-grid { grid-template-columns:1fr; }.span-2 { grid-column:auto; }.dialog-card { padding:13px; }.settings-card .form-grid { grid-template-columns:1fr 1fr; gap:6px; }.settings-inline-heading { align-items:flex-start; flex-direction:column; gap:6px; }.settings-inline-controls { width:100%; justify-content:space-between; }.mode-inline { flex:1; }.route-focus-actions .button { padding-inline:5px; } }
@media(max-width:360px) { .sheet,.bottom-nav { left:8px; right:8px; }.sheet-header { padding-inline:10px; }.row-action { width:28px; }.contact-card-title strong { font-size:12px; }.contact-card-address { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Refinos compactos do roteiro e dos cartões */
.contact-card-address { gap:4px; }
.contact-card-address > span { flex:1; min-width:0; }
.contact-card-last-visit { flex:0 0 auto; max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:10px; }
.contact-card-expanded { gap:6px; padding-top:8px; }
.contact-detail-notes { max-height:58px; padding:7px 8px; }
.contact-detail-grid,.contact-card-expanded .inline-actions,.contact-card-expanded .button { display:none; }

.settings-inline-controls { gap:12px; }
.mode-inline { display:none; }

.report-card { padding-top:50px; }
.report-card > .dialog-close { top:7px; right:8px; }
.report-actions { display:flex; align-items:center; gap:7px; margin-top:10px; }
.report-controls { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:5px; margin:0; }
.report-controls strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; text-align:center; }
.report-actions > #btn-share-report { flex:0 0 auto; min-height:38px; padding-inline:10px; white-space:nowrap; }

.time-entry-panel { width:50%; min-width:180px; }
.time-entry-date { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.time-entry-panel .inline-actions { gap:5px; }
.time-entry-panel .button { min-height:34px; padding:6px 8px; font-size:10px; }

.route-focus { grid-template-columns:minmax(110px,34%) minmax(0,1fr); grid-template-rows:auto minmax(76px,88px) auto; gap:6px 9px; padding:8px; }
.route-focus-header { grid-column:1/-1; min-width:0; min-height:24px; }
.route-current-meta { display:flex; align-items:baseline; min-width:0; gap:7px; width:100%; }
.route-current-meta h3 { flex:0 1 auto; min-width:0; max-width:42%; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.route-current-address { flex:1; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.route-photo-wrap { grid-column:1; grid-row:2; position:relative; min-height:76px; height:auto; overflow:hidden; cursor:pointer; }
.route-photo-wrap img { display:block; }
.route-photo-action { position:absolute; top:5px; right:5px; z-index:2; width:28px; height:28px; flex-basis:28px; background:color-mix(in srgb,var(--surface-solid) 82%,transparent); }
.route-focus > .route-notes-field { display:grid; grid-template-rows:minmax(0,1fr); grid-column:2; grid-row:2; min-width:0; min-height:0; height:100%; }
.route-focus > .route-notes-field textarea { position:static; width:100%; height:auto; min-height:0; align-self:stretch; resize:none; padding-top:18px; }
.route-focus-actions { grid-column:1/-1; grid-row:3; }

@media(min-width:561px) {
    .route-focus { gap:4px 8px; padding:6px; }
    .route-photo-wrap { min-height:72px; }
    .route-focus > .route-notes-field textarea { height:auto; min-height:0; padding-top:14px; padding-bottom:4px; }
}

@media(max-width:560px) {
    .settings-inline-controls { width:auto; justify-content:flex-start; gap:12px; }
}

/* Refinamento audit20: carregamento resiliente do Google Maps */

.field-label { top: 5px; left: 8px; padding: 2px 4px; border-radius: 4px; background: var(--surface-muted); }
label:has(.field-label) > input:not([type="range"]),label:has(.field-label) > select,label:has(.field-label) > textarea { padding-top: 21px; }
.weekday-field { padding-top: 7px; }
label:has(.field-label) > .weekday-picker { margin-top: 20px; }
.type-field { padding-top: 7px; }
.type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; min-height: 40px; padding: 3px; margin-top: 20px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-muted); }
.type-option { min-width: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; transition: background 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease); }
.type-option.is-active { background: var(--surface-solid); color: var(--accent-strong); box-shadow: var(--shadow-soft); }
.type-option:active { transform: scale(.97); }
.contact-days-tag { flex: 0 1 auto; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 5px; border-radius: 5px; background: var(--surface-solid); color: var(--accent-strong); font-size: 9px; font-weight: 700; line-height: 1.2; }

.visit-calendar-toolbar { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: 5px; margin-bottom: 6px; text-align: center; }
.visit-calendar-toolbar strong { font-size: 11px; }
.visit-calendar-toolbar .icon-button { width: 30px; height: 30px; flex-basis: 30px; background: var(--surface-solid); }
.visit-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.visit-calendar-heading { min-height: 20px; color: var(--muted); font-size: 10px; text-align: center; }
.visit-calendar-day { min-height: 30px; padding: 2px; border-radius: 8px; background: var(--surface-solid); color: var(--text); font-size: 11px; transition: background 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease); }
.visit-calendar-day:hover { background: var(--accent-soft); }
.visit-calendar-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.visit-calendar-day.is-marked { background: var(--accent-strong); color: white; font-weight: 700; }

.report-entry-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; margin-bottom: 10px; }
.report-entry-row .time-entry-panel { grid-column: 1; width: auto; min-width: 0; min-height: 100%; margin: 0; }
.report-entry-row .stats-grid { display: contents; }
.report-entry-row .stat { display: grid; align-content: center; min-width: 0; min-height: 100%; padding: 9px 8px; }
.report-entry-row .stat:first-child { grid-column: 1; }
.report-entry-row .stat:nth-child(2) { grid-column: 2; }
.report-entry-row.has-time-entry { grid-template-columns: minmax(0, 1.45fr) minmax(0, .78fr) minmax(0, .78fr); }
.report-entry-row.has-time-entry .stat:first-child { grid-column: 2; }
.report-entry-row.has-time-entry .stat:nth-child(2) { grid-column: 3; }
.report-entry-row .stat strong { font-size: 18px; }
.report-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; gap: 8px; margin-top: 10px; }
.report-actions > .report-controls { grid-column: 1; min-width: 0; flex: none; max-width: none; margin: 0; }
.report-actions > #btn-share-report { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.report-entry-row.has-time-entry + .report-actions { grid-template-columns: minmax(0, 1.45fr) minmax(0, .78fr) minmax(0, .78fr); }
.report-entry-row.has-time-entry + .report-actions > #btn-share-report { grid-column: 2 / 4; }

.image-viewer { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 20px 12px calc(110px + var(--safe-bottom)); pointer-events: none; }
.image-viewer-card { width: min(92vw, 620px); max-height: min(72dvh, 560px); overflow: hidden; pointer-events: auto; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-solid); color: var(--text); box-shadow: var(--shadow); animation: dialog-in 180ms var(--ease); }
.image-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 7px 8px 5px 13px; }
.image-viewer-toolbar strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.image-viewer-toolbar .icon-button { width: 32px; height: 32px; flex-basis: 32px; background: var(--surface-muted); }
.image-viewer-stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; min-height: 120px; overflow: hidden; background: var(--surface-muted); touch-action: none; }
.image-viewer-stage::after { content: "Sem imagem"; display: none; position: absolute; color: var(--muted); font-size: 11px; }
.image-viewer-stage.is-empty::after { display: block; }
.image-viewer-stage img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; user-select: none; transition: transform 180ms var(--ease); }
.image-viewer-spatial-controls { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px 2px; }
.image-viewer-spatial-controls .icon-button { width: 34px; height: 34px; flex-basis: 34px; background: var(--accent-soft); color: var(--accent-strong); }
.image-viewer-spatial-controls .icon-button:disabled { opacity: .36; cursor: not-allowed; }
.image-viewer-spatial-controls .icon-button[data-viewer-move="forward"] { margin-left: 8px; }
.image-viewer-spatial-status { min-height: 14px; margin: 0; padding: 0 12px; color: var(--muted); font-size: 10px; line-height: 14px; text-align: center; }
.image-viewer-spatial-status:empty { display: none; }
.image-viewer-controls,.image-viewer-actions { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px; }
.image-viewer-controls { border-bottom: 1px solid var(--border); }
.image-viewer-controls .icon-button,.image-viewer-actions .icon-button { width: 34px; height: 34px; flex-basis: 34px; background: var(--surface-muted); }
.image-viewer-actions { justify-content: flex-end; }

@media(max-width:560px) {
    .report-entry-row { gap: 6px; }
    .report-entry-row.has-time-entry { grid-template-columns: minmax(0, 1.42fr) minmax(68px, .72fr) minmax(68px, .72fr); }
    .report-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px; }
    .report-entry-row.has-time-entry + .report-actions { grid-template-columns: minmax(0, 1.42fr) minmax(68px, .72fr) minmax(108px, 1fr); }
    .report-actions > #btn-share-report { padding-inline: 8px; font-size: 11px; }
    .image-viewer { padding-bottom: calc(102px + var(--safe-bottom)); }
    .image-viewer-card { width: min(94vw, 500px); }
}