/* ════════════════════════════════════════════════════════════════
   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: #4B5C92;
  --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: #74566D;
  --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: #45464C;
  --md-sys-color-outline: #76777C;
  --md-sys-color-outline-variant: #C7C6CC;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F7F7;
  --md-sys-color-surface-container: #F1F1F2;
  --md-sys-color-surface-container-high: #ECECED;
  --md-sys-color-surface-container-highest: #E3E2E8;

  /* Raios (DESIGN §6) e elevação de card (§10) — invariantes de tema, então
     definidos só aqui; os blocos dark sobrescrevem apenas cor e herdam estes. */
  --rmf-radius-sm: 8px;
  --rmf-radius-md: 12px;
  --rmf-radius-lg: 20px;
  --rmf-radius-full: 999px;
  --rmf-elev-1: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
}

/* ── 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: #E2BCD3;
    --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: #C6C6CC;
    --md-sys-color-outline: #8F9099;
    --md-sys-color-outline-variant: #45464A;
    --md-sys-color-surface-container-lowest: #0D0E13;
    --md-sys-color-surface-container-low: #1C1C21;
    --md-sys-color-surface-container: #1F1F24;
    --md-sys-color-surface-container-high: #26262B;
    --md-sys-color-surface-container-highest: #2A2A2F;
  }
}

/* ── 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: #E2BCD3;
  --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: #C6C6CC;
  --md-sys-color-outline: #8F9099;
  --md-sys-color-outline-variant: #45464A;
  --md-sys-color-surface-container-lowest: #0D0E13;
  --md-sys-color-surface-container-low: #1C1C21;
  --md-sys-color-surface-container: #1F1F24;
  --md-sys-color-surface-container-high: #26262B;
  --md-sys-color-surface-container-highest: #2A2A2F;
}

/* ─── Card / balão de seção ─── */
/* Bloco = Card (DESIGN §10): canto 12 + elevação 1 (sombra sutil), sem borda. */
.rmf-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px; border-radius: var(--rmf-radius-md);
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--rmf-elev-1);
}
.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: var(--rmf-radius-lg); border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low); 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: var(--rmf-radius-lg); font-size: 12px; font-weight: 500; line-height: 1;
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-tertiary) 20%, transparent);
}
.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: 500; 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: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); color: var(--md-sys-color-primary); font-weight: 600; }

/* ─── 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); }

/* ─── "Receber": canais de notificação (rodapé do card de locais) ─── */
.rmf-channels { display: flex; flex-direction: column; gap: 8px; }
/* Subtítulo: mesmo tratamento do subtítulo de Estados, com recuo à esquerda. */
.rmf-channels__sub { padding-left: 4px; padding-bottom: 2px; }
/* Chips centralizados, quebram linha se faltar espaço.
   ESCOPADO a .rmf-channels: .rmf-chips é a MESMA classe da barra de modo do
   topo (rmf-maps.css), que usa overflow-x:auto p/ rolar na horizontal. Sem o
   escopo, este flex-wrap vencia pela ordem da cascata e matava o scroll lá. */
.rmf-channels .rmf-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 2px;
}
/* FilterChip M3: checkmark some quando não selecionado (width 0). */
.rmf-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--md-sys-color-outline);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, padding .12s;
}
.rmf-chip:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); }
.rmf-chip__check { font-size: 12px; width: 0; opacity: 0; overflow: hidden; transition: width .12s, opacity .12s; }
.rmf-chip.is-on {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent; padding-left: 10px;
}
.rmf-chip.is-on .rmf-chip__check { width: 12px; opacity: 1; }
/* Chip SEI na web: informativo (abre modal), nunca um toggle ligado. */
.rmf-chip--info { border-style: dashed; }

/* ═══════ Desktop: modal de Notificações em 2 colunas (Bento) ═══════
   Só #alert-modal-content, a partir de 768px. No celular fica intocado
   (coluna única). A intro atravessa as duas colunas; cada .rmf-card
   (Notificações do SIN / Usinas acompanhadas) vira uma coluna. align-items:start
   deixa cada card abraçar o próprio conteúdo, sem esticar o mais curto. */
@media (min-width: 768px) {
  #alert-modal-content { max-width: 46rem; }
  #alert-modal-content .nv-modal__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 16px;
  }
  #alert-modal-content .nv-alert-intro { grid-column: 1 / -1; }
}