/* ============================================================
   MINHA MORADA — área do morador (casa + dados cadastrais)
   ============================================================ */

/* ---- Sua casa ---- */
.mm-house { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-6); align-items: stretch; }
.mm-house-info {
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--green-50); border: 1px solid var(--green-200);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.mm-house-eyebrow { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--green-600); }
.mm-house-addr { font-family: var(--font-heading); font-size: var(--text-h2, 1.7rem); line-height: 1.1; color: var(--color-text); margin-top: var(--space-2); }
.mm-house-lote { font-size: var(--text-base, 1rem); color: var(--color-text-muted); }
.mm-house-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: auto; padding-top: var(--space-5); }
.mm-house-since { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-text); }
.mm-house-since strong { font-family: var(--font-heading); }
.mm-house-meta svg { color: var(--green-600); flex: none; }

.mm-map-readonly { position: relative; }
.mm-map-readonly .map { height: 100%; min-height: 240px; cursor: default; }
.mm-map-readonly .map-foot { display: none; }
.mm-map-lock { position: absolute; inset: 0; z-index: 5; cursor: default; }

/* ---- Linhas de dados (modo leitura) ---- */
.mm-rows {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.mm-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--color-surface); }
.mm-row-full { grid-column: 1 / -1; }
.mm-v-line { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }

/* badge verificado / conta google */
.mm-verif { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--green-100); color: var(--green-700); font-family: var(--font-heading); font-weight: 600; font-size: 11px; white-space: nowrap; flex: none; }
.mm-verif svg { flex: none; }

/* botão de edição por campo */
.mm-row-edit { margin-left: auto; flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: border-color var(--dur-fast, .15s), color var(--dur-fast, .15s), background var(--dur-fast, .15s); }
.mm-row-edit:hover { border-color: var(--green-300); color: var(--green-700); background: var(--green-50); }

/* linha em modo de edição inline */
.mm-row-editing { align-items: flex-start; }
.mm-row-edit-box { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mm-edit-aviso { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--info-bg); border: 1px solid var(--info-border); color: var(--color-text); font-size: var(--text-xs); line-height: var(--leading-snug, 1.35); }
.mm-edit-aviso svg { color: var(--info); flex: none; margin-top: 1px; }
.mm-edit-erro { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--danger); }

/* alteração de endereço pendente de aprovação da Secretaria */
.mm-pending { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warning-bg); border: 1px solid var(--warning-border); }
.mm-pending svg { color: var(--warning); flex: none; margin-top: 2px; }
.mm-pending strong { display: block; font-family: var(--font-heading); font-size: var(--text-xs); color: var(--color-text); }
.mm-pending span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* modal de verificação de contato */
.mm-verify { display: flex; flex-direction: column; gap: var(--space-4); }
.mm-verify-lead { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed); }
.mm-demo-hint { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--info-bg); border: 1px dashed var(--info-border); font-size: var(--text-xs); color: var(--color-text-muted); }
.mm-demo-hint svg { color: var(--info); flex: none; }
.mm-demo-hint strong { color: var(--color-text); font-family: var(--font-mono); letter-spacing: .12em; }
.mm-code-input { font-family: var(--font-mono); font-size: var(--text-h3); letter-spacing: .35em; text-align: center; }
.mm-verify-back { align-self: center; background: none; border: none; color: var(--color-link); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); cursor: pointer; padding: var(--space-1) var(--space-2); }
.mm-verify-back:hover { color: var(--color-link-hover); text-decoration: underline; }
.mm-row-ic { flex: none; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--green-100); color: var(--green-700); display: flex; align-items: center; justify-content: center; }
.mm-row-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mm-k { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-faint); }
.mm-v { font-size: var(--text-base, 1rem); color: var(--color-text); overflow-wrap: anywhere; }

