/* ============================================================================
   notis.css  -  Las filas de avisos dentro de la tarjeta de Notificaciones
   ----------------------------------------------------------------------------
   Reutiliza .settings-toggle-row y .switch, que ya existen en style.css. Lo
   unico propio es el bloque que las agrupa, el estado en gris cuando el
   interruptor maestro esta apagado y el boton de probar.
   ========================================================================== */

.notis-bloque {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--wa-divider);
  transition: opacity .18s ease;
}

.notis-intro {
  margin: 10px 0 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 62ch;
}

/* El titulo de cada aviso no necesita el icono que llevan los de arriba:
   son cuatro seguidos y cuatro iconos distintos serian ruido. */
.notis-fila .settings-toggle-title { font-size: 13.5px; }
.notis-fila .settings-toggle-desc  { max-width: 54ch; }

/* El que no se puede apagar: encendido y sin manos. Se deja con su color
   para que se lea como "activo", no como "roto". */
.switch--fijo { cursor: default; }
.switch--fijo .slider { cursor: default; opacity: .72; }

/* Maestro apagado: no hay dispositivo suscrito, asi que ninguno de estos
   avisos puede llegar. Se dice en gris en vez de dejarlos pulsables. */
.notis-apagado { opacity: .45; }
.notis-apagado .switch .slider { cursor: not-allowed; }

.notis-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--wa-divider);
}

.notis-probar {
  flex: none;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--wa-divider);
  background: var(--card-bg);
  color: var(--text-dark);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.notis-probar:hover:not(:disabled) {
  border-color: var(--marca, #0F5132);
  color: var(--marca, #0F5132);
}
.notis-probar:disabled { cursor: not-allowed; opacity: .6; }

.notis-nota {
  font-size: 12.5px;
  color: var(--text-muted);
  min-width: 0;
}

[data-theme="dark"] .notis-probar:hover:not(:disabled) {
  border-color: #7FD4A8;
  color: #7FD4A8;
}

/* En el movil la nota debajo del boton, no al lado: no cabe */
@media (max-width: 560px) {
  .notis-pie { flex-direction: column; align-items: stretch; }
  .notis-probar { width: 100%; }
}