/* BR Confinamentos -- mapa e CRM. Camada especifica do app sobre /shared/ui.css e os tokens da marca.
   Layout: cabecalho fixo + barra de ferramentas (esquerda) + mapa. Paineis: gaveta lateral no
   desktop, folha inferior (arrastavel) no celular. Nenhuma cor fixa: tudo vem dos tokens. */
:root {
  --header-h: 56px;
  --rail-w: 64px;
  --drawer-w: 372px;
  --top: calc(var(--header-h) + var(--safe-t));
}
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body.is-logged-out > :not(#crm-login-screen):not(.skip-link):not(#toasts) { visibility: hidden; }

/* ---------- Cabecalho ---------- */
#app-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1200; height: var(--top);
  padding: var(--safe-t) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-elevated); border-bottom: 1px solid var(--border-subtle);
}
#app-header .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--action-primary); flex: none; }
#app-header .logo-full { height: 34px; width: auto; }
#app-header .logo-sym { height: 30px; width: auto; }
#app-nav { display: flex; gap: 6px; margin: 0 auto 0 12px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 14px;
}
.nav-link:hover { background: var(--surface-muted); }
.nav-link[aria-current="page"] { background: var(--brand-accent-surface); color: var(--on-brand-accent-surface); }
.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
#app-nav + .header-actions { margin-left: 0; }
#account-menu { position: relative; }
.account-btn {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 10px 3px 4px; border-radius: 22px;
  border: 1px solid var(--border-subtle); background: var(--surface); color: var(--text-primary); font-weight: 600; font-size: 13px;
}
.account-btn:hover { background: var(--surface-muted); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--action-primary); color: var(--on-action-primary); font-size: 12px; font-weight: 600;
}
.account-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#account-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; padding: 8px; z-index: 1300;
  background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  animation: pop .16s var(--ease);
}
.account-id { display: grid; gap: 4px; padding: 8px 10px 12px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; justify-items: start; }
.pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-primary); text-decoration: none; font-weight: 500; font-size: 14px; text-align: left;
}
.pop-item:hover { background: var(--surface-muted); }

/* ---------- Barra de ferramentas ---------- */
#tool-rail {
  position: fixed; top: var(--top); left: 0; bottom: 0; width: var(--rail-w); z-index: 1200;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 0 calc(12px + var(--safe-b)) var(--safe-l);
  background: var(--surface-elevated); border-right: 1px solid var(--border-subtle);
  overflow-y: auto; scrollbar-width: none;
}
#tool-rail::-webkit-scrollbar { display: none; }
.rail-mobile-only { display: none; }

/* ---------- Mapa ---------- */
#map { position: fixed; top: var(--top); left: var(--rail-w); right: 0; bottom: 0; z-index: 0; outline: none; background: var(--surface-muted); }
#map-loading {
  position: fixed; top: calc(var(--top) + 16px); left: 50%; transform: translateX(-50%); z-index: 1; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 20px; background: var(--surface-elevated); border: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-secondary);
}
#map-loading .skeleton { width: 14px; height: 14px; border-radius: 50%; }
.maplibregl-ctrl-group { background: var(--surface-elevated) !important; border: 1px solid var(--border-subtle); border-radius: var(--r-md) !important; box-shadow: var(--shadow-1) !important; }
.maplibregl-ctrl-group button { width: 40px !important; height: 40px !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--border-subtle) !important; }
[data-theme="dark"] .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
.maplibregl-ctrl-top-right { top: 4px; right: 4px; transition: right .25s var(--ease); }
.maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--surface-elevated) 85%, transparent) !important; color: var(--text-secondary) !important; font-family: var(--font); }
.maplibregl-ctrl-attrib a { color: var(--link) !important; }
.maplibregl-popup-content {
  background: var(--surface-elevated); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); font-family: var(--font); font-size: 13px; padding: 10px 12px;
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--surface-elevated); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--surface-elevated); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface-elevated); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface-elevated); }
body:has(#point-details-panel.open) .maplibregl-ctrl-top-right { right: var(--drawer-w); }

/* ---------- Busca de cidade ---------- */
#city-search-box { position: fixed; top: calc(var(--top) + 12px); left: calc(var(--rail-w) + 12px); width: min(380px, calc(100vw - var(--rail-w) - 80px)); z-index: 1100; }
#city-search-box .search-ic { position: absolute; left: 12px; top: 13px; color: var(--text-secondary); pointer-events: none; }
#city-search-input {
  min-height: 44px; padding-left: 38px; border-radius: var(--r-sm); border-color: var(--border); background: var(--surface-elevated);
  box-shadow: var(--shadow-1);
}
#city-search-results {
  list-style: none; margin: 4px 0 0; padding: 4px; display: none; max-height: 280px; overflow-y: auto;
  background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