/* ---- Edição ---- */
.mm-edit { display: flex; flex-direction: column; gap: var(--space-5); }
.mm-edit-map { margin-top: var(--space-1); }
.mm-edit-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ---- Situação do cadastro (card claro) ---- */
.mm-status { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); }
.mm-status-head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.mm-status-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: flex; align-items: center; justify-content: center; }
.mm-status-head strong { display: block; font-family: var(--font-heading); font-size: var(--text-base, 1rem); color: var(--color-text); }
.mm-status-head span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* gate-steps reaproveitado, mas em fundo claro */
.mm-status .gate-steps { margin: var(--space-4) 0; }
.mm-status .gate-steps li { color: var(--color-text); }
.mm-status .gate-step.now { background: var(--green-100); color: var(--green-700); border: 1px solid var(--green-300); }

/* ---- Conta e acesso ---- */
.mm-account { display: flex; flex-direction: column; gap: var(--space-4); }
.mm-account-row { display: flex; align-items: center; gap: var(--space-3); }
.mm-account-ic { flex: none; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--green-100); color: var(--green-700); display: flex; align-items: center; justify-content: center; }
.mm-account-note { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.mm-account-note svg { color: var(--green-600); flex: none; }

/* ---- Próxima taxa (pagamento) ---- */
.mm-next { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: var(--space-3); }
.mm-next-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.mm-next-tx { display: flex; flex-direction: column; min-width: 0; }
.mm-next-ref { font-family: var(--font-heading); font-size: var(--text-base, 1rem); color: var(--color-text); }
.mm-next-sub { font-size: var(--text-xs); color: var(--color-text-faint); font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.mm-next-valor { font-family: var(--font-heading); font-weight: var(--weight-bold, 700); font-size: var(--text-h2, 1.7rem); line-height: 1; color: var(--color-text); }
.mm-next-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.mm-next-note svg { color: var(--green-600); flex: none; }
.mm-next .link-action { font-size: var(--text-sm); }
.mm-next.is-clear { align-items: center; text-align: center; padding: var(--space-6) var(--space-5); }
.mm-next-clear-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: flex; align-items: center; justify-content: center; }
.mm-next.is-clear strong { font-family: var(--font-heading); font-size: var(--text-base, 1rem); color: var(--color-text); }
.mm-next.is-clear span:last-child { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- Histórico de pagamentos (gráfico de barras) ---- */
.mm-finance { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); }
.mm-fin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.mm-fin-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-soft, var(--stone-50)); border: 1px solid var(--color-border); }
.mm-fin-num { font-family: var(--font-heading); font-weight: var(--weight-bold, 700); font-size: var(--text-h3); line-height: 1; }
.mm-fin-lbl { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-heading); font-weight: 600; }
.mm-fin-stat.is-pago .mm-fin-num { color: var(--green-700); }
.mm-fin-stat.is-pendente .mm-fin-num { color: var(--warning); }
.mm-fin-stat.is-atrasado .mm-fin-num { color: var(--danger); }

.mm-chart { display: flex; align-items: flex-end; gap: var(--space-2); height: 156px; padding: var(--space-2) 0; }
.mm-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); height: 100%; min-width: 0; }
.mm-bar-track { flex: 1; width: 100%; max-width: 26px; display: flex; align-items: flex-end; }
.mm-bar { width: 100%; min-height: 6px; border-radius: var(--radius-sm) var(--radius-sm) 2px 2px; transition: height var(--dur-base, .25s) var(--ease-out, ease); }
.mm-bar.is-pago { background: var(--green-500); }
.mm-bar.is-pendente { background: var(--warning); }
.mm-bar.is-atrasado { background: var(--danger); }
.mm-bar-col:hover .mm-bar { filter: brightness(1.06); }
.mm-bar-mes { font-size: 10.5px; color: var(--color-text-faint); font-family: var(--font-heading); font-weight: 600; }

.mm-chart-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.mm-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.mm-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mm-leg { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.mm-leg.is-pago { background: var(--green-500); }
.mm-leg.is-pendente { background: var(--warning); }
.mm-leg.is-atrasado { background: var(--danger); }
.mm-chart-total { font-size: var(--text-xs); color: var(--color-text-muted); }
.mm-chart-total strong { color: var(--color-text); font-family: var(--font-heading); }

/* ---- banner de cadastro incompleto ---- */
.mm-incompleto { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-8); border-radius: var(--radius-lg); background: var(--warning-bg); border: 1px solid var(--warning-border); }
.mm-incompleto-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); display: flex; align-items: center; justify-content: center; }
.mm-incompleto-tx { flex: 1; min-width: 0; }
.mm-incompleto-tx strong { display: block; font-family: var(--font-heading); color: var(--color-text); }
.mm-incompleto-tx span { font-size: var(--text-sm); color: var(--color-text-muted); }
.mm-incompleto .btn { flex: none; }
.mm-status-ic.is-pending { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }

