/* =====================================================================================
   Equipes e Territórios (APS, out/2026) — Equipes de saúde, Territórios e microáreas e
   Mapa do território, na fundação mm-*. Cores dos tons de mc-modulo.css (.mm-tom-*).
   ===================================================================================== */

/* ---------- equipe (célula da tabela e cabeçalho da seção) ---------- */
.et-eq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.et-eq-ico {
    width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 1rem;
    background: var(--tom-soft); color: var(--tom); border: 1px solid var(--tom-line);
}
.et-eq-txt { min-width: 0; }
.et-eq-nome { font-size: .82rem; font-weight: 800; color: var(--p-ink); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-eq-sub { display: flex; align-items: center; gap: 6px; font-size: .68rem; color: var(--p-muted); white-space: nowrap; }
.et-sigla {
    padding: 0 6px; border-radius: 5px; font-size: .62rem; font-weight: 800; letter-spacing: .2px;
    color: var(--tom); background: var(--tom-soft);
}
.et-ellipsis { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-tbl tr.et-inativa td { opacity: .62; }
.et-tbl tr.et-especial td { background: var(--p-soft); }
.et-tbl tr.et-residual td { color: var(--p-faint); }
.et-tbl tr.et-residual .et-ma-cod { color: var(--p-faint); background: var(--p-soft2); }

/* ---------- modal da equipe ---------- */
.et-unid { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.et-unid > i { color: var(--p-blue); font-size: 1rem; margin-top: 1px; }
.et-comp {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 6px; border-radius: 9px;
    font-size: .76rem; font-weight: 600; color: var(--p-text); background: var(--p-soft); border: 1px solid var(--p-border-soft);
}
.et-comp b { color: var(--p-ink); font-variant-numeric: tabular-nums; }
.et-comp.ok > i { color: var(--p-green); font-size: 1.05rem; }
.et-comp.falta { background: var(--p-orange-soft); border-color: var(--p-orange-line); }
.et-comp.falta > i { color: var(--p-orange); font-size: 1.05rem; }

/* ---------- territórios: equipe como seção, microáreas em tabela ---------- */
.et-terr { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.et-sec { border: 1px solid var(--p-border); border-radius: 12px; background: var(--p-surface); overflow: hidden; }
.et-sec-head { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--p-border-soft); background: var(--p-soft); }
.et-sec-head .et-eq { min-width: 230px; }
.et-sec-nums { display: flex; gap: 14px; font-size: .72rem; color: var(--p-muted); white-space: nowrap; }
.et-sec-nums b { color: var(--p-ink); font-variant-numeric: tabular-nums; }
.et-ma { display: flex; align-items: center; gap: 8px; }
.et-ma-cod {
    min-width: 34px; height: 26px; padding: 0 6px; border-radius: 7px; display: grid; place-items: center; flex: none;
    font-size: .8rem; font-weight: 800; color: var(--p-blue); background: var(--p-blue-soft); font-variant-numeric: tabular-nums;
}
.et-especial .et-ma-cod { color: var(--p-muted); background: var(--p-soft2); }
.et-barra { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.et-barra .mm-bar-track { flex: 1; height: 7px; }

/* ---------- mapa ---------- */
.et-mapa-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: stretch; }
.et-mapa-card { display: flex; flex-direction: column; min-width: 0; }
.et-mapa-wrap { position: relative; border-top: 1px solid var(--p-border-soft); border-bottom: 1px solid var(--p-border-soft); }
/* O Mapbox mede o canvas e o clique sem considerar o zoom de ancestral: aqui o zoom do .mc-scaled é anulado e a
   altura é escalada à mão, para o mapa ter o mesmo tamanho visual do resto da página. */
.et-mapa-box {
    width: 100%; height: calc(620px * var(--mc-scale, 1));
    zoom: calc(1 / var(--mc-scale, 1));
    background: var(--p-soft2);
}
.et-mapa-carregando {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: color-mix(in srgb, var(--p-surface) 78%, transparent); font-size: .8rem; font-weight: 700; color: var(--p-muted);
}
.et-mapa-pe { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px; }
.et-mapa-pe .mm-legend { flex: 1; min-width: 0; gap: 8px 12px; }
.et-mapa-pe .mm-legend-it .sw { border-radius: 50%; width: 11px; height: 11px; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--p-border); }
.et-sw-cad { background: var(--p-soft2) !important; border: 2px solid #0b1f3a !important; }
.et-sw-unid { background: #0b1f3a !important; width: 13px !important; height: 13px !important; }
.et-camadas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Lista ao lado do mapa: tem a altura do cartão do mapa (contain: size) e rola por dentro. */
.et-lista-card { display: flex; flex-direction: column; min-width: 0; contain: size; }
.et-lista-filtros { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--p-border-soft); }
.et-lista-filtros .mm-seg { align-self: flex-start; }
.et-lista { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.et-doms { display: flex; flex-direction: column; padding: 6px; }
.et-dom {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left;
    font: inherit; color: inherit; cursor: pointer;
    content-visibility: auto; contain-intrinsic-size: auto 46px;
}
.et-dom:hover { background: var(--p-soft); }
.et-dom.sel { background: var(--p-blue-soft); border-color: var(--p-blue-line); }
.et-dom.semgps .et-dom-end { color: var(--p-muted); }
.et-dom-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--p-surface), 0 0 0 3px var(--p-border); }
.et-dom.semgps .et-dom-dot { opacity: .35; }
.et-dom-txt { display: flex; flex-direction: column; min-width: 0; }
.et-dom-end { font-size: .78rem; font-weight: 700; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-dom-sub { font-size: .66rem; color: var(--p-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-dom-orig { color: var(--p-muted); font-size: .95rem; }

/* Balão do Mapbox: o mapa é sempre claro, então o texto não segue o tema escuro. */
.et-pop { font-family: var(--p-font, Inter, sans-serif); color: #475569; min-width: 210px; }
.et-pop-tit { font-size: .84rem; font-weight: 800; color: #0b1f3a; line-height: 1.3; }
.et-pop-sub { font-size: .72rem; color: #64748b; margin: 2px 0 6px; }
.et-pop-l { font-size: .74rem; padding: 2px 0; border-top: 1px solid #f1f5f9; }
.et-pop-orig { margin-top: 7px; font-size: .68rem; font-weight: 700; color: #059669; }
.et-pop-orig.cad { color: #0b1f3a; }
.et .mapboxgl-popup-content { border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 32px -12px rgba(16,33,64,.35); }