#city-search-results { max-height: min(420px, 60vh); }
#city-search-results li[role="option"] { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
#city-search-results li[role="option"]:hover, #city-search-results li[aria-selected="true"] { background: var(--surface-muted); }
#city-search-results li[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--action-primary); }
#city-search-results .search-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
#city-search-results .search-status { padding: 10px; font-size: 13px; color: var(--text-secondary); }
.search-kind { flex: none; color: var(--text-secondary); }
.search-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.search-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-sub { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-tag { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.city-search-uf { color: var(--text-secondary); font-size: 12px; font-weight: 600; }

/* ---------- Legenda ---------- */
#map-legend {
  position: fixed; left: calc(var(--rail-w) + 12px); bottom: calc(16px + var(--safe-b)); z-index: 1000; max-width: 250px;
  background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md); box-shadow: var(--shadow-1);
  padding: 8px 12px; font-size: 12px;
}
#map-legend summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
#map-legend summary::-webkit-details-marker { display: none; }
#map-legend summary::after { content: "▾"; color: var(--text-secondary); }
#map-legend:not([open]) summary::after { content: "▴"; }
#map-legend ul { list-style: none; display: flex; gap: 14px; padding: 8px 0 0; margin: 0; }
#map-legend li { display: flex; align-items: center; }
#map-legend p { margin-top: 8px; color: var(--text-secondary); }
.dot { display: inline-block; border-radius: 50%; border: 2px solid var(--map-marker-outer-outline); outline: 1px solid var(--map-marker-inner-outline); margin-right: 6px; }
.dot.s { width: 12px; height: 12px; background: var(--map-size-small); }
.dot.m { width: 16px; height: 16px; background: var(--map-size-medium); }
.dot.l { width: 20px; height: 20px; background: var(--map-size-large); }
#hud { position: fixed; bottom: 8px; right: 8px; z-index: 900; background: rgb(0 0 0 / .72); color: #fff; font: 12px monospace; padding: 6px 10px; border-radius: var(--r-sm); }

/* ---------- Folhas (gaveta no desktop / inferior no celular) ---------- */
.sheet {
  position: fixed; z-index: 1150; background: var(--surface-elevated); color: var(--text-primary);
  border: 0 solid var(--border-subtle); overflow-y: auto; overscroll-behavior: contain;
  transition: transform .28s var(--ease), visibility .28s, max-height .25s var(--ease);
  visibility: hidden;
}
.sheet-handle { display: none; }
#main-menu {
  top: var(--top); left: var(--rail-w); bottom: 0; width: var(--drawer-w); padding: 20px 18px calc(20px + var(--safe-b));
  border-right-width: 1px; transform: translateX(-102%); box-shadow: var(--shadow-2);
}
#main-menu.open, #main-menu:has(.menu-section.open) { transform: none; visibility: visible; }
#point-details-panel {
  top: var(--top); right: 0; bottom: 0; width: var(--drawer-w); padding: 18px 18px calc(24px + var(--safe-b));
  border-left-width: 1px; transform: translateX(102%); box-shadow: var(--shadow-2);
}
#point-details-panel.open { transform: none; visibility: visible; }
.details-close-btn {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-primary); font-size: 22px; line-height: 1; z-index: 2;
}
.details-close-btn:hover { background: var(--surface-muted); }
#main-menu > .details-close-btn { position: sticky; top: 0; float: right; margin: -10px -8px 0 0; }