/* ---- listas de contato (e-mails / telefones) ---- */
.mm-contact-group + .mm-contact-group { margin-top: var(--space-6); }
.mm-contact-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mm-contact-head h3 { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-base, 1rem); margin: 0; }
.mm-contact-head h3 svg { color: var(--green-600); }
.mm-contact-hint { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.mm-contact-list { display: flex; flex-direction: column; gap: var(--space-2); }
.mm-contact-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.mm-contact-item.is-primary { border-color: var(--green-300); background: var(--green-50); }
.mm-contact-ic { flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--green-100); color: var(--green-700); display: flex; align-items: center; justify-content: center; }
.mm-contact-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mm-contact-tx strong { font-family: var(--font-heading); font-weight: var(--weight-semibold, 600); color: var(--color-text); overflow-wrap: anywhere; }
.mm-contact-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 600; font-size: 11px; white-space: nowrap; }
.mm-chip.is-primary { background: var(--green-700); color: var(--stone-50); }
.mm-chip.is-ok { background: var(--green-100); color: var(--green-700); }
.mm-chip.is-warn { background: var(--warning-bg); color: var(--warning); }
.mm-contact-actions { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.mm-mini-btn { background: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 5px 10px; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xs); color: var(--color-text-muted); cursor: pointer; transition: border-color var(--dur-fast, .15s), color var(--dur-fast, .15s), background var(--dur-fast, .15s); }
.mm-mini-btn:hover { border-color: var(--green-300); color: var(--green-700); background: var(--green-50); }
.mm-mini-btn.is-icon { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.mm-mini-btn.is-icon:hover { border-color: var(--danger-border); color: var(--danger); background: var(--danger-bg); }

/* ---- seletor de Conta Google ---- */
.mm-goog { display: flex; flex-direction: column; gap: var(--space-4); }
.mm-goog-list { display: flex; flex-direction: column; gap: var(--space-2); }
.mm-goog-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer; transition: border-color var(--dur-fast, .15s), box-shadow var(--dur-fast, .15s); }
.mm-goog-item:hover { border-color: var(--green-400); box-shadow: var(--shadow-xs); }
.mm-goog-av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--green-700); color: var(--stone-50); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); }
.mm-goog-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mm-goog-tx strong { font-family: var(--font-heading); color: var(--color-text); }
.mm-goog-tx span { font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.mm-goog-item svg { color: var(--color-text-faint); flex: none; }
.mm-goog-empty { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--green-50); border: 1px solid var(--green-200); color: var(--green-700); font-size: var(--text-sm); }
.mm-goog-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }
.mm-goog-foot svg { flex: none; }
.mm-goog-sec { display: flex; flex-direction: column; gap: var(--space-2); }
.mm-goog-label { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-faint); }
.mm-goog-item.is-static { cursor: default; }
.mm-goog-item.is-static:hover { border-color: var(--color-border-strong); box-shadow: none; }
.mm-goog-add { flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); color: var(--green-700); }
.mm-goog-new { display: flex; gap: var(--space-2); }
.mm-goog-new .input { flex: 1; min-width: 0; }
.mm-goog-new .btn { flex: none; }

