/* ════════════════════════════════════════════════════════════════
   notif-modal.css — componentes do modal de Notificações redesenhado
   (espelha o app Flutter): cards "Locais monitorados" / "Resumos por
   IA", seletor múltiplo de estados e prévia de notificação.

   Usado por index.html e indexbeta.html (Tailwind). A página novidades
   standalone tem as mesmas classes em novidades.css. As classes são
   prefixadas .rmf- e renderizadas/abertas pelo app-notifications.js.

   Os tokens M3 (--md-sys-color-*) são definidos AQUI, escopados aos três
   overlays do modal, pra não vazar pra UI da página. Dark mode segue os
   dois mecanismos das páginas: @media prefers-color-scheme + classe .dark.
   ════════════════════════════════════════════════════════════════ */

/* ── Tokens M3 (light) ── */
#alert-modal-overlay, #state-picker-overlay, #preview-modal-overlay {
  --md-sys-color-primary: #4E5B8E;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #DCE1FA;
  --md-sys-color-on-primary-container: #0A1633;
  --md-sys-color-secondary-container: #DEE1F4;
  --md-sys-color-on-secondary-container: #161B2C;
  --md-sys-color-tertiary-container: #FED7F2;
  --md-sys-color-on-tertiary-container: #2B1228;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-on-surface-variant: #45475A;
  --md-sys-color-outline: #75778B;
  --md-sys-color-outline-variant: #C5C6DC;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F3F1FA;
  --md-sys-color-surface-container: #EDEBF4;
  --md-sys-color-surface-container-high: #E7E5EE;
  --md-sys-color-surface-container-highest: #E1DFE8;
}

/* ── Tokens M3 (dark) — OS preference ── */
@media (prefers-color-scheme: dark) {
  #alert-modal-overlay, #state-picker-overlay, #preview-modal-overlay {
    --md-sys-color-primary: #B7C0E5;
    --md-sys-color-on-primary: #202B53;
    --md-sys-color-primary-container: #36426A;
    --md-sys-color-on-primary-container: #DCE1FA;
    --md-sys-color-secondary-container: #424658;
    --md-sys-color-on-secondary-container: #DEE1F4;
    --md-sys-color-tertiary-container: #5B3D55;
    --md-sys-color-on-tertiary-container: #FED7F2;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #F9DEDC;
    --md-sys-color-on-surface: #E6E1E5;
    --md-sys-color-on-surface-variant: #C5C6DC;
    --md-sys-color-outline: #8F90A5;
    --md-sys-color-outline-variant: #45475A;
    --md-sys-color-surface-container-lowest: #0D0E13;
    --md-sys-color-surface-container-low: #1B1C22;
    --md-sys-color-surface-container: #1E1F24;
    --md-sys-color-surface-container-high: #2A2B30;
    --md-sys-color-surface-container-highest: #35363B;
  }
}

/* ── Tokens M3 (dark) — classe .dark forçada ── */
.dark #alert-modal-overlay, .dark #state-picker-overlay, .dark #preview-modal-overlay {
  --md-sys-color-primary: #B7C0E5;
  --md-sys-color-on-primary: #202B53;
  --md-sys-color-primary-container: #36426A;
  --md-sys-color-on-primary-container: #DCE1FA;
  --md-sys-color-secondary-container: #424658;
  --md-sys-color-on-secondary-container: #DEE1F4;
  --md-sys-color-tertiary-container: #5B3D55;
  --md-sys-color-on-tertiary-container: #FED7F2;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;
  --md-sys-color-on-surface: #E6E1E5;
  --md-sys-color-on-surface-variant: #C5C6DC;
  --md-sys-color-outline: #8F90A5;
  --md-sys-color-outline-variant: #45475A;
  --md-sys-color-surface-container-lowest: #0D0E13;
  --md-sys-color-surface-container-low: #1B1C22;
  --md-sys-color-surface-container: #1E1F24;
  --md-sys-color-surface-container-high: #2A2B30;
  --md-sys-color-surface-container-highest: #35363B;
}

/* ─── Card / balão de seção ─── */
.rmf-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px; border-radius: 16px;
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.rmf-card.hidden { display: none; }
.rmf-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rmf-card__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--md-sys-color-on-surface); }
.rmf-card__title i { color: var(--md-sys-color-primary); font-size: 15px; }
.rmf-card__info {
  width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--md-sys-color-on-surface-variant); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; transition: background .15s;
}
.rmf-card__info:hover { background: var(--md-sys-color-surface-container-highest); }
.rmf-card__divider { height: 1px; background: var(--md-sys-color-outline-variant); margin: 2px 0; }