/* ---------- Painel de camadas ---------- */
#layer-selector-panel {
  position: fixed; top: calc(var(--top) + 12px); right: 64px; z-index: 1140; width: 280px; padding: 14px; display: none;
  background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  transition: right .25s var(--ease);
}
body:has(#point-details-panel.open) #layer-selector-panel { right: calc(var(--drawer-w) + 56px); }
#layer-selector-panel.open { display: block; animation: pop .16s var(--ease); }
#layer-selector-panel h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
#layer-selector-panel h4:not(:first-child) { margin-top: 14px; }
.layer-thumb-row { display: flex; gap: 10px; }
.layer-thumb-btn { width: 76px; padding: 0; border: 2px solid transparent; border-radius: var(--r-md); background: none; color: var(--text-primary); overflow: hidden; text-align: center; }
.layer-thumb-btn img { display: block; width: 100%; height: 52px; object-fit: cover; border-radius: 4px; filter: grayscale(.7); }
.layer-thumb-btn.selected { border-color: var(--action-primary); }
.layer-thumb-btn.selected img { filter: none; }
.layer-thumb-btn span { display: block; font-size: 12px; font-weight: 600; padding: 4px 0; }
.overlay-toggle-row { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; font-weight: 400; cursor: pointer; }
.hint-small { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }

/* ---------- Secoes do painel de ferramentas ---------- */
.menu-section { display: none; }
.menu-section.open { display: block; }
.menu-section h3 { font-size: 16px; margin: 0 0 10px; }
.menu-section label { display: block; margin-top: 12px; font-weight: 600; font-size: 13px; }
.menu-section input[type="range"] { width: 100%; }
.menu-section button { margin-top: 10px; margin-right: 6px; }
.menu-section table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.menu-section th, .menu-section td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.menu-section button:not([class]) {
  min-height: 40px; padding: 8px 14px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--action-primary);
  color: var(--on-action-primary); font-weight: 600; font-size: 14px;
}
.menu-section button:not([class]):hover { background: var(--action-primary-hover); }
#search-status { margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
.google-maps-hint, .filters-hint { font-size: 12px; color: var(--text-secondary); margin: 4px 0 8px; }
.filters-badge { font-size: 11px; background: var(--action-primary); color: var(--on-action-primary); border-radius: 10px; padding: 1px 8px; vertical-align: middle; font-weight: 600; }
.range-label { font-weight: 600; color: var(--action-primary); font-variant-numeric: tabular-nums; }
.dual-range { position: relative; height: 32px; margin: 4px 0 2px; }
.dual-range-track { position: absolute; left: 0; right: 0; top: 14px; height: 4px; background: var(--border-subtle); border-radius: 2px; }
.dual-range-fill { position: absolute; top: 0; bottom: 0; background: var(--action-primary); border-radius: 2px; }
.dual-range input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; height: 32px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-elevated); border: 3px solid var(--action-primary); box-shadow: var(--shadow-1);
}
.dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-elevated); border: 3px solid var(--action-primary); box-shadow: var(--shadow-1);
}
.dual-range input[type="range"]::-webkit-slider-runnable-track, .dual-range input[type="range"]::-moz-range-track { background: none; }
.region-filter-row { display: flex; gap: 6px; align-items: center; }
.region-filter-row select { flex: 1; min-width: 0; }
.region-filter-row button { width: auto !important; margin: 0 !important; padding: 6px 10px; }
.region-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.region-block label { font-size: 12px; font-weight: 600; }