/* botão “entrar com o Google” + painel de login simulado */
.mm-google-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; padding: 0.7rem 1.25rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); color: var(--color-text); cursor: pointer; transition: border-color var(--dur-fast, .15s), box-shadow var(--dur-fast, .15s); }
.mm-google-btn:hover { border-color: var(--green-300); box-shadow: var(--shadow-xs); }
.mm-google-g { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--stone-0, #fff); border: 1px solid var(--color-border-strong); color: var(--green-700); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.mm-google-g.lg { width: 40px; height: 40px; font-size: 22px; }
.mm-gsignin { display: flex; flex-direction: column; gap: var(--space-4); }
.mm-gsignin-head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.mm-gsignin-head strong { display: block; font-family: var(--font-heading); font-size: var(--text-lg, 1.1rem); color: var(--color-text); }
.mm-gsignin-head span { font-size: var(--text-sm); color: var(--color-text-muted); }
.mm-gsignin-note { margin: 0; font-size: var(--text-xs); color: var(--color-text-faint); }

/* confirmação de remoção de contato */
.mm-confirm { display: flex; flex-direction: column; gap: var(--space-5); }
.mm-confirm-aviso { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--warning-bg); border: 1px solid var(--warning-border); }
.mm-confirm-aviso svg { color: var(--warning); flex: none; margin-top: 1px; }
.mm-confirm-aviso p { margin: 0; font-size: var(--text-sm); color: var(--color-text); line-height: var(--leading-relaxed); }
.mm-confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ---- seletor de canal (WhatsApp / SMS) ---- */
.mm-canal-seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mm-canal-opt { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; transition: border-color var(--dur-fast, .15s), color var(--dur-fast, .15s), background var(--dur-fast, .15s); }
.mm-canal-opt:hover { border-color: var(--green-300); color: var(--green-700); }
.mm-canal-opt.active { border-color: var(--green-600); background: var(--green-50); color: var(--green-800); box-shadow: inset 0 0 0 1px var(--green-600); }
.mm-canal-opt svg { flex: none; }
.mm-canal-rec { font-family: var(--font-heading); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--green-700); background: var(--green-100); border-radius: var(--radius-pill); padding: 1px 6px; }

/* ---- Domicílio · família ---- */
.mm-fam-lead { margin: var(--space-1) 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed); max-width: var(--width-prose); }
.mm-fam-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.mm-fam-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-xs); }
.mm-fam-card.is-titular { border-color: var(--green-300); background: color-mix(in srgb, var(--green-50) 60%, var(--color-surface)); }
.mm-fam-top { display: flex; align-items: flex-start; gap: var(--space-3); }
.mm-fam-av { flex: none; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--stone-200); color: var(--stone-700); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); }
.mm-fam-av.is-titular { background: var(--green-600); color: #fff; }
.mm-fam-id { flex: 1; min-width: 0; }
.mm-fam-name { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mm-fam-name strong { font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-text); }
.mm-fam-rel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); padding: 2px 7px; border-radius: var(--radius-pill); background: var(--stone-100); color: var(--stone-600); }
.mm-fam-rel.is-titular { background: var(--green-200); color: var(--green-900); }
.mm-fam-gest { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-muted); }
.mm-fam-gest em { font-style: normal; color: var(--color-text); }
.mm-fam-inv { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--sun-700); background: var(--sun-100); border-radius: var(--radius-pill); padding: 1px 6px; margin-left: 4px; }
.mm-fam-inv.is-ok { color: var(--green-800); background: var(--green-100); }
.mm-fam-del { flex: none; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--color-text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast), color var(--dur-fast); }
.mm-fam-del:hover { background: var(--danger-bg); color: var(--danger); }

.mm-fam-perfis { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-perfil { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xs); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
button.mm-perfil:hover { border-color: var(--green-400); color: var(--color-text); }
.mm-perfil.on { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.mm-perfil-tick { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; font-weight: 700; opacity: .85; }
.mm-fam-empty { font-size: var(--text-xs); color: var(--color-text-faint); font-style: italic; }

.mm-fam-foot { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.mm-fam-invite { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mm-fam-invite .input { flex: 1; min-width: 140px; }

.mm-fam-add { margin-top: var(--space-3); border: 1px dashed var(--green-300); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--green-50); display: flex; flex-direction: column; gap: var(--space-3); }
.mm-fam-add-head { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); color: var(--green-800); }

@container portal (max-width: 900px) {
  .mm-house { grid-template-columns: 1fr; }
  .mm-rows { grid-template-columns: 1fr; }
  .mm-fam-list { grid-template-columns: 1fr; }
}