/* ─── Empty-state de cidades (sugestões em 1 toque) ─── */
.rmf-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 2px; }
.rmf-empty.hidden { display: none; }
.rmf-empty-title { font-size: 13px; font-weight: 600; color: var(--md-sys-color-on-surface); text-align: center; }
.rmf-empty-sub { font-size: 12px; color: var(--md-sys-color-on-surface-variant); text-align: center; margin-bottom: 8px; }
.rmf-sugg-wrap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rmf-sugg {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 100px; border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface);
  font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s;
}
.rmf-sugg:hover { background: var(--md-sys-color-surface-container); border-color: var(--md-sys-color-primary); }
.rmf-sugg i { color: var(--md-sys-color-primary); font-size: 11px; }

/* ─── Seção de estados ─── */
.rmf-states { display: flex; flex-direction: column; gap: 8px; }
.rmf-states.hidden { display: none; }
.rmf-states__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rmf-states__label { font-size: 13px; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.rmf-add-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: none; border-radius: 100px;
  background: transparent; color: var(--md-sys-color-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.rmf-add-btn:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }
.rmf-add-btn i { font-size: 12px; }
.rmf-states__hint { margin: 0; font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.rmf-states__hint.hidden { display: none; }
.rmf-states__warn { margin: 2px 0 0; font-size: 11px; color: var(--md-sys-color-on-surface-variant); }
.rmf-states__warn.hidden { display: none; }
.rmf-state-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rmf-state-list.hidden { display: none; }
.rmf-state-list > li {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 12px;
  border-radius: 100px; font-size: 12px; font-weight: 500; line-height: 1;
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
}
.rmf-state-list > li button {
  width: 18px; height: 18px; flex-shrink: 0; padding: 0; border: none; cursor: pointer; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: inherit;
  opacity: .75; transition: background .15s, opacity .15s;
}
.rmf-state-list > li button:hover { opacity: 1; background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

/* ─── Frequência segmentada (Resumo das ERBs) ─── */
.rmf-seg { display: flex; border: 1px solid var(--md-sys-color-outline); border-radius: 100px; overflow: hidden; }
.rmf-seg.hidden { display: none; }
.rmf-seg__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px;
  border: none; background: transparent; color: var(--md-sys-color-on-surface-variant);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.rmf-seg__btn + .rmf-seg__btn { border-left: 1px solid var(--md-sys-color-outline); }
.rmf-seg__btn i { font-size: 12px; }
.rmf-seg__btn.is-active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* ─── Seletor múltiplo de estados ─── */
.rmf-sp-list { display: flex; flex-direction: column; }
.rmf-sp-region {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--md-sys-color-primary); padding: 14px 4px 6px;
}
.rmf-sp-region:first-child { padding-top: 4px; }
.rmf-sp-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; cursor: pointer; transition: background .12s; }
.rmf-sp-item:hover { background: var(--md-sys-color-surface-container); }
.rmf-sp-item input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.rmf-sp-box {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; border: 2px solid var(--md-sys-color-outline);
  display: inline-flex; align-items: center; justify-content: center; color: var(--md-sys-color-on-primary);
  transition: background .12s, border-color .12s;
}
.rmf-sp-box i { font-size: 11px; opacity: 0; transition: opacity .12s; }
.rmf-sp-item.is-checked .rmf-sp-box { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.rmf-sp-item.is-checked .rmf-sp-box i { opacity: 1; }
.rmf-sp-name { flex: 1; font-size: 14px; color: var(--md-sys-color-on-surface); }
.rmf-sp-uf { font-size: 11px; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.rmf-sp-empty { padding: 24px 0; text-align: center; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }

/* ─── Prévia de notificação (balão + dots) ─── */
.rmf-preview-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--md-sys-color-on-surface-variant); }
.rmf-bubble {
  display: flex; gap: 12px; padding: 12px; border-radius: 14px;
  border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-highest);
}
.rmf-bubble__icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; font-size: 18px;
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  display: inline-flex; align-items: center; justify-content: center;
}
.rmf-bubble__body { flex: 1; min-width: 0; }
.rmf-bubble__head { display: flex; align-items: center; }
.rmf-bubble__head strong { font-size: 13px; font-weight: 700; color: var(--md-sys-color-on-surface); }
.rmf-bubble__head span { font-size: 11px; color: var(--md-sys-color-on-surface-variant); }
.rmf-bubble__text { margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--md-sys-color-on-surface); }
.rmf-dots { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rmf-dot { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 35%, transparent); cursor: pointer; transition: width .2s, background .2s; }
.rmf-dot.is-active { width: 18px; background: var(--md-sys-color-primary); }