/* ---------- Detalhes do ponto ---------- */
.details-title { font-size: 18px; margin: 4px 36px 12px 0; line-height: 1.25; }
.details-section-title { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-secondary); margin: 20px 0 8px; }
.visited-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-bottom: 4px; font-size: 14px; font-weight: 500; }
.toggle-hint { display: block; font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.visited-switch { position: relative; flex: none; width: 48px; height: 28px; padding: 0; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-muted); transition: background-color .2s var(--ease); margin: 0; }
.visited-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-secondary); transition: transform .2s var(--ease), background-color .2s var(--ease); }
.visited-switch.on { border-color: transparent; background: var(--map-visited); }
#btn-toggle-client.on { background: var(--map-client); }
.visited-switch-base.on { background: var(--map-base); }
.visited-switch.on::after { transform: translateX(20px); background: var(--surface); }
.property-grid { display: flex; flex-direction: column; }
.property-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
.property-row:last-child { border-bottom: 0; }
.property-label { color: var(--text-secondary); font-weight: 500; flex: none; }
.property-value { text-align: right; word-break: break-word; font-variant-numeric: tabular-nums; }
.annotations-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; font-size: 14px; }
.annotation-item { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.annotation-item:last-child { border-bottom: 0; }
.annotation-item .annotation-name { font-weight: 600; }
.annotation-private-badge { display: inline-block; font-size: 11px; background: var(--surface-muted); color: var(--text-secondary); padding: 1px 8px; border-radius: 10px; margin-left: 6px; }
.annotation-date { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
#annotation-form { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#annotation-form label, .field-group label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
#annotation-form .btn-primary { margin-top: 8px; width: 100%; }
.crm-section-box { background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 14px; margin: 14px 0; }
.crm-section-box form { display: flex; flex-direction: column; }
.crm-section-box .btn-primary, .crm-section-box .btn-secondary { margin-top: 12px; }
.field-group { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; flex: 1; min-width: 0; }
.field-group:first-child { margin-top: 0; }
.field-row { display: flex; gap: 8px; margin-top: 10px; }
/* Labels de tamanhos diferentes: ancora no fundo para os campos ficarem alinhados na mesma linha. */
.field-row .field-group { margin-top: 0; justify-content: flex-end; }
.activities-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.activity-item { display: flex; gap: 10px; background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 10px; }
.activity-item-done { opacity: .65; }
.activity-item-icon { color: var(--action-primary); display: flex; padding-top: 2px; }
.activity-item-body { flex: 1; min-width: 0; }
.activity-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.activity-item-action { font-weight: 600; font-size: 14px; }
.activity-item-when { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.activity-item-notes { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.activity-item-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.activity-item-actions button { margin-top: 0; min-height: 32px; padding: 4px 12px; font-size: 13px; }
.activity-status-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 10px; background: var(--success-surface); color: var(--success-text); border: 1px solid var(--success-border); }
.unit-badge { margin: 4px 0 8px; font-size: 13px; font-weight: 600; color: var(--map-custom); display: flex; align-items: center; gap: 6px; }
.unit-btn-row { display: flex; gap: 8px; margin-bottom: 8px; }
.unit-btn-row button { flex: 1; }

/* ---------- Agenda de hoje (cartoes sobre o mapa) ---------- */
#agenda-panel {
  position: fixed; top: calc(var(--top) + 72px); left: calc(var(--rail-w) + 12px); z-index: 1050; width: 240px;
  max-height: calc(100dvh - var(--top) - 160px); overflow-y: auto; display: none; flex-direction: column; gap: 8px;
}
.agenda-header { display: flex; align-items: center; gap: 8px; background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 8px 12px; font-size: 13px; font-weight: 600; }
.agenda-card { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-left: 4px solid var(--info-border); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 10px 12px; font-size: 13px; }
.agenda-card-done { opacity: .55; }
.agenda-card-due { border-left-color: var(--error-border); }
.agenda-card-top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; gap: 8px; }
.agenda-card-time { font-variant-numeric: tabular-nums; }
.agenda-card-action { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.agenda-card-location { margin-top: 2px; word-break: break-word; }
.agenda-card-lead, .agenda-card-notes { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.agenda-card-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Resultado do "Calcular area" ---------- */
#measure-result-card {
  display: none; position: fixed; right: 16px; bottom: calc(32px + var(--safe-b)); z-index: 1100; min-width: 260px; max-width: 340px;
  padding: 16px 18px; background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-2); font-size: 14px;
  transition: right .25s var(--ease);
}
body:has(#point-details-panel.open) #measure-result-card { right: calc(var(--drawer-w) + 16px); }
#measure-result-card.open { display: block; }
#measure-result-card h3 { font-size: 15px; margin: 0 28px 8px 0; }
#measure-result-card p { margin: 4px 0; }
#measure-result-card #measure-card-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; line-height: 1; background: none; border: 0; font-size: 22px; color: var(--text-primary); border-radius: var(--r-sm); }
#measure-result-card #measure-card-close:hover { background: var(--surface-muted); }

/* ---------- Minha agenda e funil ---------- */
#workspace-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: var(--overlay); align-items: center; justify-content: center; padding: 16px; }
#workspace-overlay.open { display: flex; }
#workspace-modal {
  background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  width: min(1180px, 100%); height: min(780px, 100%); display: flex; flex-direction: column; overflow: hidden; font-size: 14px; animation: pop .18s var(--ease);
}
.ws-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-elevated); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.ws-header h2 { flex: 1; min-width: 160px; }
.ws-segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.ws-segmented button { min-height: 40px; padding: 6px 14px; border: 0; background: var(--surface-elevated); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ws-segmented button.active { background: var(--action-primary); color: var(--on-action-primary); }
.ws-tabs { display: flex; gap: 4px; padding: 0 12px; background: var(--surface-elevated); border-bottom: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; }
.ws-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; background: none; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.ws-tabs button.active { color: var(--action-primary); border-bottom-color: var(--action-primary); }
.ws-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-muted); color: var(--text-primary); font-size: 12px; text-align: center; }
.ws-count:empty { display: none; }
.ws-body { flex: 1; overflow: auto; padding: 16px; }
.ws-empty, .ws-error { text-align: center; color: var(--text-secondary); padding: 40px 12px; }
.ws-error { color: var(--error-text); }
.ws-hint { color: var(--text-secondary); margin: 0 0 12px; }
.ws-chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ws-chips button { min-height: 36px; padding: 6px 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-elevated); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ws-chips button.active { background: var(--action-primary); border-color: var(--action-primary); color: var(--on-action-primary); }
.ws-day { margin-bottom: 18px; }
.ws-day h3 { margin: 0 0 8px; font-size: 13px; text-transform: capitalize; color: var(--text-secondary); }
.ws-day h3 span { font-weight: 400; margin-left: 4px; }
.ws-day-overdue h3 { color: var(--error-text); }
.ws-day-today h3 { color: var(--action-primary); }
.ws-activity { display: flex; align-items: center; gap: 14px; background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-left: 4px solid var(--info-border); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 8px; }
.ws-activity.ws-late { border-left-color: var(--error-border); }
.ws-activity.ws-done { opacity: .6; }
.ws-activity-time { font-size: 18px; font-weight: 600; min-width: 56px; font-variant-numeric: tabular-nums; }
.ws-activity-main { flex: 1; min-width: 0; }
.ws-activity-title { font-weight: 600; }
.ws-activity-sub { color: var(--text-secondary); font-size: 13px; margin-top: 2px; word-break: break-word; }
.ws-activity-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ws-btn-primary, .ws-btn-secondary { min-height: 36px; padding: 6px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; border: 1px solid var(--action-primary); }
.ws-btn-primary { background: var(--action-primary); color: var(--on-action-primary); }
.ws-btn-primary:hover { background: var(--action-primary-hover); }
.ws-btn-secondary { background: transparent; color: var(--action-primary); }
.ws-btn-secondary:hover { background: var(--surface-muted); }
.ws-badge-done { font-size: 12px; font-weight: 600; color: var(--success-text); }
.ws-kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 12px; align-items: start; min-width: 980px; }
.ws-column { background: var(--surface-muted); border-radius: var(--r-lg); padding: 8px; min-height: 160px; transition: background .12s; }
.ws-column.ws-drop-target { background: var(--selection-surface); outline: 2px dashed var(--action-primary); }
.ws-column-head { background: var(--surface-elevated); border-radius: var(--r-md); border-top: 4px solid; padding: 8px 10px; margin-bottom: 8px; }
.ws-column-total { color: var(--text-secondary); font-size: 13px; margin-top: 2px; }
.ws-column-cards { display: flex; flex-direction: column; gap: 8px; }
.ws-column-empty { text-align: center; color: var(--text-secondary); padding: 12px; }
.ws-card { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 10px; cursor: grab; touch-action: manipulation; }
.ws-card.ws-dragging { opacity: .4; }
.ws-card-title { font-weight: 600; word-break: break-word; }
.ws-card-sub { color: var(--text-secondary); font-size: 12px; margin-top: 1px; }
.ws-card-value { color: var(--success-text); font-weight: 600; margin-top: 6px; }
.ws-card-next { font-size: 12.5px; margin-top: 6px; }
.ws-muted { color: var(--text-secondary); }
.ws-late-text { color: var(--error-text); font-weight: 600; }
.ws-card-goto { margin-top: 8px; width: 100%; }

