/* =============================================================================
   Selector de alcance de notificaciones (compartido entre registro y preferencias)
   Modos: Todo el país / Por estado (mapa interactivo + buscador).
   ========================================================================== */

.nsp-cols {
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
}
.nsp-left { flex:0 0 290px; max-width:290px; }
.nsp-right { flex:1; min-width:0; }

/* Opciones de alcance */
.nsp .scope-options {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:1rem;
}
.nsp .scope-opt {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1.5px solid #E2E8F0;
  border-radius:10px;
  cursor:pointer;
  transition:all 0.2s;
}
.nsp .scope-opt:hover { border-color:#94A3B8; }
.nsp .scope-opt.active { border-color:#034B98; background:rgba(3,75,152,0.04); }
.nsp .scope-opt input { margin-top:3px; accent-color:#034B98; }
.nsp .scope-opt .scope-t { font-weight:600; color:#1E293B; font-size:0.9rem; display:block; }
.nsp .scope-opt .scope-d { color:#64748B; font-size:0.78rem; }

.nsp .map-hint { font-size:0.8rem; color:#64748B; margin-bottom:0.5rem; }

/* Buscador de estados */
.nsp-search-wrap { position:relative; margin-bottom:0.75rem; }
.nsp-search {
  width:100%;
  padding:10px 14px;
  border:1.5px solid #E2E8F0;
  border-radius:10px;
  font-size:0.9rem;
  color:#1E293B;
  background:#F8FAFC;
  outline:none;
  transition:all 0.2s;
}
.nsp-search:focus { border-color:#034B98; background:#fff; box-shadow:0 0 0 3px rgba(3,75,152,0.1); }
.nsp-suggest {
  display:none;
  position:absolute;
  z-index:20;
  left:0; right:0;
  top:calc(100% + 4px);
  max-height:240px;
  overflow-y:auto;
  background:#fff;
  border:1.5px solid #E2E8F0;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.10);
}
.nsp-suggest.show { display:block; }
.nsp-suggest-item {
  padding:9px 14px;
  font-size:0.86rem;
  color:#334155;
  cursor:pointer;
}
.nsp-suggest-item:hover, .nsp-suggest-item.active { background:#EFF6FF; color:#034B98; }
.nsp-suggest-empty { padding:9px 14px; font-size:0.82rem; color:#94A3B8; }

/* Encabezado de chips + link para limpiar */
.nsp .state-chips-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:0.5rem;
}
.nsp .map-clear {
  font-size:0.78rem;
  color:#E40319;
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
}
.nsp .map-clear:hover { text-decoration:underline; }

/* Chips de estados elegidos */
.nsp .state-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:1rem; }
.nsp .state-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#EFF6FF;
  color:#034B98;
  border:1px solid #BFDBFE;
  border-radius:999px;
  padding:4px 10px;
  font-size:0.78rem;
}
.nsp .state-chip .x { cursor:pointer; font-weight:700; line-height:1; }

/* Error del selector */
.nsp-err { display:none; color:#DC2626; font-size:0.78rem; margin-top:5px; }
.nsp-err.show { display:block; }

/* Mapa de México */
#nsp-map { width:100%; }
#nsp-map svg { width:100%; height:auto; display:block; }
#nsp-map svg path { fill:#E2E8F0; stroke:#fff; stroke-width:0.7; transition:fill 0.15s; }
/* Base de los estados seleccionables: azul corporativo */
#nsp-map svg path.selectable { fill:#034B98; cursor:pointer; }
#nsp-map svg path.selectable:hover { fill:#0560C0; }
/* Estados seleccionados: rojo del logo */
#nsp-map svg path.selected { fill:#E40319; }
#nsp-map svg path.selected:hover { fill:#E40319; }
/* Estados fuera del catálogo (no seleccionables) */
#nsp-map svg path.disabled { fill:#E2E8F0; cursor:not-allowed; }

/* Placeholder cuando el alcance es "todo el país" */
.nsp-placeholder {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#94A3B8;
  min-height:320px;
  border:1.5px dashed #E2E8F0;
  border-radius:12px;
  padding:1.5rem;
}
.nsp-placeholder i { font-size:2.6rem; margin-bottom:0.85rem; color:#CBD5E1; }
.nsp-placeholder .ph-t { font-weight:600; color:#64748B; font-size:0.95rem; margin-bottom:0.25rem; }
.nsp-placeholder .ph-d { font-size:0.82rem; }

@media(max-width:768px){
  .nsp-cols { flex-direction:column; }
  .nsp-left { flex:none; max-width:none; width:100%; }
}