/* ---------- Avisos de atribuicao / cadastro de unidade (dialogos) ---------- */
#notifications-overlay, #unit-form-overlay { display: none; position: fixed; inset: 0; background: var(--overlay); align-items: center; justify-content: center; padding: 16px; }
#notifications-overlay { z-index: 2100; }
#unit-form-overlay { z-index: 2150; }
#notifications-overlay.open, #unit-form-overlay.open { display: flex; }
.nt-card, .unit-form {
  position: relative; background: var(--surface-elevated); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); width: min(480px, 100%); max-height: 88dvh; overflow-y: auto; padding: 20px 22px; font-size: 14px; animation: pop .18s var(--ease);
}
.nt-card h3, .unit-form h3 { margin: 0 36px 10px 0; font-size: 17px; }
.nt-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; background: none; border: 0; font-size: 24px; line-height: 1; color: var(--text-primary); border-radius: var(--r-sm); }
.nt-x:hover { background: var(--surface-muted); }
.nt-item { padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.nt-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.nt-sub { color: var(--text-secondary); margin-top: 2px; }
.nt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.nt-btn { min-height: 36px; padding: 6px 14px; border: 1px solid var(--border); background: transparent; color: var(--text-primary); border-radius: var(--r-sm); font-size: 13px; font-weight: 600; }
.nt-btn:hover { background: var(--surface-muted); }
.nt-more { color: var(--text-secondary); font-size: 12px; }
.nt-ok { margin-top: 14px; width: 100%; min-height: 44px; border: 0; border-radius: var(--r-sm); background: var(--action-primary); color: var(--on-action-primary); font-weight: 600; }
.nt-ok:hover { background: var(--action-primary-hover); }
.unit-form label { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; }
.unit-form input, .unit-form select, .unit-form textarea { margin-top: 4px; }
.unit-row { display: flex; gap: 10px; }
.unit-row > div { flex: 1; min-width: 0; }
.unit-hint { color: var(--text-secondary); font-size: 13px; margin: 0 0 4px; }
.unit-check { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.unit-error { color: var(--error-text); margin: 8px 0 0; min-height: 1em; font-size: 13px; }
.unit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }

/* ================= Celular e tablet pequeno ================= */
@media (max-width: 900px) {
  #app-nav { display: none; }
  #app-header .logo-full { height: 30px; }
}
@media (max-width: 768px) {
  :root { --rail-w: 56px; --header-h: 52px; }
  #app-header { gap: 8px; }
  #app-header .logo-full { display: none; }
  html:not([data-theme="dark"]) #app-header .logo-sym.logo-light, [data-theme="dark"] #app-header .logo-sym.logo-dark { display: block; }
  #app-header .brand-name.logo-sym { display: block; }
  .account-name { display: none; }
  .account-btn { padding: 3px; border-radius: 50%; }
  .rail-mobile-only { display: inline-flex; }
  #tool-rail { gap: 8px; padding-top: 8px; }
  #tool-rail .icon-btn { width: 44px; height: 44px; }
  .maplibregl-ctrl-zoom-in, .maplibregl-ctrl-zoom-out { display: none !important; } /* pinca para zoom */
  .maplibregl-ctrl-top-right { top: 56px; }

  #city-search-box { top: calc(var(--top) + 8px); left: calc(var(--rail-w) + 8px); right: 56px; width: auto; }
  #layer-selector-panel { top: calc(var(--top) + 64px); right: 8px; left: calc(var(--rail-w) + 8px); width: auto; }
  body:has(#point-details-panel.open) #layer-selector-panel { right: 8px; }
  body:has(#point-details-panel.open) .maplibregl-ctrl-top-right { right: 4px; }
  #map-legend { left: calc(var(--rail-w) + 8px); bottom: calc(8px + var(--safe-b)); }

  /* folhas inferiores arrastaveis */
  .sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-height: 50dvh; z-index: 1300;
    border-width: 1px 0 0 !important; border-radius: 16px 16px 0 0; padding: 26px 16px calc(20px + var(--safe-b)) !important; transform: translateY(104%); }
  .sheet::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--border); }
  .sheet.expanded { max-height: 90dvh; }
  #main-menu.open, #main-menu:has(.menu-section.open), #point-details-panel.open { transform: none; }
  .details-close-btn { top: 14px; }
  #main-menu > .details-close-btn { margin: -16px -4px 0 0; }
  body:has(#point-details-panel.open) #main-menu { visibility: hidden; transform: translateY(104%); }

  #agenda-panel { top: calc(var(--top) + 64px); left: calc(var(--rail-w) + 8px); right: 8px; width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; padding-bottom: 4px; }
  #agenda-panel > * { flex: none; width: 230px; }
  #measure-result-card, body:has(#point-details-panel.open) #measure-result-card {
    top: calc(var(--top) + 64px); bottom: auto; left: calc(var(--rail-w) + 8px); right: 8px; min-width: 0; max-width: none; padding: 12px 14px; max-height: 38dvh; overflow-y: auto; }

  .overlay, #workspace-overlay, #notifications-overlay, #unit-form-overlay { align-items: flex-end; padding: 0; }
  #workspace-modal { height: 100%; width: 100%; border-radius: 0; }
  #workspace-overlay { align-items: stretch; }
  .nt-card, .unit-form { width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92dvh; padding-bottom: calc(22px + var(--safe-b)); }
  .ws-activity { flex-wrap: wrap; }
  .ws-activity-actions { width: 100%; }
  .field-row { flex-wrap: wrap; }
  .unit-row { flex-direction: column; gap: 0; }
}
@media (max-width: 380px) { .layer-thumb-btn { width: 68px; } }
@media (max-height: 480px) and (orientation: landscape) { .sheet { max-height: 70dvh; } #map-legend { display: none; } }

/* quebra por tipo/porte no consolidado da area desenhada */
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table td { padding: 3px 0; border-bottom: 1px solid var(--border-subtle); }
.mini-table td.num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 12px; }
#measure-result-card { max-height: calc(100dvh - var(--top) - 32px); overflow-y: auto; }

/* ---------- Consolidado ---------- */
#consolidado, #regions-view { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: var(--surface); user-select: none; -webkit-user-select: none; }
#consolidado[hidden], #regions-view[hidden] { display: none; }
.cons-head { display: flex; align-items: center; gap: 16px; padding: calc(10px + var(--safe-t)) 16px 10px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-elevated); flex-wrap: wrap; }
.cons-head > div:first-child { flex: 1; min-width: 220px; }
.cons-head h2 { font-size: 18px; }
.cons-filters { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.cons-group { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.cons-group select { min-height: 40px; width: auto; }
.ms { position: relative; }
.ms > summary { list-style: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-weight: 600; font-size: 14px; cursor: pointer; }
.ms > summary::-webkit-details-marker { display: none; }
.ms > summary::after { content: "▾"; margin-left: 10px; color: var(--text-secondary); }
.ms[open] > summary { border-color: var(--action-primary); }
.ms-list { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; width: 260px; max-height: 300px; overflow-y: auto; padding: 8px; background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.ms-list label { display: flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 400; font-size: 14px; }
.cons-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 260px; overflow: hidden; }
.cons-main { overflow-y: auto; padding: 16px; display: grid; gap: 16px; align-content: start; }
.cons-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cons-card { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 14px 16px; min-width: 0; }
.cons-card h3 { font-size: 14px; margin-bottom: 10px; }
.cons-canvas { position: relative; height: 270px; }
#cons-map { height: 270px; border-radius: var(--r-md); overflow: hidden; }
.cons-summary { overflow-y: auto; padding: 16px; border-left: 1px solid var(--border-subtle); background: var(--surface-elevated); }
.cons-summary .eyebrow { margin-bottom: 12px; }
.cons-kpi { display: grid; gap: 2px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.cons-kpi span { font-size: 12px; color: var(--text-secondary); }
.cons-kpi b { font-size: 26px; font-weight: 600; line-height: 1.15; }
#cons-table th { padding: 0; }
.sort-btn { width: 100%; min-height: 40px; padding: 8px; border: 0; background: transparent; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left; white-space: nowrap; }
#cons-table th:not(:first-child) .sort-btn { text-align: right; }
#cons-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
@media print { #consolidado, #regions-view { display: none !important; } }
@media (max-width: 900px) {
  .cons-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow-y: auto; }
  .cons-summary { order: -1; border-left: 0; border-bottom: 1px solid var(--border-subtle); padding: 12px; overflow: visible; }
  #cons-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .cons-main { overflow: visible; padding: 12px; }
  .cons-grid { grid-template-columns: 1fr; }
  .cons-kpi b { font-size: 22px; }
}
.ws-seller select { min-height: 40px; width: auto; max-width: 240px; }
.ws-seller select { min-height: 40px; width: auto; max-width: 240px; }

/* ---------- Estimativa de valor (potential-value.js) ---------- */
.pv { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.pv-basis { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; width: fit-content; }
.pv-basis button { min-height: 34px; padding: 4px 12px; border: 0; border-radius: 0; background: var(--surface-elevated); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pv-basis button[aria-pressed="true"] { background: var(--action-primary); color: var(--on-action-primary); }
.pv-field { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pv-field input { min-height: 38px; }
.pv-result { display: grid; gap: 2px; }
.pv-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.pv-total { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* ---------- Regioes: ranking, comparativo e gestao (regions-view.js) ---------- */
#regions-view { user-select: auto; }
#rg-table th, #rg-table td { padding: 8px 8px; text-align: left; white-space: nowrap; }
#rg-table th.num, #rg-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rg-rank { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--surface-muted); color: var(--text-secondary); }
.rg-rank.top { background: var(--action-primary); color: var(--on-action-primary); }
.rg-bar-cell { min-width: 190px; }
.rg-bar { height: 8px; border-radius: 4px; background: var(--surface-muted); overflow: hidden; margin-bottom: 3px; }
.rg-bar i { display: block; height: 100%; border-radius: 4px; background: var(--action-primary); }
.rg-actions { display: flex; gap: 6px; }
.rg-compare { height: 340px; }
#region-manage { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; background: rgba(0,0,0,.45); padding: 16px; }
#region-manage[hidden] { display: none; }
.rm-box { position: relative; width: min(460px, 100%); max-height: 90dvh; overflow-y: auto; background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-2); display: grid; gap: 10px; }
.rm-box h3 { margin: 0; } .rm-box h4 { margin: 8px 0 0; font-size: 13px; }
.rm-box .assign-holder { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; }

/* ---------- Reportar erro nos dados (report-error.js) ---------- */
#point-context-menu { position: fixed; z-index: 2200; min-width: 260px; padding: 4px; background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
#point-context-menu[hidden] { display: none; }
#point-context-menu button { width: 100%; min-height: 40px; padding: 8px 12px; border: 0; background: transparent; text-align: left; font-size: 14px; border-radius: var(--r-sm); cursor: pointer; color: var(--text-primary); }
#point-context-menu button:hover, #point-context-menu button:focus-visible { background: var(--surface-muted); }
#report-overlay { position: fixed; inset: 0; z-index: 2300; display: grid; place-items: center; background: rgba(0,0,0,.45); padding: 16px; }
#report-overlay[hidden] { display: none; }
#report-overlay textarea { width: 100%; }

/* ---------- Historico de notificacoes (notifications-card.js) ---------- */
#btn-notifications { position: relative; }
.notif-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--error-500); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.notif-badge[hidden] { display: none; }
#notif-history { position: fixed; z-index: 2000; top: var(--top, 60px); right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; gap: 8px; padding: 12px 16px calc(12px + var(--safe-b, 0px)); background: var(--surface-elevated); border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-2); overflow: hidden; }
#notif-history[hidden] { display: none; }
#notif-history header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#notif-history h3 { margin: 0; }
.nh-actions { display: flex; align-items: center; gap: 4px; }
.nh-list { flex: 1; min-height: 0; overflow-y: auto; }
.nh-day { margin: 14px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.nh-item { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); }
.nh-item.unread { border-color: var(--action-primary); box-shadow: inset 3px 0 0 var(--action-primary); }
.nh-time { display: block; margin-bottom: 4px; font-size: 11.5px; color: var(--text-secondary); }
.nh-item .nt-item { margin: 0; padding: 0; border: 0; background: transparent; }
.nt-history-hint { margin: 8px 0 0; font-size: 12px; text-align: center; color: var(--text-secondary); }